/* ============================================================
   赢国保险 INGO INSURANCE — Главная ДКБ | 1440px
   Figma: 6s8XfZbPjDgTz9S7CORiMM · node 2682:36711
   ============================================================ */

/* ---------- Design tokens ---------- */
:root{
  /* colours */
  --surface-body:#f6f6f6;
  --surface-main:#ffffff;
  --surface-secondary:#f6f6f6;
  --border-secondary:#ededed;

  --text-main:#0d0d0e;
  --text-secondary:#6c7080;
  --text-on-color:#ffffff;

  --primary:#0062d2;
  --primary-dark:#004de5;

  /* geometry */
  --container:1200px;
  --safe-zone:120px;
  --block-spacing:40px;
  --radius-card:32px;
  --radius-media:30px;
  --radius-hero:40px;
  --radius-btn:16px;

  /* spacing scale */
  --sp-8:8px;
  --sp-12:12px;
  --sp-16:16px;
  --sp-20:20px;
  --sp-24:24px;
  --sp-32:32px;

  /* type — system-first stacks: Google Fonts is blocked in mainland China,
     so CJK text relies on system fonts (standard practice for zh sites) */
  --font-cn:"PingFang SC","Microsoft YaHei","Hiragino Sans GB","Noto Sans SC","Heiti SC",sans-serif;
  --font-ui:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"PingFang SC","Microsoft YaHei","Noto Sans SC",sans-serif;

  --h1:60px;
  --h2:32px;
  --h2-lg:36px;
  --h3:30px;
  --body:22px;
  --body-lg:25px;

  --header-h:96px;
}

/* ---------- Self-hosted Inter (optional) ----------
   To serve Inter locally (SIL OFL licence — free for commercial use):
   1. Download latin-subset woff2 files for weights 400/500/700
      (e.g. via https://gwfh.mranftl.com/fonts/inter → "latin" → woff2)
   2. Put them in assets/fonts/ with the names below
   3. Uncomment this block.
   Chinese text intentionally uses system fonts only — do NOT upload
   Microsoft YaHei / PingFang font files to the server (proprietary).

@font-face{
  font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;
  src:url("assets/fonts/inter-400.woff2") format("woff2");
}
@font-face{
  font-family:"Inter";font-style:normal;font-weight:500;font-display:swap;
  src:url("assets/fonts/inter-500.woff2") format("woff2");
}
@font-face{
  font-family:"Inter";font-style:normal;font-weight:700;font-display:swap;
  src:url("assets/fonts/inter-700.woff2") format("woff2");
}
*/

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--header-h) + 16px); }
body{
  margin:0;
  background:var(--surface-body);
  color:var(--text-main);
  font-family:var(--font-cn);
  font-size:16px;
  line-height:1.4;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,p,figure{margin:0}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:3px solid rgba(0,98,210,.45);outline-offset:3px;border-radius:6px}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

/* ---------- Layout primitives ---------- */
.container{
  width:100%;
  max-width:calc(var(--container) + var(--safe-zone) * 2);
  margin-inline:auto;
  padding-inline:var(--safe-zone);
}
.section{ padding-block:var(--block-spacing); }
.section__title{
  font-size:var(--h2);
  line-height:1.15;
  font-weight:400;
  color:var(--text-main);
  margin-bottom:var(--sp-32);
}
.section__title--lg{font-size:var(--h2-lg)}
.section__title h2{font-size:inherit;line-height:inherit;font-weight:400}
.section__subtitle{
  font-size:24px;
  line-height:32px;
  color:var(--text-secondary);
  margin-top:4px;
}
.stack{display:flex;flex-direction:column;gap:var(--sp-20)}
.grid{display:grid;gap:var(--sp-20)}
.grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}

/* ---------- Buttons / chips / badges ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-8);
  height:56px;padding:16px 24px;border-radius:var(--radius-btn);
  font-size:24px;line-height:24px;white-space:nowrap;
  transition:background-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.btn--primary{background:var(--primary);color:var(--text-on-color)}
.btn--primary:hover{background:var(--primary-dark);box-shadow:0 8px 20px rgba(0,98,210,.28)}
.btn--primary:active{transform:translateY(1px)}

.chip{
  display:inline-flex;align-self:flex-start;flex:0 0 auto;
  padding:8px 16px;border-radius:6px;
  background:var(--primary);color:#fff;
  font-family:var(--font-ui);font-weight:500;font-size:16px;line-height:normal;
}
.badge{
  display:inline-flex;align-items:center;justify-content:center;
  align-self:flex-start;flex:0 0 auto;
  min-width:36px;height:36px;padding-inline:8px;border-radius:18px;
  background:var(--primary);color:#fff;
  font-family:var(--font-ui);font-weight:700;font-size:18px;line-height:1;
}

/* ============================================================
   HEADER
   ============================================================ */
