:root{
  --bg:#0a0f13;
  --surface:#111820;
  --surface-2:#161f28;
  --glass:rgba(255,255,255,.045);
  --ink:#eef3f2;
  --muted:#8695a0;
  --line:rgba(255,255,255,.1);
  --accent:#1fd9b8;
  --accent-dark:#159a85;
  --accent-2:#7be6d3;
  --accent-ink:#04211c;
  --font-display:'Manrope', system-ui, sans-serif;
  --font-body:'Source Sans 3', system-ui, sans-serif;
  --font-mono:'IBM Plex Mono', 'Cascadia Mono', monospace;
  --maxw:1120px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
html,body{overflow-x:hidden;}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:var(--accent-2);}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px;}
h1,h2,h3{font-family:var(--font-display);font-weight:800;color:#fff;text-wrap:balance;margin:0;}
.eyebrow{
  font-family:var(--font-display);font-weight:700;font-size:12px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--accent-2);margin:0 0 12px;
}
.mono{font-family:var(--font-mono);}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}

.topline{height:3px;background:var(--accent);}

/* ---------- header ---------- */
header{
  position:sticky;top:0;z-index:20;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:clamp(12px,1.4vw,22px) clamp(16px,2vw,32px);background:rgba(10,15,19,.86);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);flex-wrap:wrap;
}
header .brand{display:flex;align-items:center;gap:10px;text-decoration:none;}
header .brand .mark{
  width:clamp(30px,2.3vw,46px);height:clamp(30px,2.3vw,46px);border-radius:clamp(8px,.6vw,12px);flex:0 0 auto;
  background:linear-gradient(135deg, var(--accent), var(--accent-dark));
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-weight:800;font-size:clamp(11px,.9vw,17px);color:var(--accent-ink);
}
header .brand .txt{display:flex;flex-direction:column;line-height:1.2;}
header .brand .tag{font-size:clamp(9px,.6vw,12px);color:var(--muted);font-weight:600;}
header .brand b{font-family:var(--font-display);font-weight:800;font-size:clamp(15px,1.25vw,21px);color:#fff;}
header nav{display:flex;gap:clamp(14px,1.6vw,28px);flex-wrap:wrap;}
header nav a{
  color:var(--muted);text-decoration:none;font-weight:600;font-size:clamp(13px,1vw,16px);
  padding-bottom:3px;border-bottom:2px solid transparent;
}
header nav a:hover{color:var(--ink);}
header nav a.active{color:#fff;border-bottom-color:var(--accent);}
.cta{
  font-family:var(--font-display);font-weight:800;font-size:clamp(12.5px,.95vw,15px);
  background:var(--accent);color:var(--accent-ink);border:none;border-radius:8px;
  padding:clamp(9px,.8vw,13px) clamp(14px,1.3vw,22px);text-decoration:none;white-space:nowrap;
}
.cta:hover{background:var(--accent-2);}
.cta.ghost{background:transparent;border:1px solid var(--line);color:var(--ink);}

/* ---------- language switcher ---------- */
.lang-switch{position:relative;flex:0 0 auto;}
.lang-btn{
  display:flex;align-items:center;gap:8px;font-family:var(--font-display);font-weight:700;
  font-size:clamp(12.5px,.95vw,14px);background:var(--glass);border:1px solid var(--line);color:var(--ink);
  border-radius:999px;padding:clamp(7px,.65vw,10px) clamp(10px,1vw,14px);cursor:pointer;white-space:nowrap;
}
.lang-btn:hover{border-color:var(--accent);}
.lang-btn svg{flex:0 0 auto;border-radius:2px;}
.lang-btn .flag-emoji{font-size:15px;line-height:1;}
.lang-btn-name{max-width:110px;overflow:hidden;text-overflow:ellipsis;}
.lang-caret{opacity:.6;flex:0 0 auto;}
.lang-menu{
  position:absolute;top:calc(100% + 8px);right:0;z-index:40;list-style:none;margin:0;padding:6px;
  background:var(--surface-2);border:1px solid var(--line);border-radius:12px;box-shadow:0 16px 40px rgba(0,0,0,.5);
  min-width:220px;max-height:340px;overflow-y:auto;
}
.lang-opt{
  display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;cursor:pointer;
  font-size:13.5px;color:var(--ink);
}
.lang-opt svg{flex:0 0 auto;border-radius:2px;}
.lang-opt .flag-emoji{font-size:15px;line-height:1;}
.lang-opt:hover{background:var(--glass);}
.lang-opt.is-active{background:rgba(31,217,184,.12);color:#fff;font-weight:700;}
@media (max-width:860px){
  .lang-btn-name{display:none;}
}

/* ---------- hero ---------- */
.hero{position:relative;isolation:isolate;overflow:hidden;padding-block:72px 56px;}
.hero::before{
  content:"";position:absolute;top:-120px;right:-160px;width:520px;height:520px;
  background:radial-gradient(circle, rgba(31,217,184,.22), transparent 70%);
  filter:blur(6px);z-index:-1;
}
.hero-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:48px;align-items:center;}
.hero h1{font-size:clamp(30px,4.2vw,46px);line-height:1.08;}
.hero .lede{font-size:clamp(16px,1.1vw,19px);color:var(--muted);max-width:52ch;margin:18px 0 28px;}
.hero .ctas{display:flex;gap:12px;flex-wrap:wrap;}
.badge-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:28px;}
.badge{
  font-family:var(--font-mono);font-size:11.5px;color:var(--muted);
  border:1px solid var(--line);border-radius:999px;padding:5px 11px;
}

/* stylized live-look product preview */
.preview{
  background:var(--surface);border:1px solid var(--line);border-radius:14px;
  box-shadow:0 24px 60px rgba(0,0,0,.45);overflow:hidden;
}
.preview .pv-bar{display:flex;align-items:center;gap:6px;padding:10px 14px;background:var(--surface-2);border-bottom:1px solid var(--line);}
.preview .pv-bar span{width:8px;height:8px;border-radius:50%;background:var(--line);}
.preview .pv-bar .u{margin-left:8px;font-family:var(--font-mono);font-size:10.5px;color:var(--muted);}
.preview .pv-body{padding:18px;}
.pv-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px;}
.pv-stat{background:var(--glass);border:1px solid var(--line);border-radius:10px;padding:10px 12px;}
.pv-stat .l{font-size:10px;color:var(--muted);font-weight:600;}
.pv-stat b{display:block;font-family:var(--font-display);font-size:19px;color:#fff;margin-top:3px;font-variant-numeric:tabular-nums;}
.pv-row{display:flex;gap:10px;}
.pv-list{width:44%;display:flex;flex-direction:column;gap:6px;}
.pv-item{border:1px solid var(--line);border-radius:8px;padding:8px 10px;font-size:11px;}
.pv-item.sel{background:rgba(31,217,184,.09);border-color:var(--accent);}
.pv-item .t{font-family:var(--font-display);font-weight:700;color:#fff;font-size:11.5px;}
.pv-item .s{color:var(--muted);font-family:var(--font-mono);font-size:9.5px;}
.pv-detail{flex:1;border:1px solid var(--line);border-radius:8px;padding:12px;}
.pv-detail h4{font-family:var(--font-display);font-size:13px;color:#fff;margin:0 0 4px;}
.pv-detail p{margin:0;font-size:11px;color:var(--muted);line-height:1.5;}

/* page header (non-home pages) */
.page-head{padding-block:56px 40px;}
.page-head .eyebrow{margin-bottom:14px;}
.page-head h1{font-size:clamp(26px,3.6vw,38px);line-height:1.12;}
.page-head p{color:var(--muted);font-size:clamp(15px,1.05vw,18px);max-width:62ch;margin-top:14px;}

section{padding-block:64px;border-top:1px solid var(--line);}
.section-head{max-width:640px;margin-bottom:36px;}
.section-head h2{font-size:clamp(22px,3vw,30px);}
.section-head p{color:var(--muted);font-size:clamp(14px,1vw,17px);margin-top:10px;}

/* problem */
.pain-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.pain{background:var(--glass);border:1px solid var(--line);border-radius:12px;padding:22px;}
.pain .n{font-family:var(--font-mono);font-size:12px;color:var(--accent-2);}
.pain h3{font-size:clamp(15.5px,1.15vw,18px);margin:10px 0 8px;}
.pain p{margin:0;color:var(--muted);font-size:clamp(13px,.95vw,15px);}

/* how it works */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.step{position:relative;padding-top:14px;}
.step .k{font-family:var(--font-mono);font-size:12px;color:var(--muted);}
.step h3{font-size:clamp(16px,1.2vw,19px);margin:8px 0;}
.step p{margin:0;color:var(--muted);font-size:clamp(13px,.95vw,15px);}
.step-bar{height:2px;background:var(--line);border-radius:2px;margin-bottom:14px;position:relative;overflow:hidden;}
.step-bar::after{content:"";position:absolute;inset:0;width:38%;background:var(--accent);}

/* compatibility */
.compat-strip{display:flex;flex-wrap:wrap;gap:12px;align-items:center;}
.compat-strip .chip{
  display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:999px;
  padding:9px 16px;font-family:var(--font-display);font-weight:700;font-size:13.5px;color:var(--ink);
  background:var(--glass);
}
.compat-strip .chip i{width:8px;height:8px;border-radius:50%;background:var(--accent);display:block;}

/* features */
.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.feat{border:1px solid var(--line);border-radius:12px;padding:22px;background:var(--surface);}
.feat h3{font-size:clamp(15px,1.1vw,17.5px);margin:0 0 8px;}
.feat p{margin:0;color:var(--muted);font-size:clamp(13px,.95vw,15px);}
.feat .ic{width:36px;height:36px;border-radius:9px;background:rgba(31,217,184,.12);display:flex;align-items:center;justify-content:center;margin-bottom:14px;}
.feat .ic svg{width:18px;height:18px;stroke:var(--accent-2);}

/* origin / trust */
.origin{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;}
.origin .stat-line{display:flex;gap:28px;margin-top:22px;flex-wrap:wrap;}
.origin .stat-line div b{display:block;font-family:var(--font-display);font-size:clamp(20px,1.6vw,26px);color:#fff;}
.origin .stat-line div span{font-size:clamp(11px,.8vw,13px);color:var(--muted);}
.origin blockquote{
  margin:0;background:var(--glass);border:1px solid var(--line);border-left:3px solid var(--accent);
  border-radius:0 12px 12px 0;padding:22px 24px;font-size:clamp(14px,1vw,16.5px);color:var(--ink);
}

/* final cta */
.final-cta{text-align:left;background:linear-gradient(135deg, rgba(31,217,184,.1), transparent 60%);border-radius:16px;padding:44px;border:1px solid var(--line);}
.final-cta h2{font-size:clamp(22px,3.2vw,30px);max-width:26ch;}
.final-cta p{color:var(--muted);margin:12px 0 22px;max-width:52ch;font-size:clamp(14px,1vw,16.5px);}

/* self-hosted banner */
.host-banner{
  background:rgba(31,217,184,.08);border-bottom:1px solid var(--line);
  text-align:center;padding:9px 24px;
  font-size:clamp(11.5px,.85vw,13.5px);color:var(--accent-2);font-weight:600;
}

/* pricing */
.price-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
.price-card{border:1px solid var(--line);border-radius:14px;padding:26px 22px;background:var(--surface);display:flex;flex-direction:column;gap:6px;}
.price-card.is-highlight{border-color:var(--accent);background:linear-gradient(180deg, rgba(31,217,184,.08), var(--surface) 60%);}
.price-card .p-name{font-family:var(--font-display);font-weight:800;color:#fff;font-size:15px;}
.price-card .p-users{color:var(--muted);font-size:12.5px;margin-bottom:10px;}
.price-card .p-price{font-family:var(--font-display);font-weight:800;color:var(--accent-2);font-size:clamp(20px,2vw,26px);margin-bottom:10px;}
.price-card .p-desc{color:var(--muted);font-size:13px;line-height:1.5;flex:1;}
.price-note{color:var(--muted);font-size:13px;margin-top:22px;max-width:70ch;}
@media (max-width:860px){
  .price-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:520px){
  .price-grid{grid-template-columns:1fr;}
}

/* contact card */
.contact-card{
  margin-top:28px;display:flex;flex-direction:column;gap:16px;
  background:var(--glass);border:1px solid var(--line);border-radius:14px;
  padding:24px 26px;max-width:480px;
}
.contact-card .c-name{font-family:var(--font-display);font-weight:800;color:#fff;font-size:16px;margin-bottom:2px;}
.contact-row{display:flex;align-items:flex-start;gap:12px;}
.contact-row .ic{
  width:32px;height:32px;border-radius:9px;background:rgba(31,217,184,.12);
  display:flex;align-items:center;justify-content:center;flex:0 0 auto;
}
.contact-row .ic svg{width:16px;height:16px;stroke:var(--accent-2);}
.contact-row span{color:var(--muted);font-size:13.5px;line-height:1.5;padding-top:6px;}
.contact-row a{color:var(--muted);text-decoration:none;}
.contact-row a:hover{color:var(--ink);}

.next-link{
  display:inline-flex;align-items:center;gap:8px;margin-top:8px;
  font-family:var(--font-display);font-weight:700;font-size:14.5px;color:var(--accent-2);text-decoration:none;
}
.next-link:hover{color:#fff;}

/* tech strip (home) */
.tech-section{padding-top:12px;}
.tech-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
.tech-card{
  border:1px solid var(--line);border-radius:14px;padding:20px 22px;background:var(--surface);
  display:flex;flex-direction:column;justify-content:space-between;min-height:120px;
  text-decoration:none;color:inherit;transition:border-color .2s ease,transform .2s ease;
}
a.tech-card:hover{border-color:var(--accent);transform:translateY(-2px);}
.tc-icon--solid{background:var(--accent);}
.tc-icon--solid svg{stroke:var(--accent-ink);}
.tc-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;}
.tc-pct{font-family:var(--font-mono);font-weight:600;font-size:clamp(19px,1.9vw,25px);color:var(--accent-2);font-variant-numeric:tabular-nums;}
.tc-logos{position:relative;width:110px;height:44px;flex:0 0 auto;}
.tc-logo{position:absolute;inset:0;display:flex;align-items:center;justify-content:flex-end;opacity:0;animation-name:tcFade;animation-timing-function:ease-in-out;animation-iteration-count:infinite;}
.tc-logo svg{height:40px;width:auto;max-width:110px;fill:var(--ink);opacity:1;}
.tc-logos.single{display:flex;align-items:center;justify-content:flex-end;}
.tc-logos.single .tc-logo{position:static;opacity:1;animation:none;}
@keyframes tcFade{
  0%{opacity:0;}
  8%{opacity:1;}
  27%{opacity:1;}
  35%{opacity:0;}
  100%{opacity:0;}
}
.tc-label{margin-top:14px;font-family:var(--font-display);font-weight:800;color:#fff;font-size:clamp(14px,1.1vw,16.5px);}
.tc-icon{width:38px;height:38px;border-radius:10px;background:rgba(31,217,184,.12);display:flex;align-items:center;justify-content:center;}
.tc-icon svg{width:19px;height:19px;stroke:var(--accent-2);}
/* mini Kopi, animated inside the static tech cards — same slot as .tc-logos */
.tc-mini{position:relative;width:110px;height:44px;flex:0 0 auto;display:flex;align-items:center;justify-content:flex-end;}
.tc-mini svg{height:40px;width:auto;max-width:110px;overflow:visible;}
.mk-torso{stroke:var(--accent-2);stroke-width:2;fill:none;stroke-linecap:round;}
.mk-arm-l line,.mk-arm-r line,.mk-leg-l line,.mk-leg-r line{stroke:var(--accent-2);stroke-width:2;stroke-linecap:round;}
.mk-head{fill:var(--bg);stroke:var(--accent-2);stroke-width:2;}
.mk-eye{fill:var(--accent-2);}
.mk-mouth{stroke:var(--accent-2);stroke-width:1.6;fill:none;stroke-linecap:round;}
.mk-arm-l,.mk-arm-r,.mk-leg-l,.mk-leg-r{transform-origin:0 0;}
.mk-arm-l{transform:rotate(14deg);} .mk-arm-r{transform:rotate(-14deg);}
.mk-leg-l{transform:rotate(10deg);} .mk-leg-r{transform:rotate(-10deg);}
.mk-bob{animation:mkBob 2.4s ease-in-out infinite;transform-box:fill-box;}
@keyframes mkBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-1.5px)}}

.mk-fig--server .mk-arm-l{animation:mkTugArmL .6s ease-in-out infinite;}
.mk-fig--server .mk-arm-r{animation:mkTugArmR .6s ease-in-out infinite;}
@keyframes mkTugArmL{0%,100%{transform:rotate(-70deg)}50%{transform:rotate(-55deg)}}
@keyframes mkTugArmR{0%,100%{transform:rotate(-25deg)}50%{transform:rotate(-14deg)}}
.mk-fig--server .mk-leg-l{animation:mkTugLegL .6s ease-in-out infinite;}
.mk-fig--server .mk-leg-r{animation:mkTugLegR .6s ease-in-out infinite;}
@keyframes mkTugLegL{0%,100%{transform:rotate(32deg)}50%{transform:rotate(38deg)}}
@keyframes mkTugLegR{0%,100%{transform:rotate(-24deg)}50%{transform:rotate(-18deg)}}
.mk-fig--server .mk-bob{animation:mkTugBob .6s ease-in-out infinite;}
@keyframes mkTugBob{0%,100%{transform:translate(0,0) rotate(0deg)}50%{transform:translate(-2px,1px) rotate(-6deg)}}
.mk-rope{stroke:var(--accent-2);stroke-width:2;fill:none;stroke-linecap:round;}
.mk-rope-flag{fill:var(--accent);}
.mk-fig--server .mk-rope-group{animation:mkRopeTug .6s ease-in-out infinite;}
@keyframes mkRopeTug{0%,100%{transform:translateX(0)}50%{transform:translateX(-2.5px)}}

.mk-fig--graph .mk-arm-l{animation:mkLiftArmL 1.4s ease-in-out infinite;}
.mk-fig--graph .mk-arm-r{animation:mkLiftArmR 1.4s ease-in-out infinite;}
@keyframes mkLiftArmL{0%,100%{transform:rotate(-16deg)}50%{transform:rotate(-58deg)}}
@keyframes mkLiftArmR{0%,100%{transform:rotate(16deg)}50%{transform:rotate(58deg)}}
.mk-fig--graph .mk-leg-l{animation:mkLiftLegL 1.4s ease-in-out infinite;}
.mk-fig--graph .mk-leg-r{animation:mkLiftLegR 1.4s ease-in-out infinite;}
@keyframes mkLiftLegL{0%,100%{transform:rotate(26deg)}50%{transform:rotate(12deg)}}
@keyframes mkLiftLegR{0%,100%{transform:rotate(-26deg)}50%{transform:rotate(-12deg)}}
.mk-fig--graph .mk-bob{animation:mkLiftBob 1.4s ease-in-out infinite;}
@keyframes mkLiftBob{0%,100%{transform:translateY(2px)}50%{transform:translateY(-2px)}}
.mk-tome{stroke:var(--accent-2);stroke-width:1.8;fill:none;stroke-linejoin:round;}
.mk-fig--graph .mk-tome-group{animation:mkTomeLift 1.4s ease-in-out infinite;}
@keyframes mkTomeLift{0%,100%{transform:translateY(9px)}50%{transform:translateY(0)}}

.mk-fig--embedded .mk-bob{animation:mkWalkBob .7s ease-in-out infinite;}
@keyframes mkWalkBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-1.5px)}}
.mk-fig--embedded .mk-arm-l{animation:mkPushArmL .7s ease-in-out infinite;}
.mk-fig--embedded .mk-arm-r{animation:mkPushArmR .7s ease-in-out infinite;}
@keyframes mkPushArmL{0%,100%{transform:rotate(62deg)}50%{transform:rotate(78deg)}}
@keyframes mkPushArmR{0%,100%{transform:rotate(-62deg)}50%{transform:rotate(-78deg)}}
.mk-fig--embedded .mk-leg-l{animation:mkWalkLegL .7s ease-in-out infinite;}
.mk-fig--embedded .mk-leg-r{animation:mkWalkLegR .7s ease-in-out infinite;}
@keyframes mkWalkLegL{0%,100%{transform:rotate(20deg)}50%{transform:rotate(-16deg)}}
@keyframes mkWalkLegR{0%,100%{transform:rotate(-16deg)}50%{transform:rotate(20deg)}}
.mk-cart{stroke:var(--accent-2);stroke-width:2;fill:none;stroke-linejoin:round;stroke-linecap:round;}
.mk-cart-wheel{stroke:var(--accent-2);stroke-width:1.8;fill:none;}
.mk-cart-spoke{stroke:var(--accent-2);stroke-width:1.4;transform-box:fill-box;transform-origin:center;animation:mkWheelSpin .7s linear infinite;}
@keyframes mkWheelSpin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
.mk-cart-sym{fill:var(--accent);font-family:var(--font-mono);font-weight:700;opacity:0;transform-box:fill-box;transform-origin:center;}
.mk-fig--embedded .cs1{animation:mkSym 3.6s ease-in-out infinite;}
.mk-fig--embedded .cs2{animation:mkSym 3.6s ease-in-out infinite 1.2s;}
.mk-fig--embedded .cs3{animation:mkSym 3.6s ease-in-out infinite 2.4s;}
@keyframes mkSym{0%,80%,100%{opacity:0;transform:translateY(0) scale(.7)}15%{opacity:1;transform:translateY(-3px) scale(1)}30%{opacity:0;transform:translateY(-6px) scale(.8)}}
@media (max-width:860px){
  .tech-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:520px){
  .tech-grid{grid-template-columns:1fr;}
}

footer{border-top:1px solid var(--line);padding-block:32px;padding-inline:clamp(16px,2vw,32px);}
.foot-row{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;font-size:clamp(12px,.85vw,15px);color:var(--muted);}
.foot-row a{color:var(--muted);}
.foot-row a:hover{color:var(--ink);}

/* cookie notice — slim frosted pill, kept out of the hero animation's way */
.cookie-bar{
  position:fixed;left:16px;bottom:16px;z-index:9999;max-width:min(92vw,480px);
  background:rgba(17,24,32,.78);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid var(--line);border-radius:999px;
  box-shadow:0 10px 26px rgba(0,0,0,.35);padding:9px 9px 9px 18px;
  display:flex;align-items:center;gap:14px;font-size:12.5px;color:var(--muted);line-height:1.4;
  transform:translateY(12px);opacity:0;transition:transform .3s ease, opacity .3s ease;
  pointer-events:none;
}
.cookie-bar.show{opacity:1;transform:translateY(0);pointer-events:auto;}
.cookie-bar.hide{opacity:0;transform:translateY(12px);}
.cookie-bar p{margin:0;flex:1;}
.cookie-bar a{color:var(--accent-2);}
.cookie-actions{display:flex;gap:8px;flex:0 0 auto;}
.cookie-bar button{
  flex:0 0 auto;font-family:var(--font-display);font-weight:800;font-size:12px;white-space:nowrap;
  background:var(--accent);color:var(--accent-ink);border:none;border-radius:999px;
  padding:8px 16px;cursor:pointer;
}
.cookie-bar button:hover{background:var(--accent-2);}
.cookie-bar button.ghost{background:transparent;color:var(--muted);border:1px solid var(--line);}
.cookie-bar button.ghost:hover{background:rgba(255,255,255,.06);color:var(--ink);}
@media (max-width:480px){
  .cookie-bar{left:12px;right:12px;bottom:12px;max-width:none;border-radius:16px;padding:12px 12px 12px 16px;flex-wrap:wrap;}
}

@media (max-width:860px){
  .hero-grid, .origin{grid-template-columns:1fr;}
  .pain-grid, .steps, .feat-grid{grid-template-columns:1fr;}
  header nav{display:none;}
}