/* ============================================================
   Qynte — TestPlus marketing site
   Original design system · light theme · violet + orange
   ============================================================ */

:root{
  --ink:#15122B;
  --ink-soft:#2A2545;
  --body:#5D5A75;
  --muted:#8C89A3;
  --violet:#7C5CFC;
  --violet-dark:#5B3DF5;
  --violet-deep:#3B2A8F;
  --violet-50:#F3EFFF;
  --violet-100:#E8E1FF;
  --orange:#FF6B2C;
  --orange-dark:#E5531A;
  --orange-50:#FFEFE6;
  --teal:#1FBF9C;
  --teal-50:#E2F8F2;
  --lime:#E4F86B;
  --pink:#F25CA2;
  --bg:#FFFFFF;
  --bg-soft:#F8F7FC;
  --bg-lav:#F4F1FE;
  --line:#ECEAF5;
  --line-dash:#DCD8EC;
  --card-shadow:0 2px 6px rgba(21,18,43,.04),0 18px 44px -18px rgba(60,42,143,.14);
  --card-shadow-lg:0 4px 10px rgba(21,18,43,.05),0 30px 70px -24px rgba(60,42,143,.22);
  --r-sm:10px; --r-md:16px; --r-lg:22px; --r-xl:28px;
  --font-head:'Plus Jakarta Sans',system-ui,sans-serif;
  --font-body:'Inter',system-ui,sans-serif;
  --container:1200px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; font-family:var(--font-body); color:var(--body);
  background:var(--bg); font-size:16.5px; line-height:1.7;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img,svg{max-width:100%; display:block}
a{color:var(--violet-dark); text-decoration:none}
h1,h2,h3,h4,h5{font-family:var(--font-head); color:var(--ink); line-height:1.18; margin:0 0 .5em; font-weight:700; letter-spacing:-.02em}
h1{font-size:clamp(2.4rem,5.4vw,4.1rem); font-weight:800}
h2{font-size:clamp(1.9rem,3.6vw,2.7rem); font-weight:800}
h3{font-size:1.32rem}
h4{font-size:1.05rem}
p{margin:0 0 1em}
.container{max-width:var(--container); margin:0 auto; padding:0 24px}
.section{padding:96px 0; position:relative}
.section-soft{background:var(--bg-soft)}
.section-lav{background:var(--bg-lav)}
.center{text-align:center}
.lead{font-size:1.12rem; max-width:680px}
.center .lead{margin-left:auto; margin-right:auto}
.mt-0{margin-top:0}.mb-0{margin-bottom:0}

/* ---------- highlight marks ---------- */
.hl-orange{display:inline-block; background:var(--orange); color:#fff; padding:.02em .18em; border-radius:.16em; transform:rotate(-1.2deg)}
.hl-violet{display:inline-block; background:var(--violet-100); color:var(--violet-dark); padding:.02em .18em; border-radius:.16em; box-shadow:inset 0 0 0 1.5px rgba(124,92,252,.25)}
.hl-under{background:linear-gradient(transparent 68%, var(--lime) 68%); padding:0 .08em}
.grad-text{background:linear-gradient(95deg,var(--violet) 10%,var(--orange) 90%); -webkit-background-clip:text; background-clip:text; color:transparent}

/* ---------- badges & chips ---------- */
.badge{display:inline-flex; align-items:center; gap:8px; background:var(--violet-50); color:var(--violet-dark);
  border:1px solid var(--violet-100); font-weight:600; font-size:.82rem; letter-spacing:.04em;
  padding:7px 16px; border-radius:999px; margin-bottom:18px; text-transform:uppercase}
.badge .dot{width:7px;height:7px;border-radius:50%;background:var(--orange); animation:pulse 2s infinite}
.badge.orange{background:var(--orange-50); color:var(--orange-dark); border-color:#FFD9C2}
.badge.teal{background:var(--teal-50); color:#0E8A70; border-color:#BDEDE0}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}

/* ---------- buttons ---------- */
.btn{display:inline-flex; align-items:center; gap:10px; font-family:var(--font-head); font-weight:700;
  font-size:1rem; padding:15px 30px; border-radius:14px; border:0; cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease; white-space:nowrap}
.btn-primary{background:var(--violet); color:#fff; box-shadow:0 12px 28px -10px rgba(124,92,252,.55)}
.btn-primary:hover{background:var(--violet-dark); transform:translateY(-2px); box-shadow:0 18px 34px -10px rgba(124,92,252,.6)}
.btn-dark{background:var(--ink); color:#fff; border-radius:999px}
.btn-dark:hover{transform:translateY(-2px); box-shadow:0 16px 30px -12px rgba(21,18,43,.5)}
.btn-dark .btn-ico{background:#fff; color:var(--ink); width:34px; height:34px; border-radius:50%; display:grid; place-items:center; margin:-6px -16px -6px 4px}
.btn-ghost{background:transparent; color:var(--ink); border:1.5px solid var(--line-dash)}
.btn-ghost:hover{border-color:var(--violet); color:var(--violet-dark); transform:translateY(-2px)}
.btn-orange{background:var(--orange); color:#fff; box-shadow:0 12px 28px -10px rgba(255,107,44,.5)}
.btn-orange:hover{background:var(--orange-dark); transform:translateY(-2px)}
.btn-lg{padding:18px 36px; font-size:1.06rem}
.link-arrow{font-weight:700; font-family:var(--font-head); color:var(--violet-dark); display:inline-flex; align-items:center; gap:7px}
.link-arrow svg{transition:transform .18s}
.link-arrow:hover svg{transform:translateX(4px)}

/* ---------- header ---------- */
.site-header{position:sticky; top:0; z-index:200; background:rgba(255,255,255,.86); backdrop-filter:blur(14px);
  border-bottom:1px solid transparent; transition:border-color .25s, box-shadow .25s}
.site-header.scrolled{border-bottom-color:var(--line); box-shadow:0 6px 24px -16px rgba(21,18,43,.18)}
.nav-wrap{display:flex; align-items:center; gap:32px; height:66px}
.logo{display:flex; align-items:center; gap:10px; font-family:var(--font-head); font-weight:800; font-size:1.45rem; color:#2B4570; letter-spacing:-.02em; line-height:1}
.logo-img{height:34px; width:auto; display:block}
.site-footer .logo-img{height:46px}
.main-nav{display:flex; align-items:center; gap:6px; margin:0 auto; padding:0; list-style:none}
.main-nav>li{list-style:none; position:relative}
.main-nav a.nav-link{display:flex; align-items:center; gap:6px; padding:10px 15px; border-radius:10px; color:var(--ink-soft); font-weight:600; font-size:.97rem; font-family:var(--font-head)}
.main-nav a.nav-link:hover, .main-nav a.nav-link.active{color:var(--violet-dark); background:var(--violet-50)}
.dropdown{position:relative}
.dropdown-menu{position:absolute; top:calc(100% + 10px); left:0; min-width:300px; background:#fff; border:1px solid var(--line);
  border-radius:var(--r-md); box-shadow:var(--card-shadow-lg); padding:10px; opacity:0; visibility:hidden; transform:translateY(8px);
  transition:.22s ease; list-style:none; margin:0}
.dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu{opacity:1; visibility:visible; transform:translateY(0)}
.dropdown-menu a{display:flex; gap:12px; align-items:flex-start; padding:11px 12px; border-radius:10px; color:var(--ink)}
.dropdown-menu a:hover{background:var(--violet-50)}
.dropdown-menu .dd-ico{flex:0 0 36px; width:36px; height:36px; border-radius:10px; display:grid; place-items:center; background:var(--violet-50); color:var(--violet-dark)}
.dropdown-menu .dd-ico.o{background:var(--orange-50); color:var(--orange-dark)}
.dropdown-menu .dd-ico.t{background:var(--teal-50); color:var(--teal)}
.dropdown-menu .dd-ico.p{background:#FDE9F3; color:var(--pink)}
.dropdown-menu b{display:block; font-family:var(--font-head); font-size:.95rem; color:var(--ink)}
.dropdown-menu small{font-size:.8rem; color:var(--muted); line-height:1.4; display:block}
.nav-cta{margin-left:0; white-space:nowrap; padding:11px 22px; font-size:.95rem; border-radius:12px}
.nav-toggle{display:none; margin-left:auto; background:none; border:0; cursor:pointer; padding:8px}
.nav-toggle span{display:block; width:24px; height:2.5px; background:var(--ink); margin:5px 0; border-radius:2px; transition:.25s}

/* ---------- hero ---------- */
.hero{position:relative; padding:30px 0 26px; overflow:hidden}
.hero-grid-lines{position:absolute; inset:0; pointer-events:none;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:120px 120px; mask-image:radial-gradient(ellipse 75% 65% at 50% 32%,#000 30%,transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse 75% 65% at 50% 32%,#000 30%,transparent 75%); opacity:.55}
.hero .container, .page-hero .container{position:relative; z-index:1}
.hero .hero-stage, .page-hero .beam-stage{z-index:1}
.hero h1{margin-bottom:24px}
.hero .lead{font-size:1.18rem}
.hero-actions{display:flex; gap:16px; justify-content:center; align-items:center; margin-top:34px; flex-wrap:wrap}
.hero-note{font-size:.88rem; color:var(--muted); margin-top:16px}
.dot-grid{background-image:radial-gradient(var(--line-dash) 1.4px,transparent 1.4px); background-size:22px 22px}

/* ---------- beam canvas (animated lines) ---------- */
.beam-stage{position:relative}
.beam-svg{width:100%; height:auto; display:block}
.beam-base{fill:none; stroke:var(--line-dash); stroke-width:2; stroke-dasharray:3 7; stroke-linecap:round}
.beam-flow{fill:none; stroke-width:2.5; stroke-linecap:round; opacity:0}
.beam-flow.on{opacity:1}
.node-chip{display:inline-flex; align-items:center; gap:9px; background:#fff; border:1px solid var(--line);
  border-radius:999px; padding:9px 18px 9px 10px; font-family:var(--font-head); font-weight:700; font-size:.92rem; color:var(--ink);
  box-shadow:var(--card-shadow)}
.node-chip .ni{width:30px; height:30px; border-radius:50%; display:grid; place-items:center; font-size:.8rem; color:#fff; font-weight:800}
.float-soft{animation:floaty 5.5s ease-in-out infinite}
.float-soft.d2{animation-delay:-1.8s}
.float-soft.d3{animation-delay:-3.4s}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}

/* ---------- workflow node cards (trigger/condition/action) ---------- */
.wf-card{background:#fff; border:1px solid var(--line); border-radius:var(--r-md); box-shadow:var(--card-shadow); overflow:hidden; font-size:.88rem}
.wf-head{display:flex; align-items:center; gap:10px; padding:12px 14px; border-bottom:1px solid var(--line); font-family:var(--font-head); font-weight:700; color:var(--ink)}
.wf-head .wf-ico{width:30px; height:30px; border-radius:9px; display:grid; place-items:center; color:#fff}
.wf-head .wf-dots{margin-left:auto; color:var(--muted); letter-spacing:2px; font-weight:800}
.wf-body{padding:12px 14px}
.wf-body ul{margin:0; padding-left:18px}
.wf-body li{margin:4px 0; color:var(--body)}
.tag{display:inline-block; padding:2px 10px; border-radius:999px; font-size:.74rem; font-weight:700}
.tag.red{background:#FFE4E4; color:#C92A2A}
.tag.amber{background:#FFF3D6; color:#9A6700}
.tag.teal{background:var(--teal-50); color:#0E8A70}
.tag.violet{background:var(--violet-50); color:var(--violet-dark)}
.tag.blue{background:#E3F0FF; color:#1565C8}

/* ---------- generic cards ---------- */
.cards-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:26px; margin-top:54px}
.feature-card{background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:34px 30px;
  box-shadow:var(--card-shadow); transition:transform .22s ease, box-shadow .22s ease; position:relative; overflow:hidden}
.feature-card:hover{transform:translateY(-6px); box-shadow:var(--card-shadow-lg)}
.feature-card .fc-ico{width:54px; height:54px; border-radius:16px; display:grid; place-items:center; margin-bottom:20px;
  background:var(--violet-50); color:var(--violet-dark)}
.feature-card.alt-o .fc-ico{background:var(--orange-50); color:var(--orange-dark)}
.feature-card.alt-t .fc-ico{background:var(--teal-50); color:var(--teal)}
.feature-card.alt-p .fc-ico{background:#FDE9F3; color:var(--pink)}
.feature-card p{margin-bottom:0; font-size:.97rem}
.feature-card .fc-num{position:absolute; top:18px; right:24px; font-family:var(--font-head); font-weight:800; font-size:2.4rem; color:var(--violet-50); line-height:1}

.tile-card{background:var(--bg-soft); border:1px solid var(--line); border-radius:var(--r-lg); padding:30px; transition:.22s}
.tile-card:hover{background:#fff; box-shadow:var(--card-shadow-lg); transform:translateY(-5px)}

/* ---------- pillars ---------- */
.pillar{border-radius:var(--r-xl); padding:42px 38px; position:relative; overflow:hidden; color:#fff; min-height:340px; display:flex; flex-direction:column}
.pillar h3{color:#fff; font-size:1.7rem}
.pillar p{color:rgba(255,255,255,.85)}
.pillar .pill-tag{align-self:flex-start; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.3); color:#fff; border-radius:999px; padding:5px 14px; font-size:.78rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; margin-bottom:18px}
.pillar .btn{margin-top:auto; align-self:flex-start; background:#fff; box-shadow:none}
.pillar.violet{background:linear-gradient(150deg,#7C5CFC,#4B2ED6)}
.pillar.violet .btn{color:var(--violet-dark)}
.pillar.orange{background:linear-gradient(150deg,#FF8A4C,#E5531A)}
.pillar.orange .btn{color:var(--orange-dark)}
.pillar.ink{background:linear-gradient(150deg,#2C2750,#15122B)}
.pillar.ink .btn{color:var(--ink)}
.pillar .pillar-deco{position:absolute; right:-40px; bottom:-40px; width:200px; height:200px; border-radius:50%; border:36px solid rgba(255,255,255,.09)}

/* ---------- steps / workflow ---------- */
.step-row{display:grid; grid-template-columns:repeat(5,1fr); gap:18px; margin-top:60px; position:relative}
.step-card{background:#fff; border:1px solid var(--line); border-radius:var(--r-md); padding:26px 22px; box-shadow:var(--card-shadow); position:relative; transition:.22s}
.step-card:hover{transform:translateY(-6px); box-shadow:var(--card-shadow-lg); border-color:var(--violet-100)}
.step-num{font-family:var(--font-head); font-weight:800; font-size:.85rem; color:var(--violet-dark); background:var(--violet-50); border-radius:999px; padding:3px 12px; display:inline-block; margin-bottom:14px}
.step-card h4{font-size:1.02rem; margin-bottom:8px}
.step-card p{font-size:.88rem; margin:0}
.step-card .step-ico{width:42px; height:42px; border-radius:12px; background:var(--violet-50); color:var(--violet-dark); display:grid; place-items:center; margin-bottom:14px}
.step-card.hot .step-ico{background:var(--orange-50); color:var(--orange-dark)}
.step-card.hot .step-num{background:var(--orange-50); color:var(--orange-dark)}

/* ---------- split sections ---------- */
.split{display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:center}
.split.rev .split-copy{order:2}
.split-copy h2{margin-bottom:18px}
.check-list{list-style:none; padding:0; margin:24px 0 0}
.check-list li{display:flex; gap:13px; margin-bottom:14px; align-items:flex-start; color:var(--ink-soft); font-weight:500}
.check-list li::before{content:""; flex:0 0 22px; height:22px; margin-top:3px; border-radius:50%;
  background:var(--teal-50) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%230E8A70' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4 10-11'/%3E%3C/svg%3E") center/13px no-repeat}

/* ---------- mockups ---------- */
.browser{background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--card-shadow-lg); overflow:hidden}
.browser-bar{display:flex; align-items:center; gap:7px; padding:13px 18px; border-bottom:1px solid var(--line); background:var(--bg-soft)}
.browser-bar i{width:11px; height:11px; border-radius:50%; display:block}
.browser-bar i:nth-child(1){background:#FF5F57}.browser-bar i:nth-child(2){background:#FEBC2E}.browser-bar i:nth-child(3){background:#28C840}
.browser-bar .url{margin-left:14px; background:#fff; border:1px solid var(--line); border-radius:8px; font-size:.76rem; color:var(--muted); padding:4px 14px; flex:1; max-width:320px}
.browser-body{padding:22px}
.skel{background:var(--bg-soft); border-radius:8px}
.skel.w40{width:40%}.skel.w60{width:60%}.skel.w80{width:80%}
.bar-row{display:flex; gap:8px; align-items:flex-end; height:120px; padding:10px 4px 0}
.bar-row i{flex:1; border-radius:6px 6px 0 0; background:var(--violet-100); animation:grow 1.2s ease both}
.bar-row i.hot{background:var(--violet)}
.bar-row i.org{background:var(--orange)}
@keyframes grow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
.bar-row i{transform-origin:bottom}

/* ---------- stats ---------- */
.stats-band{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:22px; margin-top:56px}
.stat-card{background:#fff; border:1px solid var(--line); border-radius:var(--r-md); padding:30px 26px; text-align:center; box-shadow:var(--card-shadow)}
.stat-card .num{font-family:var(--font-head); font-weight:800; font-size:2.6rem; color:var(--ink); letter-spacing:-.03em}
.stat-card .num em{font-style:normal; color:var(--violet)}
.stat-card .lbl{font-size:.92rem; color:var(--muted); margin-top:4px}

/* ---------- testimonials ---------- */
.testi-card{background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:34px 30px; box-shadow:var(--card-shadow); display:flex; flex-direction:column; gap:18px}
.testi-stars{color:#FFB400; letter-spacing:3px; font-size:1.05rem}
.testi-quote{font-size:1.02rem; color:var(--ink-soft); font-weight:500; flex:1}
.testi-who{display:flex; align-items:center; gap:14px}
.avatar{width:48px; height:48px; border-radius:50%; display:grid; place-items:center; color:#fff; font-weight:800; font-family:var(--font-head)}
.testi-who b{display:block; color:var(--ink); font-family:var(--font-head)}
.testi-who small{color:var(--muted)}

/* ---------- marquee ---------- */
.marquee{overflow:hidden; padding:26px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:#fff}
.marquee-track{display:flex; gap:54px; width:max-content; animation:scrollx 30s linear infinite}
.marquee-track span{font-family:var(--font-head); font-weight:700; font-size:1.05rem; color:var(--muted); display:flex; align-items:center; gap:14px; white-space:nowrap}
.marquee-track span i{color:var(--orange); font-style:normal}
@keyframes scrollx{to{transform:translateX(-50%)}}

/* ---------- accordion ---------- */
.accordion{max-width:840px; margin:48px auto 0}
.acc-item{background:#fff; border:1px solid var(--line); border-radius:var(--r-md); margin-bottom:14px; overflow:hidden; transition:box-shadow .2s}
.acc-item.open{box-shadow:var(--card-shadow-lg); border-color:var(--violet-100)}
.acc-btn{width:100%; background:none; border:0; cursor:pointer; display:flex; align-items:center; gap:16px; text-align:left;
  font-family:var(--font-head); font-weight:700; font-size:1.06rem; color:var(--ink); padding:22px 26px}
.acc-btn .acc-ico{margin-left:auto; flex:0 0 32px; width:32px; height:32px; border-radius:50%; background:var(--violet-50); color:var(--violet-dark);
  display:grid; place-items:center; transition:transform .25s, background .25s, color .25s; font-size:1.2rem; font-weight:600}
.acc-item.open .acc-ico{transform:rotate(45deg); background:var(--violet); color:#fff}
.acc-panel{max-height:0; overflow:hidden; transition:max-height .35s ease}
.acc-panel-in{padding:0 26px 24px; font-size:.98rem}

/* ---------- CTA band ---------- */
.cta-band{background:linear-gradient(135deg,#1D1838 0%,#3B2A8F 55%,#5B3DF5 100%); border-radius:var(--r-xl); padding:74px 60px; position:relative; overflow:hidden; text-align:center; color:#fff}
.cta-band h2{color:#fff}
.cta-band p{color:rgba(255,255,255,.8); max-width:560px; margin:0 auto 30px}
.cta-band .btn-primary{background:#fff; color:var(--violet-dark)}
.cta-band .btn-primary:hover{background:var(--violet-50)}
.cta-band .btn-ghost{border-color:rgba(255,255,255,.4); color:#fff}
.cta-deco{position:absolute; border-radius:50%; border:2px dashed rgba(255,255,255,.18); pointer-events:none}
.cta-deco.a{width:300px; height:300px; left:-90px; top:-90px}
.cta-deco.b{width:380px; height:380px; right:-130px; bottom:-160px}

/* ---------- page hero (inner pages) ---------- */
.page-hero{padding:84px 0 64px; text-align:center; position:relative; overflow:hidden}
.page-hero .lead{margin-left:auto; margin-right:auto}
.crumbs{font-size:.85rem; color:var(--muted); margin-bottom:20px; font-weight:600}
.crumbs a{color:var(--muted)}
.crumbs a:hover{color:var(--violet-dark)}
.crumbs b{color:var(--violet-dark)}

/* ---------- forms ---------- */
.form-card{background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:44px; box-shadow:var(--card-shadow-lg)}
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:20px}
.form-grid .full{grid-column:1/-1}
.field label{display:block; font-family:var(--font-head); font-weight:700; font-size:.9rem; color:var(--ink); margin-bottom:8px}
.field input,.field select,.field textarea{width:100%; border:1.5px solid var(--line-dash); border-radius:12px; padding:13px 16px;
  font-family:var(--font-body); font-size:.98rem; color:var(--ink); background:var(--bg-soft); transition:border-color .2s, box-shadow .2s, background .2s}
.field input:focus,.field select:focus,.field textarea:focus{outline:none; border-color:var(--violet); background:#fff; box-shadow:0 0 0 4px var(--violet-50)}
.field textarea{min-height:130px; resize:vertical}
.field .err{display:none; color:#C92A2A; font-size:.8rem; margin-top:6px}
.field.invalid input,.field.invalid textarea,.field.invalid select{border-color:#E24B4A}
.field.invalid .err{display:block}
.form-ok{display:none; background:var(--teal-50); border:1px solid #BDEDE0; color:#0E8A70; border-radius:12px; padding:16px 20px; font-weight:600; margin-top:20px}
.hp-field{position:absolute; left:-9999px; opacity:0; height:0; overflow:hidden}

/* ---------- info chips ---------- */
.info-row{display:flex; gap:22px; flex-wrap:wrap; margin-top:34px}
.info-chip{display:flex; align-items:center; gap:14px; background:#fff; border:1px solid var(--line); border-radius:var(--r-md); padding:18px 24px; box-shadow:var(--card-shadow)}
.info-chip .ic{width:44px; height:44px; border-radius:12px; background:var(--violet-50); color:var(--violet-dark); display:grid; place-items:center}
.info-chip b{display:block; font-family:var(--font-head); color:var(--ink)}
.info-chip small{color:var(--muted)}

/* ---------- resource cards ---------- */
.res-card{background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--card-shadow); transition:.22s; display:flex; flex-direction:column}
.res-card:hover{transform:translateY(-6px); box-shadow:var(--card-shadow-lg)}
.res-thumb{height:170px; display:grid; place-items:center; color:#fff}
.res-thumb svg{width:64px; height:64px; opacity:.9}
.res-body{padding:26px; display:flex; flex-direction:column; flex:1}
.res-body h3{font-size:1.12rem}
.res-meta{font-size:.8rem; color:var(--muted); font-weight:600; text-transform:uppercase; letter-spacing:.06em; margin-bottom:10px}
.res-body .link-arrow{margin-top:auto; padding-top:14px}

/* ---------- footer ---------- */
.site-footer{background:var(--ink); color:#A9A6C2; margin-top:96px}
.footer-top{display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:50px; padding:72px 0 50px}
.footer-top h5{color:#fff; font-size:.95rem; margin-bottom:18px; letter-spacing:.04em; text-transform:uppercase}
.footer-top ul{list-style:none; padding:0; margin:0}
.footer-top li{margin-bottom:11px}
.footer-top a{color:#A9A6C2; font-size:.95rem}
.footer-top a:hover{color:#fff}
.footer-brand .logo{color:#fff}
.footer-brand p{font-size:.95rem; margin-top:18px; max-width:300px}
.socials{display:flex; gap:12px; margin-top:22px}
.socials a{width:38px; height:38px; border-radius:10px; background:rgba(255,255,255,.07); display:grid; place-items:center; color:#CFCDE4; transition:.2s}
.socials a:hover{background:var(--violet); color:#fff; transform:translateY(-3px)}
.footer-bottom{border-top:1px solid rgba(255,255,255,.09); padding:24px 0; display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap; font-size:.88rem}
.footer-bottom a{color:#A9A6C2}
.footer-bottom a:hover{color:#fff}

/* ---------- reveal on scroll ---------- */
.reveal{opacity:0; transform:translateY(26px); transition:opacity .7s ease, transform .7s ease}
.reveal.in{opacity:1; transform:none}
.reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}.reveal.d3{transition-delay:.24s}.reveal.d4{transition-delay:.32s}

/* ---------- responsive ---------- */
@media (max-width:1024px){
  .split{grid-template-columns:1fr; gap:46px}
  .split.rev .split-copy{order:0}
  .step-row{grid-template-columns:repeat(2,1fr)}
  .footer-top{grid-template-columns:1fr 1fr}
}
@media (max-width:860px){
  .nav-toggle{display:block}
  .main-nav{position:fixed; inset:66px 0 auto 0; background:#fff; flex-direction:column; align-items:stretch; gap:2px;
    padding:18px 22px 26px; border-bottom:1px solid var(--line); box-shadow:0 30px 50px -20px rgba(21,18,43,.25);
    transform:translateY(-130%); transition:transform .3s ease; max-height:calc(100vh - 66px); overflow:auto}
  .main-nav.open{transform:translateY(0)}
  .dropdown-menu{position:static; opacity:1; visibility:visible; transform:none; box-shadow:none; border:0; padding:0 0 0 14px; display:none}
  .dropdown.open .dropdown-menu{display:block}
  .nav-cta{margin-left:auto; order:2; padding:10px 16px; font-size:.9rem}
  .nav-toggle{order:3; margin-left:14px}
  .section{padding:70px 0}
  .form-grid{grid-template-columns:1fr}
  .cta-band{padding:54px 28px}
  .footer-top{grid-template-columns:1fr; gap:36px}
}
@media (max-width:560px){
  .step-row{grid-template-columns:1fr}
  .hero{padding:64px 0 30px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important}
  html{scroll-behavior:auto}
}

/* ---------- articles ---------- */
.article{max-width:780px; margin:0 auto}
.article p{font-size:1.04rem}
.article h2{font-size:1.5rem; margin-top:42px}
.art-meta{color:var(--muted); font-size:.9rem; font-weight:600}
.art-hero img{width:100%; height:auto; border-radius:var(--r-lg); border:1px solid var(--line); background:var(--bg-soft); padding:18px}
.callout{background:var(--violet-50); border:1px solid var(--violet-100); border-left:4px solid var(--violet); border-radius:0 14px 14px 0; padding:20px 24px; margin:30px 0; color:var(--ink-soft); font-weight:500}