.header{
  position:sticky;top:0;z-index:60;
  background:var(--surface-body);
  transition:box-shadow .25s ease, background-color .25s ease;
}
.header.is-stuck{
  background:rgba(246,246,246,.92);
  backdrop-filter:blur(12px);
  box-shadow:0 4px 24px rgba(13,13,14,.07);
}
.header__inner{
  max-width:calc(var(--container) + var(--safe-zone) * 2);
  margin-inline:auto;
  padding:20px var(--safe-zone);
  display:flex;align-items:center;gap:30px;
  min-height:var(--header-h);
}
.header__logo img{width:144px;height:auto}
.header__utility{display:flex;align-items:center;gap:6px}
.util-link{
  display:inline-flex;align-items:center;gap:6px;
  font-size:24px;line-height:40px;color:var(--text-secondary);
  transition:color .2s ease;
}
.util-link + .util-link{margin-left:12px}
.util-link:hover{color:var(--primary)}
.util-link__icon{width:15px;height:15px;flex:0 0 auto;opacity:.75}

.nav{display:flex;align-items:center;gap:13px;margin-left:auto}
.nav__link{
  display:inline-flex;align-items:center;height:56px;
  padding-inline:6px;
  font-size:24px;line-height:40px;letter-spacing:-.24px;
  color:var(--text-secondary);
  position:relative;
  transition:color .2s ease;
}
.nav__link::after{
  content:"";position:absolute;left:6px;right:6px;bottom:12px;height:2px;
  background:var(--primary);border-radius:2px;
  transform:scaleX(0);transform-origin:left;
  transition:transform .25s ease;
}
.nav__link:hover{color:var(--primary)}
.nav__link:hover::after{transform:scaleX(1)}
.nav__link.is-active{color:var(--primary)}
.nav__link.is-active::after{transform:scaleX(1)}

.header__cta{margin-left:30px}

.burger{display:none;width:44px;height:44px;padding:10px;margin-left:auto;flex-direction:column;justify-content:space-between}
.burger span{display:block;height:2px;background:var(--text-main);border-radius:2px;transition:transform .25s ease,opacity .2s ease}
.burger.is-open span:nth-child(1){transform:translateY(10px) rotate(45deg)}
.burger.is-open span:nth-child(2){opacity:0}
.burger.is-open span:nth-child(3){transform:translateY(-10px) rotate(-45deg)}

.nav-backdrop{
  position:fixed;inset:0;z-index:65;
  background:rgba(13,13,14,.45);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  opacity:0;visibility:hidden;
  transition:opacity .35s ease, visibility .35s ease;
}
.nav-backdrop.is-visible{opacity:1;visibility:visible}

/* Drawer chrome (shown only in the mobile drawer) */
.nav__head,.nav__footer{display:none}

/* ============================================================
   HERO
   ============================================================ */
.hero{padding-block:0 var(--block-spacing)}
.hero__card{
  position:relative;
  background:var(--surface-main);
  border-radius:var(--radius-hero);
  overflow:hidden;
  min-height:440px;
  display:flex;align-items:center;
  padding:32px 32px 32px 32px;
}
.hero__image{
  position:absolute;
  left:21.33%;top:-5.3%;
  width:78.63%;height:110.72%;
  object-fit:cover;object-position:center;
  pointer-events:none;user-select:none;
}
.hero__content{
  position:relative;z-index:1;
  display:flex;flex-direction:column;justify-content:center;gap:var(--sp-8);
  min-height:376px;max-width:700px;
}
.hero__brand{
  font-size:var(--h1);line-height:1.15;font-weight:400;
  color:var(--primary);
}
.hero__title{
  font-size:36px;line-height:50px;font-weight:700;
  color:var(--text-main);
}
.hero__lines{margin-top:4px}
.hero__lines p{font-size:20px;line-height:30px;color:var(--text-main)}
.hero__note{
  margin-top:var(--sp-8);
  font-size:20px;line-height:30px;letter-spacing:-.2px;
  color:var(--primary);
}

