/* ===== Design tokens ===== */
:root{
  --wheat-50:#fdf8ed;  --wheat-100:#f8edcf; --wheat-300:#e9c766;
  --wheat-400:#e0b13e; --wheat-500:#d29a1e; --wheat-600:#b07c12;
  --ink-900:#1a1710; --ink-800:#2a251b; --ink-700:#3d372a;
  --ink-500:#6c6450; --ink-300:#9a917a;
  --paper:#fffdf8; --paper-2:#faf5e9; --line:#ece3cf;
  --green:#3f7d4e; --sky:#2f6fb0;
  --radius:18px; --radius-sm:12px;
  --shadow-sm:0 2px 8px rgba(60,45,10,.06);
  --shadow:0 18px 50px -18px rgba(80,60,15,.28);
  --shadow-lg:0 30px 80px -24px rgba(80,60,15,.40);
  --font:"PingFang SC","Microsoft YaHei",-apple-system,"Segoe UI",system-ui,sans-serif;
  --maxw:1180px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--font); color:var(--ink-800);
  background:
    radial-gradient(1200px 600px at 85% -5%, var(--wheat-50), transparent 60%),
    radial-gradient(900px 500px at 0% 8%, #f3f8f1, transparent 55%),
    var(--paper);
  line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img,svg{display:block}
section{scroll-margin-top:84px}

/* ===== Buttons ===== */
.btn{
  display:inline-flex; align-items:center; gap:.5em; justify-content:center;
  padding:.78em 1.5em; border-radius:999px; font-weight:600; font-size:.95rem;
  border:1px solid transparent; cursor:pointer; transition:.22s ease;
  white-space:nowrap;
}
.btn--lg{padding:1em 2.2em; font-size:1.05rem}
.btn--primary{
  background:linear-gradient(135deg,var(--wheat-400),var(--wheat-600));
  color:#fff; box-shadow:0 10px 24px -8px rgba(176,124,18,.55);
}
.btn--primary:hover{transform:translateY(-2px); box-shadow:0 16px 32px -10px rgba(176,124,18,.65)}
.btn--ghost{background:#fff; color:var(--ink-800); border-color:var(--line)}
.btn--ghost:hover{border-color:var(--wheat-400); color:var(--wheat-600); transform:translateY(-2px)}
.btn--ghost-light{background:rgba(255,255,255,.12); color:#fff; border-color:rgba(255,255,255,.35)}
.btn--ghost-light:hover{background:rgba(255,255,255,.2)}

.eyebrow{
  display:inline-block; font-size:.78rem; font-weight:700; letter-spacing:.18em;
  color:var(--wheat-600); margin-bottom:.7rem;
}
.eyebrow--light{color:var(--wheat-300)}

/* ===== Navbar ===== */
.nav{
  position:sticky; top:0; z-index:50;
  backdrop-filter:saturate(180%) blur(14px);
  background:rgba(255,253,248,.78); border-bottom:1px solid transparent;
  transition:.25s ease;
}
.nav.is-scrolled{border-bottom-color:var(--line); box-shadow:var(--shadow-sm)}
.nav__inner{
  max-width:var(--maxw); margin:0 auto; padding:.7rem 1.4rem;
  display:flex; align-items:center; gap:1.2rem;
}
.brand{display:flex; align-items:center; gap:.6rem}
.brand__mark{color:var(--wheat-500); display:flex}
.brand__name{font-weight:800; font-size:1.25rem; letter-spacing:.02em; color:var(--ink-900); display:flex; align-items:baseline; gap:.4em}
.brand__name i{font-style:normal; font-size:.62rem; letter-spacing:.25em; color:var(--ink-300); font-weight:700}
.nav__links{display:flex; gap:1.6rem; margin-left:auto; font-weight:500; font-size:.95rem}
.nav__links a{color:var(--ink-700); position:relative; padding:.3em 0}
.nav__links a:hover{color:var(--wheat-600)}
.nav__links a::after{content:""; position:absolute; left:0; bottom:-2px; width:0; height:2px; background:var(--wheat-400); transition:.25s}
.nav__links a:hover::after{width:100%}
.nav__cta{margin-left:.4rem}
.nav__burger{display:none; flex-direction:column; gap:5px; background:none; border:0; cursor:pointer; padding:6px}
.nav__burger span{width:24px; height:2px; background:var(--ink-800); border-radius:2px; transition:.25s}
.nav__burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav__burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav__burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ===== Hero ===== */
.hero{position:relative; overflow:hidden; padding:clamp(3.5rem,8vw,7rem) 1.4rem clamp(3rem,6vw,5rem)}
.hero__glow{
  position:absolute; inset:-20% -10% auto; height:70%;
  background:radial-gradient(60% 100% at 50% 0%, rgba(224,177,62,.30), transparent 70%),
             radial-gradient(40% 80% at 80% 10%, rgba(63,125,78,.16), transparent 70%);
  filter:blur(10px); z-index:0;
}
.hero__grid{
  position:absolute; inset:0; z-index:0; opacity:.5;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:44px 44px;
  mask-image:radial-gradient(circle at 50% 30%, #000 0%, transparent 65%);
  -webkit-mask-image:radial-gradient(circle at 50% 30%, #000 0%, transparent 65%);
}
.hero__inner{position:relative; z-index:1; max-width:880px; margin:0 auto; text-align:center}
.hero__pill{
  display:inline-block; background:#fff; border:1px solid var(--line);
  padding:.5em 1.1em; border-radius:999px; font-size:.85rem; font-weight:600;
  color:var(--ink-700); box-shadow:var(--shadow-sm); margin-bottom:1.6rem;
}
.hero__title{font-size:clamp(2.3rem,6vw,4rem); line-height:1.12; font-weight:800; letter-spacing:-.01em; color:var(--ink-900)}
.grad{background:linear-gradient(120deg,var(--wheat-500),var(--wheat-600) 40%,var(--green)); -webkit-background-clip:text; background-clip:text; color:transparent}
.hero__sub{max-width:620px; margin:1.4rem auto 0; font-size:clamp(1rem,2vw,1.18rem); color:var(--ink-500)}
.hero__actions{display:flex; gap:.9rem; justify-content:center; flex-wrap:wrap; margin-top:2.1rem}
.hero__stats{display:flex; gap:clamp(1.2rem,5vw,3.5rem); justify-content:center; margin-top:3rem; flex-wrap:wrap}
.hero__stats dt{font-size:1.6rem; font-weight:800; color:var(--ink-900)}
.hero__stats dd{font-size:.85rem; color:var(--ink-500); margin-top:.2rem}

/* ===== Section scaffold ===== */
.section{max-width:var(--maxw); margin:0 auto; padding:clamp(3.5rem,7vw,6rem) 1.4rem}
.section--tight{padding-top:0}
.section__head{text-align:center; max-width:640px; margin:0 auto clamp(2.2rem,4vw,3.2rem)}
.section__head h2{font-size:clamp(1.8rem,4vw,2.6rem); font-weight:800; color:var(--ink-900); letter-spacing:-.01em}
.section__head p{color:var(--ink-500); margin-top:.7rem; font-size:1.05rem}

/* ===== Filters ===== */
.filters{display:flex; gap:.6rem; justify-content:center; flex-wrap:wrap; margin-bottom:2.4rem}
.chip{
  padding:.5em 1.15em; border-radius:999px; border:1px solid var(--line);
  background:#fff; color:var(--ink-700); font-weight:600; font-size:.9rem; cursor:pointer;
  transition:.2s;
}
.chip:hover{border-color:var(--wheat-400); color:var(--wheat-600)}
.chip.is-active{background:var(--ink-900); color:#fff; border-color:var(--ink-900)}

/* ===== Cards ===== */
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem}
.cards--two{grid-template-columns:repeat(2,1fr)}
.cards--soon{grid-template-columns:repeat(2,1fr); max-width:760px; margin:0 auto}
.card{
  position:relative; background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:1.8rem 1.7rem 1.6rem; display:flex; flex-direction:column;
  box-shadow:var(--shadow-sm); transition:transform .3s cubic-bezier(.22,.61,.36,1), box-shadow .3s, border-color .3s;
  overflow:hidden; isolation:isolate;
}
.card::before{
  content:""; position:absolute; inset:0 0 auto; height:4px;
  background:linear-gradient(90deg,var(--accent,var(--wheat-400)),transparent); opacity:0; transition:.3s;
}
/* accent glow that blooms from the icon on hover */
.card::after{
  content:""; position:absolute; z-index:-1; top:-40%; left:-10%; width:160px; height:160px; border-radius:50%;
  background:var(--accent,var(--wheat-400)); filter:blur(60px); opacity:0; transition:.4s;
}
.card:hover{transform:translateY(-7px); box-shadow:var(--shadow-lg); border-color:color-mix(in srgb,var(--accent) 35%,var(--line))}
.card:hover::before{opacity:1}
.card:hover::after{opacity:.18}
.card__icon{
  width:56px; height:56px; border-radius:15px; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(140deg,var(--accent-soft,#f5ecd4),#fff); color:var(--accent,var(--wheat-600));
  margin-bottom:1.1rem; box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 18%,transparent);
  transition:.3s;
}
.card:hover .card__icon{
  background:linear-gradient(140deg,var(--accent,var(--wheat-500)),color-mix(in srgb,var(--accent) 70%,#000));
  color:#fff; transform:scale(1.06) rotate(-3deg);
}
.card__icon svg{width:28px; height:28px}
.card__tag{
  position:absolute; top:1.4rem; right:1.4rem; font-size:.7rem; font-weight:700;
  letter-spacing:.06em; color:var(--accent,var(--wheat-600));
  background:var(--accent-soft,#f5ecd4); padding:.28em .7em; border-radius:999px;
}
.card__name{font-size:1.22rem; font-weight:800; color:var(--ink-900)}
.card__name span{font-size:.78rem; font-weight:600; color:var(--ink-300); margin-left:.5em; letter-spacing:.03em}
.card__desc{color:var(--ink-500); font-size:.94rem; margin:.55rem 0 1rem; flex:1}
.card__feats{display:flex; flex-wrap:wrap; gap:.4rem; margin-bottom:1.2rem}
.card__feats li{
  list-style:none; font-size:.76rem; color:var(--ink-700);
  background:var(--paper-2); border:1px solid var(--line); padding:.28em .65em; border-radius:8px;
  transition:.25s;
}
.card:hover .card__feats li{
  border-color:color-mix(in srgb,var(--accent) 30%,var(--line));
  color:color-mix(in srgb,var(--accent) 65%,var(--ink-700));
  background:color-mix(in srgb,var(--accent-soft) 60%,#fff);
}
.card__name{transition:color .25s}
.card:hover .card__name{color:var(--accent,var(--ink-900))}
.card__link{
  display:inline-flex; align-items:center; gap:.4em; font-weight:700; font-size:.92rem;
  color:var(--accent,var(--wheat-600)); margin-top:auto;
}
.card__link .arr{transition:.25s}
.card:hover .card__link .arr{transform:translateX(4px)}
.card--soon{background:var(--paper-2); border-style:dashed; align-items:flex-start}
.card--soon .card__icon{background:#fff}
.card--soon:hover{transform:none; box-shadow:var(--shadow-sm)}

/* ===== AI band ===== */
.band{background:linear-gradient(160deg,var(--ink-900),#241f15 60%,#332a16); color:#fff; overflow:hidden}
.band__inner{
  max-width:var(--maxw); margin:0 auto; padding:clamp(3.5rem,7vw,6rem) 1.4rem;
  display:grid; grid-template-columns:1.1fr .9fr; gap:3rem; align-items:center;
}
.band__text h2{font-size:clamp(1.9rem,4vw,2.7rem); font-weight:800; letter-spacing:-.01em}
.band__text p{color:rgba(255,255,255,.72); margin:1.1rem 0 1.8rem; font-size:1.05rem}
.band__text b{color:var(--wheat-300)}
.band__btns{display:flex; gap:.8rem; flex-wrap:wrap}
.band__art{position:relative; min-height:240px; display:flex; align-items:center; justify-content:center}
.orb{
  position:absolute; width:260px; height:260px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, var(--wheat-300), var(--wheat-600) 55%, transparent 72%);
  filter:blur(2px); opacity:.9; animation:float 7s ease-in-out infinite;
}
.chatcard{
  position:relative; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(8px); border-radius:16px; padding:1.3rem 1.4rem; max-width:340px;
  box-shadow:var(--shadow-lg);
}
.chatcard__q{font-weight:600; margin-bottom:.9rem}
.chatcard__a{font-size:.86rem; color:var(--wheat-300); display:flex; align-items:center; gap:.5em}
.dot{width:8px; height:8px; border-radius:50%; background:var(--green); box-shadow:0 0 0 0 rgba(63,125,78,.6); animation:pulse 1.6s infinite}

/* ===== Coming soon section ===== */
.soon{background:var(--paper-2); max-width:none; margin:0}
.soon .section__head, .soon .cards{max-width:760px; margin-left:auto; margin-right:auto}

/* ===== CTA ===== */
.cta{padding:clamp(3.5rem,7vw,6rem) 1.4rem}
.cta__inner{
  max-width:760px; margin:0 auto; text-align:center;
  background:radial-gradient(120% 140% at 50% 0%, #fff, var(--wheat-50));
  border:1px solid var(--line); border-radius:28px; padding:clamp(2.5rem,5vw,4rem);
  box-shadow:var(--shadow);
}
.cta__inner h2{font-size:clamp(1.8rem,4vw,2.5rem); font-weight:800; color:var(--ink-900)}
.cta__inner p{color:var(--ink-500); margin:1.1rem auto 2rem; max-width:560px; font-size:1.06rem}
.cta__inner strong{color:var(--wheat-600)}

/* ===== Footer ===== */
.foot{background:var(--ink-900); color:rgba(255,255,255,.7)}
.foot__inner{
  max-width:var(--maxw); margin:0 auto; padding:3.2rem 1.4rem 2rem;
  display:grid; grid-template-columns:1.2fr 2fr; gap:2.5rem;
}
.brand__name--foot{color:#fff}
.brand__name--foot i{color:rgba(255,255,255,.4)}
.foot__brand p{margin-top:.7rem; font-size:.9rem; color:rgba(255,255,255,.55)}
.foot__cols{display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem}
.foot__cols h4{color:#fff; font-size:.95rem; margin-bottom:.9rem}
.foot__cols a{display:block; font-size:.9rem; padding:.28em 0; color:rgba(255,255,255,.62); transition:.2s}
.foot__cols a:hover{color:var(--wheat-300)}
.foot__bar{
  border-top:1px solid rgba(255,255,255,.1); max-width:var(--maxw); margin:0 auto;
  padding:1.2rem 1.4rem; display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  font-size:.82rem; color:rgba(255,255,255,.45);
}

/* ===== Animations ===== */
@keyframes float{0%,100%{transform:translateY(-12px)}50%{transform:translateY(12px)}}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(63,125,78,.6)}70%{box-shadow:0 0 0 10px rgba(63,125,78,0)}100%{box-shadow:0 0 0 0 rgba(63,125,78,0)}}
.reveal{opacity:0; transform:translateY(22px); transition:.6s cubic-bezier(.22,.61,.36,1)}
.reveal.in{opacity:1; transform:none}

/* ===== Responsive ===== */
@media(max-width:900px){
  .cards{grid-template-columns:repeat(2,1fr)}
  .band__inner{grid-template-columns:1fr; gap:2rem}
  .band__art{min-height:200px}
  .foot__inner{grid-template-columns:1fr; gap:1.8rem}
}
@media(max-width:680px){
  .nav__links,.nav__cta{display:none}
  .nav__burger{display:flex}
  .nav.is-open .nav__links{
    display:flex; position:absolute; top:100%; left:0; right:0; flex-direction:column;
    background:var(--paper); padding:1rem 1.4rem 1.4rem; gap:.2rem; border-bottom:1px solid var(--line);
    box-shadow:var(--shadow);
  }
  .nav.is-open .nav__links a{padding:.7em 0; border-bottom:1px solid var(--line)}
  .cards,.cards--two,.cards--soon{grid-template-columns:1fr}
  .foot__cols{grid-template-columns:repeat(2,1fr)}
  .foot__bar{flex-direction:column; gap:.4rem}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important; scroll-behavior:auto}
  .reveal{opacity:1; transform:none}
}