/* ============================================================
   CARDS
   ============================================================ */
.card{
  background:var(--surface-main);
  border-radius:var(--radius-card);
  transition:transform .3s ease, box-shadow .3s ease;
}
.card--product,
.card--stat,
.card--media,
.card--adv{padding:48px 44px}
.card--stat,.card--media,.card--adv{padding:48px}
.card--product:hover,
.card--media:hover,
.card--adv:hover,
.card--stat:hover{
  transform:translateY(-4px);
  box-shadow:0 18px 40px rgba(13,13,14,.08);
}

.card__body{display:flex;flex-direction:column;gap:var(--sp-12)}
.card__icon{align-self:flex-start;flex:0 0 auto;width:auto;height:51px;margin-bottom:4px}
.card__icon--picture{position:relative;display:block;align-self:flex-start;flex:0 0 auto;width:51px;height:51px;margin-bottom:4px}
.card__icon--picture > img{position:absolute;inset:0;width:51px;height:51px}
.card__icon-dot{position:absolute;left:52.08%;top:14.58%;width:14.875px !important;height:14.875px !important}

.card__title{
  font-size:var(--h3);line-height:1.5;font-weight:400;
  color:var(--text-main);
}
.card__title--sm{font-size:24px}
.card__text{
  font-size:var(--body);line-height:40px;letter-spacing:-.22px;
  color:var(--text-secondary);
}
.card__text--lg{font-size:var(--body-lg);letter-spacing:-.25px}
.card__text--adv{font-size:24px;letter-spacing:-.24px}

/* --- 核心业务 --- */
.card--product{display:flex;flex-direction:column;gap:var(--sp-16);min-height:397px}

/* --- 数据一览 --- */
.card--stat{min-height:248px;display:flex;align-items:center;justify-content:center}
.stat{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--sp-16);text-align:center;width:100%}
.stat__value{
  display:flex;align-items:center;justify-content:center;gap:10px;
  font-size:75px;line-height:1;color:var(--primary);white-space:nowrap;
}
.stat__value img{width:72px;height:72px;flex:0 0 auto}
.stat__unit{color:var(--text-secondary)}
.stat__caption{font-size:var(--body-lg);line-height:40px;letter-spacing:-.25px;color:var(--text-secondary)}
.stat__caption-main{color:#000}

/* --- 主要赞助活动 --- */
.card--media{display:flex;align-items:center;gap:var(--sp-8);min-height:339px}
.card--media .card__body{flex:1 1 auto;min-width:0;gap:var(--sp-16);max-width:640px}
.card__media{
  flex:0 0 auto;width:307px;height:243px;
  border-radius:var(--radius-media);object-fit:cover;
}

/* --- 合作优势 --- */
.card--adv{display:flex;align-items:center}
.card--adv .card__body{gap:var(--sp-16);width:100%}
.card--adv .card__title{margin-bottom:4px}

/* ============================================================
   BANNER
   ============================================================ */
.banner{
  position:relative;
  height:411px;border-radius:var(--radius-media);
  overflow:hidden;margin-bottom:var(--sp-32);
}
.banner__bg{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;object-position:center;
}
.banner__logo{
  position:absolute;left:3%;top:11.68%;
  width:19.88%;height:auto;
}

/* ============================================================
   FAQ
   ============================================================ */
.card--faq{padding:0;overflow:hidden}
.faq__heading{margin:0;font-size:inherit;font-weight:inherit;line-height:inherit}
.faq__head{
  width:100%;
  display:flex;align-items:flex-start;gap:var(--sp-16);
  padding:40px 44px;
  text-align:left;
}
.faq__head .card__title{flex:1 1 auto;min-width:0}
.faq__chevron{
  flex:0 0 auto;width:24px;height:24px;margin-top:14px;
  border-right:2px solid var(--text-secondary);
  border-bottom:2px solid var(--text-secondary);
  transform:rotate(45deg);
  transition:transform .3s ease;
  transform-origin:center;
}
.card--faq.is-open .faq__chevron{transform:rotate(-135deg)}
.faq__panel{
  display:grid;grid-template-rows:0fr;
  transition:grid-template-rows .35s ease;
}
.card--faq.is-open .faq__panel{grid-template-rows:1fr}
.faq__panel-inner{overflow:hidden}
.faq__panel .card__text{padding-inline:44px}
.faq__panel .card__text:last-child{padding-bottom:40px}

/* ============================================================
   FOOTER
   ============================================================ */
.footer{
  background:var(--surface-secondary);
  border:1px solid var(--border-secondary);
  border-bottom:0;
  border-radius:42px 42px 0 0;
  overflow:hidden;
  margin-top:var(--block-spacing);
}
.footer__top{
  background:var(--surface-main);
  padding:40px var(--safe-zone) 20px;
  display:flex;justify-content:center;
}
.footer__card{
  width:100%;max-width:var(--container);
  background:var(--surface-secondary);
  border-radius:var(--radius-card);
  padding:24px 24px 24px 40px;
  display:flex;align-items:center;gap:27px;
}
.footer__contacts{
  flex:1 1 auto;min-width:0;
  font-style:normal;
  display:flex;flex-direction:column;gap:var(--sp-8);
  font-size:16px;line-height:20px;letter-spacing:-.16px;
  color:var(--text-secondary);
}
.footer__group{display:flex;flex-direction:column;gap:var(--sp-8)}
.footer__strong{color:var(--text-main);line-height:22px}
.footer__mail{color:var(--primary);text-decoration:underline;text-underline-position:from-font}
.footer__mail:hover{color:var(--primary-dark)}

.qr{display:flex;flex-direction:column;align-items:center;gap:4px;flex:0 0 auto;width:169px}
.qr img{
  width:169px;height:169px;
  padding:8px;background:#fff;border-radius:8px;
  object-fit:contain;
}
.qr figcaption{
  width:100%;text-align:center;
  font-size:16px;line-height:20px;letter-spacing:-.16px;color:var(--text-secondary);
}

.footer__bottom{
  background:var(--surface-secondary);
  padding:24px var(--safe-zone);
  display:flex;justify-content:center;
}
.footer__bottom p{
  width:100%;max-width:1182px;
  font-size:14px;line-height:20px;letter-spacing:-.14px;
  color:var(--text-secondary);
}

/* ============================================================
   Back-to-top
   ============================================================ */
.to-top{
  position:fixed;right:28px;bottom:28px;z-index:40;
  width:52px;height:52px;border-radius:16px;
  display:flex;align-items:center;justify-content:center;
  background:var(--primary);color:#fff;
  box-shadow:0 10px 26px rgba(0,98,210,.32);
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .25s ease,transform .25s ease,visibility .25s ease,background-color .2s ease;
}
.to-top.is-visible{opacity:1;visibility:visible;transform:none}
.to-top:hover{background:var(--primary-dark)}

/* ============================================================
   Scroll reveal
   ============================================================ */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .6s ease,transform .6s ease}
.reveal.is-in{opacity:1;transform:none}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1439px){
  :root{--safe-zone:48px}
}

@media (max-width:1200px){
  :root{
    --h1:48px;--h2:28px;--h2-lg:30px;--h3:26px;--body:20px;--body-lg:22px;
    --safe-zone:32px;
  }
  .header__inner{gap:20px}
  .nav{gap:6px}
  .nav__link,.util-link,.btn{font-size:20px}
  .card--product,.card--stat,.card--media,.card--adv{padding:36px}
  .faq__head{padding:32px 36px}
  .faq__panel .card__text{padding-inline:36px}
  .faq__panel .card__text:last-child{padding-bottom:32px}
  .stat__value{font-size:60px}
  .stat__value img{width:60px;height:60px}
  .card__text,.card__text--lg,.card__text--adv{line-height:34px}
}

@media (max-width:1024px){
  :root{--header-h:76px}
  /* backdrop-filter would make .header the containing block for the
     fixed drawer/backdrop inside it, trapping them in the header box */
  .header.is-stuck{
    backdrop-filter:none;-webkit-backdrop-filter:none;
    background:rgba(246,246,246,.97);
  }
  .header__inner{padding-block:12px;gap:16px}
  .header__utility{display:none}
  .header__cta{display:none}
  .burger{display:flex}

  .nav{
    position:fixed;z-index:70;
    top:0;right:0;bottom:0;width:min(360px,88vw);
    flex-direction:column;align-items:stretch;justify-content:flex-start;
    gap:4px;margin:0;padding:16px 20px calc(24px + env(safe-area-inset-bottom));
    background:var(--surface-main);
    border-radius:28px 0 0 28px;
    box-shadow:-24px 0 60px rgba(13,13,14,.18);
    transform:translateX(105%);
    visibility:hidden;
    transition:transform .45s cubic-bezier(.32,.72,.24,1), visibility .45s;
    overflow-y:auto;
    overscroll-behavior:contain;
  }
  .nav.is-open{transform:none;visibility:visible}

  .nav__head{
    display:flex;align-items:center;justify-content:space-between;
    padding:8px 4px 20px;margin-bottom:8px;
    border-bottom:1px solid var(--border-secondary);
  }
  .nav__head img{width:120px;height:auto}
  .nav__close{
    width:44px;height:44px;border-radius:14px;
    display:flex;align-items:center;justify-content:center;
    color:var(--text-main);background:var(--surface-secondary);
    transition:background-color .2s ease,color .2s ease;
  }
  .nav__close:hover{background:rgba(0,98,210,.1);color:var(--primary)}

  .nav__link{
    height:auto;padding:16px;font-size:20px;line-height:1.3;
    border-radius:14px;
    transition:color .2s ease,background-color .2s ease;
  }
  .nav__link::after{display:none}
  .nav__link:hover{background:var(--surface-secondary)}
  .nav__link.is-active{
    color:var(--primary);font-weight:700;
    background:rgba(0,98,210,.08);
  }

  .nav__footer{
    display:flex;flex-direction:column;gap:14px;
    margin-top:auto;padding-top:24px;
  }
  .nav__cta{width:100%;font-size:20px;height:52px}
  .nav__site{
    text-align:center;font-size:16px;color:var(--text-secondary);
    transition:color .2s ease;
  }
  .nav__site:hover{color:var(--primary)}

  body.is-locked{overflow:hidden}

  .hero__card{
    min-height:0;padding:32px;
    flex-direction:column;align-items:stretch;
  }
  .hero__image{
    order:2;
    position:relative;left:auto;top:auto;
    width:100%;height:auto;aspect-ratio:2/1;
    margin-top:24px;border-radius:20px;
    object-fit:cover;
  }
  .hero__content{order:1;min-height:0;max-width:none}

  .card--media{flex-direction:column;align-items:flex-start;min-height:0}
  .card--media .card__body{max-width:none}
  .card__media{width:100%;height:auto;aspect-ratio:307/243}

  .banner{height:auto;aspect-ratio:1200/411}

  .footer__card{flex-wrap:wrap;padding:24px}
  .footer__contacts{flex:1 1 100%}
}

@media (max-width:768px){
  :root{
    --h1:36px;--h2:24px;--h2-lg:26px;--h3:22px;--body:17px;--body-lg:18px;
    --safe-zone:20px;--radius-card:24px;--radius-hero:24px;--block-spacing:28px;
  }
  .grid--2{grid-template-columns:minmax(0,1fr)}
  .card--product,.card--stat,.card--media,.card--adv{padding:24px}
  .card--product{min-height:0}
  .faq__head{padding:24px;gap:12px}
  .faq__panel .card__text{padding-inline:24px}
  .faq__panel .card__text:last-child{padding-bottom:24px}
  .faq__chevron{width:16px;height:16px;margin-top:8px}
  .card__text,.card__text--lg,.card__text--adv{line-height:30px}
  .hero__title{font-size:24px;line-height:34px}
  .hero__lines p,.hero__note{font-size:16px;line-height:26px}
  .stat__value{font-size:44px;gap:8px}
  .stat__value img{width:44px;height:44px}
  .stat__caption{font-size:16px;line-height:28px}
  .card__icon{height:40px}
  .footer{border-radius:24px 24px 0 0}
  .footer__top{padding:24px var(--safe-zone) 16px}
  .footer__card{gap:16px;justify-content:center;padding:20px}
  .qr{width:132px}
  .qr img{width:132px;height:132px;padding:6px}
  .to-top{right:16px;bottom:16px;width:46px;height:46px}
}