/* ==========================================================
   AkcaVPN, reborn. One dark canvas, one accent (jade), big type,
   app mockups doing the talking. Perk cards carry their partner's
   own colour; nothing else on the page does.
   ========================================================== */
:root{
  --bg: #0a0c16;            /* the app's night ground */
  --bg-2: #12141f;
  --bg-3: #191c2a;
  --line: rgba(255,255,255,.08);
  --line-2: rgba(255,255,255,.14);
  --ink: #f4f5f2;
  --ink-2: rgba(244,245,242,.78);
  --ink-3: rgba(244,245,242,.56);
  --ink-4: rgba(244,245,242,.36);
  --jade: #74d3a6;          /* "protected" only: status dots */
  --cf: #a9bdff;            /* the cornflower: the brand accent */
  --cf-deep: #5b7cf0;
  --cf-ink: #0a0c16;
  --gold: #e9c873;
  --radius: 22px;
  --ease: cubic-bezier(.2,.7,.1,1);
  --sans: "Inter", -apple-system, system-ui, sans-serif;
  --serif: "Newsreader", "Iowan Old Style", Georgia, serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
  --bone: #e9e3d6;
}
*{ box-sizing: border-box; margin: 0; padding: 0; }
html{ scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body{
  background: var(--bg); color: var(--ink); font-family: var(--sans);
  font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; overflow-x: hidden;
  letter-spacing: -0.006em;
}
a{ color: inherit; text-decoration: none; }
img{ display: block; max-width: 100%; }
.wrap{ max-width: 1240px; margin: 0 auto; padding: 0 24px; }
.sr-only{ position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
:focus-visible{ outline: 2px solid var(--cf); outline-offset: 3px; border-radius: 8px; }

/* ---------- Buttons ---------- */
.btn{
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 52px; padding: 0 24px; border-radius: 999px; font-weight: 600; font-size: 16px;
  border: 1px solid transparent; transition: transform .2s var(--ease), background .2s, border-color .2s, color .2s;
  white-space: nowrap;
}
.btn:active{ transform: scale(.97); }
.btn-primary{ background: var(--cf); color: var(--cf-ink); }
.btn-primary:hover{ background: #c4d2ff; transform: translateY(-1px); }
.btn-ghost{ border-color: var(--line-2); color: var(--ink); }
.btn-ghost:hover{ border-color: var(--ink-3); background: rgba(255,255,255,.04); }
.btn-sm{ height: 40px; padding: 0 18px; font-size: 14px; }
.btn .arr{ transition: transform .2s var(--ease); }
.btn:hover .arr{ transform: translateX(3px); }

/* ---------- Nav ---------- */
.nav{
  position: sticky; top: 0; z-index: 50;
  background: rgba(7,8,10,.72); backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-bottom: 1px solid transparent; transition: border-color .3s;
}
.nav.scrolled{ border-bottom-color: var(--line); }
.nav-in{ height: 72px; display: flex; align-items: center; gap: 36px; }
.nav-logo img{ height: 26px; width: auto; }
.nav-links{ display: flex; gap: 28px; font-size: 15px; color: var(--ink-2); }
.nav-links a:hover{ color: var(--ink); }
.nav-cta{ margin-left: auto; display: flex; gap: 10px; align-items: center; }
.menu-btn{ display: none; width: 44px; height: 44px; border: 0; background: none; color: var(--ink); cursor: pointer; }
.menu-btn span{ display: block; width: 20px; height: 1.5px; background: currentColor; margin: 5px auto; transition: transform .25s var(--ease), opacity .2s; }
.menu-btn[aria-expanded="true"] span:nth-child(1){ transform: translateY(6.5px) rotate(45deg); }
.menu-btn[aria-expanded="true"] span:nth-child(2){ opacity: 0; }
.menu-btn[aria-expanded="true"] span:nth-child(3){ transform: translateY(-6.5px) rotate(-45deg); }
.mobile-menu{
  position: fixed; inset: 72px 0 0; z-index: 49; background: var(--bg); padding: 24px;
  display: flex; flex-direction: column; gap: 4px;
}
.mobile-menu[hidden]{ display: none; }
.mobile-menu a{ font-size: 28px; font-weight: 600; letter-spacing: -0.02em; padding: 12px 0; border-bottom: 1px solid var(--line); }
.mobile-menu .btn{ margin-top: 24px; font-size: 17px; border-bottom: 0; }

/* ---------- Hero ---------- */
.hero{ position: relative; overflow: hidden; padding: 72px 0 40px; }
.hero::before{
  content: ""; position: absolute; inset: -20% -10% auto; height: 120%; pointer-events: none;
  background:
    radial-gradient(ellipse 45% 40% at 72% 35%, rgba(91,124,240,.24), transparent 70%),
    radial-gradient(ellipse 35% 30% at 15% 10%, rgba(233,200,115,.07), transparent 70%);
}
.hero::after{
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(circle, rgba(255,255,255,.07) 1px, transparent 1.2px);
  background-size: 24px 24px;
  -webkit-mask-image: radial-gradient(ellipse 60% 70% at 70% 40%, #000, transparent 75%);
  mask-image: radial-gradient(ellipse 60% 70% at 70% 40%, #000, transparent 75%);
}
.hero-grid{ position: relative; z-index: 1; display: grid; grid-template-columns: 1.3fr .7fr; gap: 48px; align-items: center; min-height: calc(100vh - 180px); }
.pill{
  display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px 6px 6px; border-radius: 999px;
  border: 1px solid var(--line-2); background: rgba(255,255,255,.03); font-size: 14px; color: var(--ink-2);
  margin-bottom: 28px; transition: border-color .2s, background .2s;
}
.pill:hover{ border-color: var(--ink-4); background: rgba(255,255,255,.05); }
.pill b{ background: var(--cf); color: var(--cf-ink); font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 999px; }
.pill .tok{ display: inline-flex; }
.pill .tok img{ width: 18px; height: 18px; border-radius: 50%; margin-left: -5px; border: 1.5px solid var(--bg); }
.pill .tok img:first-child{ margin-left: 0; }
.hero h1{
  font-size: clamp(50px, 6.3vw, 92px); line-height: .94; letter-spacing: -0.05em; font-weight: 700;
  margin-bottom: 28px;
}
.hero h1 span{ display: block; color: var(--ink-4); }
/* The hero line turns (js/tagline.js): For travellers, by travellers. / For traders, by
   traders. / For humans, from Earth. Only the words that change move. Their letters
   dissolve almost in place, a slight lift and a blur, one after another; then the new
   word's letters come into focus the same way. The heading's lines sit close (.94), so
   nothing travels far enough to cross the other line, and the old and new words barely
   overlap. The punctuation is part of the word, so nothing slides across the letters;
   "For" never moves. */
.hero h1 .tl-1{ display: block; color: var(--ink); }
.hero h1 .tl-2{ display: block; color: var(--ink-4); }
.hero h1 .tl-slot{ display: inline-block; position: relative; color: inherit; white-space: nowrap; transition: width .55s var(--ease) .12s; }
/* a word is a block at its own width, so the leaving one (absolute) and the arriving one
   (in flow) sit on exactly the same line */
.hero h1 .tl-w{ display: block; width: max-content; color: inherit; }
.hero h1 .tl-w.tl-abs{ position: absolute; left: 0; top: 0; }
.hero h1 .tl-c{ display: inline-block; color: inherit;
  transition: transform .6s var(--ease), opacity .5s var(--ease), filter .6s var(--ease);
  transition-delay: calc(.24s + var(--i) * 30ms); }
.hero h1 .tl-w.tl-pre .tl-c{ transform: translateY(.16em); opacity: 0; filter: blur(12px); }
.hero h1 .tl-w.tl-out .tl-c{ transform: translateY(-.1em); opacity: 0; filter: blur(10px);
  transition-duration: .34s, .3s, .34s; transition-delay: calc(var(--i) * 16ms); }
.hero-sub{ font-size: 20px; line-height: 1.5; color: var(--ink-2); max-width: 30em; margin-bottom: 36px; }
.hero-cta{ display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 36px; }
.platforms{ display: flex; align-items: center; gap: 18px; color: var(--ink-4); font-size: 13px; }
.platforms svg{ width: 20px; height: 20px; color: var(--ink-3); }
.platforms .sep{ width: 1px; height: 18px; background: var(--line-2); }

/* Phone mockup */
.phone{
  position: relative; width: min(340px, 78vw); aspect-ratio: 9 / 19.5; border-radius: 52px; padding: 11px;
  background: linear-gradient(160deg, #2a2d32, #0d0f12 40%, #1b1e22);
  box-shadow: 0 0 0 1px rgba(255,255,255,.10) inset, 0 50px 120px -30px rgba(0,0,0,.9), 0 30px 80px -40px rgba(91,124,240,.45);
}
.phone-screen{
  position: relative; width: 100%; height: 100%; border-radius: 42px; overflow: hidden;
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(91,124,240,.22), transparent 70%),
    linear-gradient(180deg, #121527, #0a0c16);
}
.phone-screen::before{ /* island */
  content: ""; position: absolute; top: 12px; left: 50%; transform: translateX(-50%); width: 34%; height: 26px; border-radius: 999px; background: #000; z-index: 3;
}
.mock{ position: absolute; inset: 0; transition: opacity .6s var(--ease), transform .6s var(--ease); }
.mock img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 2; }
.mock-label{
  position: absolute; inset: 0; display: grid; place-content: center; text-align: center; gap: 10px; padding: 24px;
  color: var(--ink-4); font-size: 13px; letter-spacing: .02em;
}
.mock-label strong{ display: block; color: var(--ink-2); font-size: 15px; font-weight: 600; }
.mock-label i{ width: 54px; height: 54px; margin: 0 auto 4px; border-radius: 50%; border: 1.5px dashed rgba(255,255,255,.22); }
.hero-visual{ position: relative; display: grid; place-items: center; }
.float{
  position: absolute; z-index: 2; display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; border-radius: 16px; font-size: 14px; font-weight: 500;
  background: rgba(20,23,27,.78); border: 1px solid var(--line-2); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 20px 40px -20px rgba(0,0,0,.8);
  animation: bob 7s ease-in-out infinite;
}
.float small{ display: block; color: var(--ink-3); font-size: 12px; font-weight: 400; }
.float .dot{ width: 9px; height: 9px; border-radius: 50%; background: var(--jade); box-shadow: 0 0 0 4px rgba(116,211,166,.18); }
.float img{ width: 22px; height: 22px; border-radius: 50%; }
.f1{ top: 16%; left: -2%; }
.f2{ top: 48%; right: -4%; animation-delay: -2.4s; }
.f3{ bottom: 12%; left: 4%; animation-delay: -4.6s; }
@keyframes bob{ 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-10px); } }

/* Proof strip */
.proof{ position: relative; z-index: 1; display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 24px; padding: 28px 0 0; margin-top: 24px; border-top: 1px solid var(--line); }
.proof div{ display: grid; gap: 4px; }
.proof b{ font-size: 30px; font-weight: 700; letter-spacing: -0.035em; }
.proof .big b{ font-size: 40px; }
.proof span{ font-size: 14px; color: var(--ink-3); }

/* ---------- Sections ---------- */
.sec{ padding: 140px 0 0; }
.eyebrow{ font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--cf); margin-bottom: 18px; }
.h2{ font-size: clamp(40px, 5.6vw, 76px); line-height: .98; letter-spacing: -0.05em; font-weight: 700; max-width: 14ch; }
.lead{ margin-top: 22px; font-size: 19px; line-height: 1.55; color: var(--ink-2); max-width: 36em; }

/* Sticky feature scroller */
.tour{ display: grid; grid-template-columns: 1fr 1fr; gap: 64px; margin-top: 72px; }
.tour-steps{ display: grid; }
.tour-step{ min-height: 78vh; display: flex; flex-direction: column; justify-content: center; padding: 40px 0; opacity: .32; transition: opacity .5s var(--ease); }
.tour-step.is-active{ opacity: 1; }
.tour-step .n{ font-size: 13px; font-weight: 600; color: var(--ink-4); margin-bottom: 16px; font-variant-numeric: tabular-nums; }
.tour-step h3{ font-size: clamp(32px, 3.6vw, 48px); line-height: 1.02; letter-spacing: -0.04em; font-weight: 700; max-width: 13ch; margin-bottom: 18px; }
.tour-step p{ font-size: 18px; line-height: 1.6; color: var(--ink-2); max-width: 28em; }
.tour-step a.more{ display: inline-flex; gap: 8px; margin-top: 20px; color: var(--cf); font-weight: 600; }
.tour-step .phone{ display: none; }
.tour-phone{ position: sticky; top: calc(50vh - 340px); height: 680px; display: grid; place-items: center; }
.tour-phone .phone{ width: 320px; }
.tour-phone .mock{ opacity: 0; transform: scale(.98); }
.tour-phone .mock.is-on{ opacity: 1; transform: none; }

/* Perks */
.perks-hd{ display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: end; }
.perk-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 64px; perspective: 1200px; }
.perk{
  position: relative; border-radius: var(--radius); overflow: hidden; min-height: 300px;
  border: 1px solid rgba(255,255,255,.10); background: var(--c1, #222);
  transform-style: preserve-3d; transition: transform .5s var(--ease), box-shadow .5s var(--ease);
  box-shadow: 0 30px 60px -40px rgba(0,0,0,.9);
}
.perk:hover{ box-shadow: 0 40px 80px -40px var(--glow, rgba(0,0,0,.9)); }
.perk canvas{ position: absolute; inset: 0; width: 100%; height: 100%; }
.perk-fallback{ position: absolute; inset: 0; background: radial-gradient(120% 90% at 20% 0%, var(--c2), var(--c1)); }
.perk-body{ position: relative; z-index: 1; height: 100%; min-height: 300px; display: flex; flex-direction: column; padding: 24px; text-shadow: 0 1px 12px rgba(0,0,0,.35); }
.perk-top{ display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.perk-brand{ display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 15px; }
.perk-brand img{ width: 30px; height: 30px; border-radius: 50%; background: rgba(0,0,0,.25); }
.perk-brand .glyph{ width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: rgba(0,0,0,.28); }
.perk-chip{ width: 38px; height: 28px; border-radius: 6px;
  /* A real card chip: champagne metal with the contact pads pressed into it. */
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 38 28' fill='none' stroke='%23503810' stroke-opacity='.5' stroke-width='.9'%3E%3Cpath d='M0 9.5h11M0 18.5h11M27 9.5h11M27 18.5h11M19 0v6M19 22v6'/%3E%3Crect x='11' y='6' width='16' height='16' rx='3'/%3E%3C/svg%3E") center/100% 100% no-repeat,
    linear-gradient(135deg, #f2e2b2, #c8a75e 45%, #efdba0 70%, #b8954d);
  box-shadow: inset 0 0 0 1px rgba(80,56,16,.35), 0 1px 2px rgba(0,0,0,.25); }
/* Superteam Earn's own lockup (mark + wordmark) in place of an icon and a name. */
.perk-brand img.perk-earn{ width: auto; height: 26px; border-radius: 0; background: none; }
.perk-value{ margin-top: auto; font-size: clamp(30px, 2.8vw, 38px); line-height: 1.02; letter-spacing: -0.04em; font-weight: 700; }
.perk-how{ margin-top: 12px; font-size: 14.5px; line-height: 1.5; color: rgba(255,255,255,.82); max-width: 30em; }
.perk-link{ margin-top: 14px; font-size: 13px; font-weight: 600; color: #fff; opacity: .9; display: inline-flex; gap: 6px; }

/* Pricing */
.plans{ display: grid; grid-template-columns: 1fr 1.25fr; gap: 20px; margin-top: 64px; }
.plan{ border: 1px solid var(--line-2); border-radius: var(--radius); padding: 32px; background: var(--bg-2); display: flex; flex-direction: column; }
.plan--plus{ position: relative; background: linear-gradient(160deg, rgba(91,124,240,.18), rgba(91,124,240,.03) 45%), var(--bg-2); border-color: rgba(169,189,255,.35); }
.plan h3{ font-size: 22px; font-weight: 700; letter-spacing: -0.02em; }
.plan .price{ margin: 18px 0 6px; font-size: 56px; font-weight: 700; letter-spacing: -0.05em; line-height: 1; }
.plan .price small{ font-size: 18px; color: var(--ink-3); font-weight: 500; letter-spacing: 0; }
.plan .note{ color: var(--ink-3); font-size: 15px; }
.plan ul{ list-style: none; margin: 24px 0 28px; display: grid; gap: 12px; }
.plan li{ display: flex; gap: 12px; align-items: flex-start; font-size: 16px; color: var(--ink-2); }
.plan li::before{ content: ""; flex: none; width: 18px; height: 18px; margin-top: 2px; border-radius: 50%; background: rgba(169,189,255,.16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a9bdff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center/11px no-repeat; }
.plan .btn{ margin-top: auto; }
.terms{ display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.terms span{ padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line-2); font-size: 14px; color: var(--ink-2); }
.terms span b{ color: var(--ink); }
.paywith{ display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 28px; color: var(--ink-3); font-size: 14px; }
.trade-note{ margin-top: 18px; font-size: 15px; color: var(--ink-2); }
.trade-note a{ color: var(--cf); font-weight: 600; text-decoration: underline; text-decoration-color: rgba(46,91,255,.35); text-underline-offset: 4px; }
.paywith .icons{ display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.paywith img{ height: 26px; width: auto; border-radius: 6px; background: #fff; padding: 3px 6px; }
.paywith img.tok{ width: 26px; height: 26px; padding: 0; border-radius: 50%; background: none; }

/* Download */
.dl{ display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-top: 56px; }
.dl a{ border: 1px solid var(--line-2); border-radius: 18px; padding: 22px; display: grid; gap: 6px; background: var(--bg-2); transition: border-color .2s, transform .3s var(--ease), background .2s; }
.dl a:hover{ border-color: var(--ink-4); transform: translateY(-3px); background: var(--bg-3); }
.dl svg, .dl img{ width: 26px; height: 26px; margin-bottom: 14px; color: var(--ink); }
.dl b{ font-size: 17px; font-weight: 600; }
.dl span{ font-size: 14px; color: var(--ink-3); }

/* FAQ */
.faq{ margin-top: 48px; border-top: 1px solid var(--line); max-width: 860px; }
.faq details{ border-bottom: 1px solid var(--line); }
.faq summary{ list-style: none; cursor: pointer; padding: 24px 0; font-size: 20px; font-weight: 600; letter-spacing: -0.02em; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker{ display: none; }
.faq summary::after{ content: "+"; font-weight: 400; color: var(--ink-3); transition: transform .3s var(--ease); }
.faq details[open] summary::after{ transform: rotate(45deg); }
.faq p{ padding: 0 0 24px; color: var(--ink-2); font-size: 17px; line-height: 1.6; max-width: 44em; }

/* End */
.end{ padding: 160px 0 120px; text-align: center; position: relative; overflow: hidden; }
.end::before{ content: ""; position: absolute; left: 50%; top: 40%; width: 900px; height: 500px; transform: translate(-50%,-50%); background: radial-gradient(ellipse at center, rgba(91,124,240,.20), transparent 65%); pointer-events: none; }
.end .h2{ margin: 0 auto; max-width: 12ch; position: relative; }
.end .lead{ margin: 22px auto 36px; position: relative; }
.end .hero-cta{ justify-content: center; position: relative; }

/* Footer */
.foot{ border-top: 1px solid var(--line); padding: 56px 0 40px; color: var(--ink-3); font-size: 14px; }
.foot-grid{ display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 32px; }
.foot h4{ color: var(--ink); font-size: 14px; font-weight: 600; margin-bottom: 14px; }
.foot ul{ list-style: none; display: grid; gap: 10px; }
.foot a:hover{ color: var(--ink); }
.foot-bottom{ margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

/* ---------- Motion ---------- */
.rv{ opacity: 0; transform: translateY(28px); transition: opacity .8s var(--ease), transform .8s var(--ease); transition-delay: calc(var(--d, 0) * 80ms); }
.rv.in{ opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  .rv{ opacity: 1; transform: none; transition: none; }
  .float{ animation: none; }
  .mock, .tour-step{ transition: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1080px){
  .perk-grid{ grid-template-columns: repeat(2, 1fr); }
  .dl{ grid-template-columns: repeat(3, 1fr); }
  .proof{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px){
  .nav-links, .nav-cta .btn-ghost{ display: none; }
  .menu-btn{ display: block; }
  .nav-cta{ gap: 4px; }
  .hero{ padding-top: 40px; }
  .hero-grid{ grid-template-columns: 1fr; min-height: 0; gap: 56px; }
  .hero-visual{ padding: 8px 0 24px; }
  .f1{ left: 0; } .f2{ right: 0; } .f3{ left: 2%; }
  .sec{ padding-top: 104px; }
  .tour{ grid-template-columns: 1fr; gap: 0; margin-top: 40px; }
  .tour-phone{ display: none; }
  .tour-step{ min-height: 0; opacity: 1; padding: 40px 0 24px; }
  .tour-step .phone{ display: block; width: min(250px, 66vw); margin: 0 auto 32px; }
  .tour-step .mock{ opacity: 1; }
  .perks-hd{ grid-template-columns: 1fr; }
  .plans{ grid-template-columns: 1fr; }
  .foot-grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px){
  .wrap{ padding: 0 20px; }
  .hero h1{ letter-spacing: -0.05em; }
  .hero-sub{ font-size: 18px; }
  .hero-cta .btn{ flex: 1 1 auto; }
  .float{ font-size: 13px; padding: 8px 12px; border-radius: 14px; }
  .hero-visual .phone{ width: min(280px, 72vw); }
  .pill{ font-size: 13px; }
  .pill .tok{ display: none; }
  .float small{ font-size: 11px; }
  .f2{ top: 44%; }
  .proof b{ font-size: 24px; } .proof .big b{ font-size: 32px; }
  .lead{ font-size: 17px; }
  .tour-step p{ font-size: 17px; }
  .perk-grid{ grid-template-columns: 1fr; gap: 16px; margin-top: 40px; }
  .perk, .perk-body{ min-height: 248px; }
  .plan{ padding: 26px 22px; }
  .plan .price{ font-size: 48px; }
  .dl{ grid-template-columns: 1fr 1fr; }
  .faq summary{ font-size: 18px; }
  .end{ padding: 112px 0 88px; }
  .foot-grid{ grid-template-columns: 1fr; }
}
/* Perk cards: once revealed, tilt follows the pointer with no delay. */
.perk.rv.in{ transition: transform .5s var(--ease), box-shadow .5s var(--ease), opacity .8s var(--ease); transition-delay: 0s; }

/* ==========================================================
   The cornflower (js/flowers.js): blooms in view, sways, leans in on hover.
   ========================================================== */
.cf-plant{ position: absolute; display: block; width: var(--size); height: calc(var(--stem) + var(--size) / 2); pointer-events: auto; }
.cf-sway{ position: absolute; inset: 0; transform-origin: 50% 100%; animation: cf-sway 6.5s ease-in-out infinite; animation-delay: var(--sway-delay, 0s); }
.cf-stem{ position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); }
.cf-stalk{ fill: none; stroke: #8fa79a; stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.1s cubic-bezier(.3,.6,.2,1); }
.cf-leaf{ fill: rgba(143,167,154,.28); stroke: #8fa79a; stroke-width: 1.2; opacity: 0; transition: opacity .8s .6s; }
.cf-bloom{ position: absolute; left: calc(50% + var(--lean)); top: 0; width: var(--size); height: var(--size); transform: translate(-50%, -50%); transition: transform .45s cubic-bezier(.3,1.4,.5,1); }
.cf-plant:hover .cf-bloom{ transform: translate(-50%, -50%) scale(1.1) rotate(-8deg); }
.cf-svg{ display: block; width: 100%; height: 100%; overflow: visible; }
.cf-svg .fo, .cf-svg .fi{ transform-box: fill-box; transform-origin: 50% 100%; transform: scale(0); transition: transform .7s cubic-bezier(.2,.9,.25,1.15); }
.cf-svg .fo{ transition-delay: calc(.55s + var(--i) * 45ms); }
.cf-svg .fi{ transition-delay: calc(1.05s + var(--i) * 45ms); }
.cf-svg .fd{ transform-box: fill-box; transform-origin: 50% 50%; transform: scale(0); transition: transform .6s cubic-bezier(.2,.9,.25,1.2) 1.35s; }
.cf-head .cf-svg .fo{ transition-delay: calc(var(--i) * 35ms); }
.cf-head .cf-svg .fi{ transition-delay: calc(.35s + var(--i) * 35ms); }
.cf-head .cf-svg .fd{ transition-delay: .6s; }
.in .cf-stalk, .cf-plant.in .cf-stalk{ stroke-dashoffset: 0; }
.cf-plant.in .cf-leaf{ opacity: 1; }
.cf-plant.in .fo, .cf-plant.in .fi, .cf-plant.in .fd,
.cf-head.in .fo, .cf-head.in .fi, .cf-head.in .fd{ transform: scale(1); }
.cf-head{ display: inline-block; vertical-align: middle; }
@keyframes cf-sway{ 0%,100%{ transform: rotate(-2.2deg); } 50%{ transform: rotate(2.2deg); } }

/* Hero: the flower grows up beside the phone and looks over its shoulder. */
.cf-hero{ right: calc(50% - 296px); bottom: -24px; z-index: 0; }
.hero-visual .phone{ z-index: 1; }
/* Pricing: a small one perched on AkcaVPN+. */
.cf-perch{ right: 34px; bottom: calc(100% - 2px); z-index: 2; }
/* End: a meadow. */
.end{ padding-bottom: 300px; }
.meadow{ position: absolute; left: 0; right: 0; bottom: 0; height: 260px; pointer-events: none; }
.meadow .cf-plant{ bottom: 0; transform: translateX(-50%); pointer-events: auto; }
.meadow .grass{ position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 110px; }
.meadow .grass path{ fill: none; stroke: rgba(143,167,154,.35); stroke-width: 1.4; stroke-linecap: round; }
.meadow::after{ content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 40px; background: linear-gradient(transparent, var(--bg)); }

/* ==========================================================
   Free-from: seals like a drink label, and a Privacy Facts panel.
   ========================================================== */
.free-grid{ display: grid; grid-template-columns: 1.15fr .85fr; gap: 64px; align-items: center; }
.free-h{ max-width: none; }
.free-h span{ display: block; }
.free-h span:nth-child(2){ color: var(--cf); }
.free-h span:nth-child(3){ color: var(--ink-4); }
.seals{ display: flex; flex-wrap: wrap; gap: 14px; margin-top: 40px; }
.seal{ width: 116px; height: 116px; position: relative; transition: transform .4s cubic-bezier(.3,1.4,.5,1); }
.seal:hover{ transform: rotate(-6deg) scale(1.06); }
.seal svg{ width: 100%; height: 100%; overflow: visible; }
.seal .ring{ transform-origin: 80px 80px; animation: seal-spin 28s linear infinite; }
.seal:nth-child(2n) .ring{ animation-direction: reverse; animation-duration: 34s; }
.seal text{ font-family: var(--sans); fill: var(--cf-ink); }
.seal .ring text{ font-size: 11.5px; font-weight: 800; letter-spacing: .06em; }
.seal .big{ font-size: 40px; font-weight: 800; letter-spacing: -0.04em; text-anchor: middle; }
.seal .small{ font-size: 12px; font-weight: 600; text-anchor: middle; }
.seal .cf-head{ position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
@keyframes seal-spin{ to{ transform: rotate(360deg); } }

/* Privacy Facts: set like the US food label (bold rules of 1, 5 and 11 px, a black
   headline, one oversized lead row), upright, in Inter so every OS draws it the same.
   The rules print left to right when the panel comes into view. */
.facts-wrap{ position: relative; justify-self: end; width: min(400px, 100%); }
.facts{
  position: relative; z-index: 1; background: #fff; color: #0a0c16; padding: 10px 18px 14px;
  border: 1.5px solid #0a0c16; border-radius: 3px; font-family: var(--sans); font-feature-settings: "tnum" 1; container-type: inline-size;
  box-shadow: 0 1px 0 rgba(10,12,22,.04), 0 36px 70px -34px rgba(20,30,80,.38), 0 12px 24px -16px rgba(20,30,80,.16);
}
.facts .ln{ position: relative; padding-bottom: calc(var(--w, 1px) + 5px); margin-bottom: 0; }
.facts .ln::after{ content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: var(--w, 1px); background: #0a0c16;
  transform-origin: 0 50%; transform: scaleX(0); transition: transform .7s cubic-bezier(.65,0,.35,1) calc(.25s + var(--i, 0) * 70ms); }
.facts-wrap.in .ln::after{ transform: none; }
.facts .b5{ --w: 5px; }
.facts .b10{ --w: 11px; }
.facts h3{ font-size: 50px; font-size: 16cqi; line-height: .98; font-weight: 800; letter-spacing: -0.045em; padding-bottom: 6px; }
.facts .serv, .facts .lead-row, .facts dl div{ display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.facts .serv{ padding-top: 6px; font-size: 18px; font-weight: 800; letter-spacing: -0.01em; }
.facts .per{ padding-top: 6px; font-size: 13px; font-weight: 800; }
.facts .lead-row{ font-size: 32px; line-height: 1; font-weight: 800; letter-spacing: -0.03em; padding-top: 2px; }
.facts .lead-row b{ font-size: 46px; letter-spacing: -0.04em; }
.facts dl{ margin: 0; }
.facts dl div{ padding-top: 6px; font-size: 16px; }
.facts dt{ font-weight: 700; }
.facts dd{ margin: 0; font-weight: 800; }
.facts .foot-note{ padding-top: 8px; font-size: 12px; line-height: 1.45; color: #3a3f55; }
.cf-peek{ right: -22px; top: -92px; z-index: 0; }

@media (prefers-reduced-motion: reduce){
  .cf-sway, .seal .ring{ animation: none; }
  .facts .ln::after{ transform: none; transition: none; }
  .cf-stalk, .cf-leaf, .cf-svg .fo, .cf-svg .fi, .cf-svg .fd{ transition: none; }
}
@media (max-width: 900px){
  .free-grid{ grid-template-columns: 1fr; gap: 56px; }
  .facts-wrap{ justify-self: center; }
  .cf-hero{ right: 2%; bottom: -10px; }
}
@media (max-width: 600px){
  .seals{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .seal{ width: 100%; height: auto; aspect-ratio: 1; }
  .facts .lead-row{ font-size: 28px; }
  .facts .lead-row b{ font-size: 40px; }
  .end{ padding-bottom: 240px; }
  .meadow{ height: 210px; }
  .cf-hero{ right: -6%; }
  .cf-peek{ right: -6px; }
}
@media (max-width: 600px){ .cf-hero{ transform: scale(.7); transform-origin: 100% 100%; } }
.seal.rv{ transition: opacity .8s var(--ease), transform .6s cubic-bezier(.3,1.4,.5,1); transition-delay: calc(var(--d, 0) * 80ms); }
.seal.rv.in:hover{ transition-delay: 0s; }

/* Hero: a passport stamp, like the app's Travel mode. */
.stamp{
  position: absolute; z-index: 2; left: -4%; bottom: 11%; display: grid; gap: 2px; text-align: center;
  padding: 10px 16px; border: 2px solid var(--cf); border-radius: 12px; color: var(--cf);
  background: rgba(10,12,22,.62); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow: inset 0 0 0 3px rgba(10,12,22,.62), inset 0 0 0 4px rgba(169,189,255,.55), 0 20px 40px -20px rgba(0,0,0,.8);
  transform: rotate(-9deg); animation: stamp-in .5s cubic-bezier(.3,1.4,.5,1) 1.2s both;
}
.stamp span{ font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; opacity: .8; }
.stamp b{ font-size: 22px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; line-height: 1.1; }
@keyframes stamp-in{ 0%{ opacity: 0; transform: rotate(-9deg) scale(1.6); } 100%{ opacity: 1; transform: rotate(-9deg) scale(1); } }
@media (prefers-reduced-motion: reduce){ .stamp{ animation: none; } }
@media (max-width: 600px){ .stamp{ left: 0; bottom: 10%; padding: 8px 12px; } .stamp b{ font-size: 18px; } }

/* ---------- Liquid glass ---------- */
.glass{
  position: relative; isolation: isolate;
  background: linear-gradient(180deg, rgba(255,255,255,.085), rgba(255,255,255,.025));
  -webkit-backdrop-filter: blur(22px) saturate(170%); backdrop-filter: blur(22px) saturate(170%);
  border: 1px solid rgba(255,255,255,.13);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.24), inset 0 -1px 0 rgba(255,255,255,.05), 0 30px 80px -26px rgba(0,0,0,.7);
}
.glass::before{
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1;
  background:
    radial-gradient(120% 70% at 18% -20%, rgba(255,255,255,.14), transparent 55%),
    radial-gradient(70% 60% at 105% 115%, rgba(169,189,255,.12), transparent 60%);
}

.btn-glass{ background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); color: var(--ink); box-shadow: inset 0 1px 0 rgba(255,255,255,.14); }
.btn-glass:hover{ background: rgba(255,255,255,.1); }

/* ---------- Travel: where are you going? ---------- */
.travel{ position: relative; overflow: hidden; padding: 130px 0 30px; }
.stampfield{ position: absolute; inset: -10% -4%; display: grid; grid-template-columns: repeat(6, 1fr); gap: 26px; opacity: .5; pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse 75% 70% at 50% 50%, rgba(0,0,0,.25), #000 75%); mask-image: radial-gradient(ellipse 75% 70% at 50% 50%, rgba(0,0,0,.25), #000 75%); }
.stampcol{ display: flex; flex-direction: column; gap: 26px; animation: drift 70s linear infinite; }
.stampcol:nth-child(2n){ animation-direction: reverse; animation-duration: 85s; }
@keyframes drift{ from{ transform: translateY(0); } to{ transform: translateY(-50%); } }
.pstamp{
  align-self: center; display: grid; place-items: center; text-align: center; gap: 2px; padding: 14px 18px; min-width: 150px;
  font-family: var(--mono); text-transform: uppercase; color: var(--c, var(--cf)); opacity: .42;
  border: 2px solid currentColor; border-radius: 12px; box-shadow: inset 0 0 0 4px var(--bg), inset 0 0 0 5px currentColor;
  transform: rotate(var(--r, -6deg));
}
.pstamp b{ font-size: 18px; letter-spacing: .08em; }
.pstamp span{ font-size: 10px; letter-spacing: .2em; opacity: .85; }
.pstamp.round{ width: 150px; height: 150px; border-radius: 50%; padding: 0; }
.pstamp.oval{ border-radius: 999px; padding: 14px 26px; }

.go{ position: relative; z-index: 1; border-radius: 30px; padding: 14px; max-width: 1080px; margin: 0 auto; }
.go-top{ border-radius: 20px; padding: 34px 34px 30px; display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: end;
  background: rgba(10,12,22,.42); border: 1px solid rgba(255,255,255,.07); }
.go h2{ font-family: var(--serif); font-weight: 500; font-size: clamp(42px, 5.6vw, 78px); line-height: 1; letter-spacing: -0.02em; }
.go h2 em{ font-style: italic; color: var(--cf); }
.go-sub{ margin-top: 14px; font-size: 17px; color: var(--ink-2); max-width: 34em; }
.go-proof{ text-align: right; font-family: var(--mono); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.go-proof b{ display: block; font-family: var(--serif); font-size: 46px; font-weight: 500; letter-spacing: -0.01em; text-transform: none; color: var(--ink); line-height: 1; margin-bottom: 6px; }
.go-form{ padding: 22px 20px 6px; }
.go-form label{ display: block; font-size: 14px; color: var(--ink-2); margin-bottom: 10px; }
.go-row{ display: grid; grid-template-columns: 1fr auto; gap: 12px; position: relative; }
.go-input{ position: relative; }
.go-input svg{ position: absolute; left: 16px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--ink-3); pointer-events: none; }
#go-input{
  width: 100%; height: 56px; border-radius: 14px; padding: 0 16px 0 46px; font-size: 16px; color: var(--ink);
  background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.12); box-shadow: inset 0 2px 8px rgba(0,0,0,.35);
  transition: border-color .2s, box-shadow .2s;
}
#go-input::placeholder{ color: var(--ink-4); }
#go-input:focus{ outline: none; border-color: rgba(169,189,255,.6); box-shadow: inset 0 2px 8px rgba(0,0,0,.35), 0 0 0 4px rgba(169,189,255,.15); }
.go-row .btn{ height: 56px; padding: 0 28px; }
#go-list{ position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 5; list-style: none; padding: 6px; border-radius: 14px;
  background: #12141f; border: 1px solid var(--line-2); box-shadow: 0 24px 50px -20px rgba(0,0,0,.8); }
#go-list[hidden]{ display: none; }
#go-list li{ display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 10px; cursor: pointer; font-size: 15px; }
#go-list li:hover, #go-list li.on{ background: rgba(169,189,255,.12); }
.go-code{ font-family: var(--mono); font-size: 12px; letter-spacing: .08em; color: var(--cf); border: 1px solid rgba(169,189,255,.4); border-radius: 6px; padding: 2px 6px; }
.go-mini{ margin-left: auto; font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--jade); }
.go-chips{ display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; padding-bottom: 14px; }
.go-chips span{ font-size: 13.5px; color: var(--ink-3); margin-right: 4px; align-self: center; }
.go-chips button{ min-height: 36px; padding: 0 14px; border-radius: 999px; font-size: 14px; cursor: pointer; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); color: var(--ink-2); transition: background .2s, color .2s; }
.go-chips button:hover{ background: rgba(169,189,255,.14); color: var(--ink); }
#go-result{ padding: 0 20px 20px; }
#go-result[hidden]{ display: none; }
.go-card{ border-radius: 18px; padding: 24px; background: rgba(10,12,22,.55); border: 1px solid rgba(169,189,255,.22); opacity: 0; transform: translateY(8px); transition: opacity .4s var(--ease), transform .4s var(--ease); }
.go-card.in{ opacity: 1; transform: none; }
.go-hd{ display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.go-name{ font-family: var(--serif); font-weight: 500; font-size: 32px; letter-spacing: -0.01em; }
.go-badge{ font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--ink-3); }
.go-badge--ok{ color: var(--jade); border-color: rgba(116,211,166,.45); }
.go-notes{ margin: 18px 0 0; padding-left: 0; list-style: none; counter-reset: n; display: grid; gap: 12px; }
.go-notes li{ counter-increment: n; display: grid; grid-template-columns: 28px 1fr; gap: 10px; font-size: 16px; line-height: 1.55; color: var(--ink-2); }
.go-notes li::before{ content: counter(n); font-family: var(--mono); font-size: 12px; color: var(--cf); width: 24px; height: 24px; border-radius: 50%; border: 1px solid rgba(169,189,255,.45); display: grid; place-items: center; }
.go-note{ margin-top: 14px; color: var(--ink-2); }
.go-how{ margin-top: 18px; padding-top: 16px; border-top: 1px dashed var(--line-2); font-size: 15px; color: var(--ink-3); }
.go-live{ margin-top: 12px; display: flex; gap: 10px; align-items: baseline; font-family: var(--mono); font-size: 12.5px; color: var(--jade); }
.go-live--none{ color: var(--ink-3); }
.go-dot{ width: 8px; height: 8px; border-radius: 50%; background: var(--jade); box-shadow: 0 0 0 4px rgba(116,211,166,.18); flex: none; transform: translateY(-1px); }
.go-cta{ display: flex; gap: 10px; flex-wrap: wrap; margin-top: 20px; }
.hero-foot{ position: relative; z-index: 1; display: flex; justify-content: center; margin-top: 26px; }
.hero-foot a{ display: inline-flex; align-items: center; gap: 12px; padding: 10px 16px; border-radius: 999px; font-size: 14px; color: var(--ink-2); }
.hero-foot svg{ width: 16px; height: 16px; color: var(--ink-3); }


/* ---------- The app (ported dashboard) ---------- */
.app-grid{ display: grid; grid-template-columns: auto 1fr; gap: 90px; align-items: center; }
.app-phone{ position: relative; width: 320px; aspect-ratio: 9 / 19.5; border-radius: 50px; padding: 10px;
  background: linear-gradient(160deg, #2b2e36, #0c0e14 42%, #1c1f27);
  box-shadow: 0 0 0 1px rgba(255,255,255,.1) inset, 0 60px 120px -40px rgba(0,0,0,.95), 0 30px 90px -40px rgba(91,124,240,.5); }
.ap-screen{ position: relative; height: 100%; border-radius: 41px; overflow: hidden; background: #000; }
.ap-screen::before{ content: ""; position: absolute; top: 11px; left: 50%; transform: translateX(-50%); width: 34%; height: 25px; border-radius: 999px; background: #000; z-index: 9; box-shadow: 0 0 0 1px rgba(255,255,255,.04); }
.ap-wash{ position: absolute; inset: 0 0 auto; height: 55%; background: linear-gradient(#101e3e, transparent); opacity: 0; transition: opacity .9s; }
.ap-dust{ position: absolute; inset: 0; opacity: .5;
  background-image: radial-gradient(circle, rgba(255,255,255,.55) .7px, transparent 1.2px), radial-gradient(circle, rgba(255,255,255,.35) .6px, transparent 1px);
  background-size: 53px 61px, 37px 43px; background-position: 0 0, 19px 23px; animation: dust 40s linear infinite; }
@keyframes dust{ to{ background-position: 0 -610px, 19px -407px; } }
.ap-ui{ position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; padding: 46px 18px 54px; }
.ap-top{ display: flex; align-items: center; gap: 7px; }
.ap-top img{ width: 18px; height: 18px; opacity: .95; }
.ap-top b{ font-size: 13px; font-weight: 600; letter-spacing: 1.3px; color: rgba(255,255,255,.9); }
.ap-banner{ margin-top: 10px; border-radius: 14px; padding: 10px 12px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); display: grid; gap: 2px; }
.ap-banner b{ font-size: 12px; font-weight: 600; }
.ap-banner span{ font-size: 11px; line-height: 1.4; color: rgba(255,255,255,.6); }
.ap-banner em{ font-style: normal; font-size: 11px; font-weight: 600; color: var(--cf); margin-top: 3px; }
.ap-loc{ align-self: center; margin-top: auto; display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px; border-radius: 999px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); font-size: 12.5px; font-weight: 500; color: rgba(255,255,255,.9); }
.ap-loc svg{ width: 14px; height: 14px; }
.ap-loc .bolt{ color: var(--cf); }
.ap-loc i{ font-style: normal; color: rgba(255,255,255,.5); }
.ap-loc .chev{ color: rgba(255,255,255,.35); width: 12px; height: 12px; }
.ap-flower{ position: relative; align-self: center; margin-top: 14px; background: none; border: 0; cursor: pointer; display: grid; justify-items: center; -webkit-tap-highlight-color: transparent; }
.ap-head{ position: relative; z-index: 1; line-height: 0; transition: transform .6s var(--ease); }
.ap-stalk{ margin-top: -8px; line-height: 0; }
.ap-stalk .cf-stalk{ stroke-dashoffset: 0; }
.ap-stalk .cf-leaf{ opacity: 1; }
.ap-flower .fo, .ap-flower .fi{ transform-box: fill-box; transform-origin: 50% 100%; transition: transform .9s cubic-bezier(.34,1.56,.64,1); transition-delay: calc(var(--i) * 22ms); }
.ap-flower .fd{ transform-box: fill-box; transform-origin: 50% 50%; transition: transform .6s var(--ease); }
.app-phone[data-state="off"] .ap-flower .fo{ transform: scale(.3); }
.app-phone[data-state="off"] .ap-flower .fi{ transform: scale(.55); }
.app-phone[data-state="busy"] .ap-flower .fo{ animation: bud 1.2s ease-in-out infinite; transform: scale(.6); }
.app-phone[data-state="busy"] .ap-flower .fi{ transform: scale(.8); }
.app-phone[data-state="on"] .ap-flower .fo, .app-phone[data-state="on"] .ap-flower .fi, .app-phone[data-state="on"] .ap-flower .fd{ transform: scale(1); }
.app-phone[data-state="on"] .ap-head{ animation: breathe 3.4s ease-in-out infinite alternate; }
@keyframes bud{ 0%,100%{ transform: scale(.54); } 50%{ transform: scale(.66); } }
@keyframes breathe{ from{ transform: scale(1); } to{ transform: scale(1.015); } }
.ap-rings{ position: absolute; left: 50%; top: 2px; width: 92px; height: 92px; transform: translateX(-50%); pointer-events: none; }
.ap-rings i{ position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid rgba(169,189,255,.55); animation: ring 1.8s ease-out infinite; }
.ap-rings i + i{ animation-delay: .9s; }
@keyframes ring{ from{ transform: scale(.72); opacity: .5; } to{ transform: scale(1.5); opacity: 0; } }
.app-phone.used .ap-rings, .app-phone[data-state="on"] .ap-rings{ display: none; }
.ap-status{ text-align: center; margin-top: 18px; display: grid; gap: 6px; }
.ap-status b{ font-size: 21px; font-weight: 600; color: rgba(255,255,255,.95); }
.ap-status span{ font-size: 12.5px; color: rgba(255,255,255,.5); }
.ap-status span.mono{ font-family: var(--mono); }
.ap-spacer{ flex: 1; }
.ap-handle{ position: absolute; right: 6px; top: 50%; transform: translateY(-50%); z-index: 3; display: grid; gap: 7px; justify-items: center; padding: 12px 7px; border-radius: 999px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); }
.ap-handle svg{ width: 13px; height: 13px; color: rgba(255,255,255,.7); }
.ap-handle .bolt{ color: var(--cf); }
.ap-meadow{ position: absolute; left: 0; right: 0; bottom: 0; height: 17%; z-index: 1; }
.ap-grass{ position: absolute; inset: 0; width: 100%; height: 100%; }
.ap-grass path{ fill: none; stroke: #4c5a60; stroke-width: 1.3; stroke-linecap: round; transition: stroke .9s; }
.app-phone[data-state="on"] .ap-grass path{ stroke: #74d3a6; }
.app-phone[data-state="on"] .ap-wash{ opacity: .45; }
.ap-mini{ position: absolute; bottom: 30%; transform: translateX(-50%); line-height: 0; }
.ap-mini .fo, .ap-mini .fi, .ap-mini .fd{ transform-box: fill-box; transform-origin: 50% 100%; transform: scale(0); transition: transform .8s cubic-bezier(.34,1.56,.64,1) calc(.4s + var(--k, 0) * 120ms); }
.app-phone[data-state="on"] .ap-mini .fo, .app-phone[data-state="on"] .ap-mini .fi, .app-phone[data-state="on"] .ap-mini .fd{ transform: scale(1); }
.ap-meadow .ff{ position: absolute; width: 4px; height: 4px; border-radius: 50%; background: #c9f5df; box-shadow: 0 0 8px 2px rgba(116,211,166,.8); opacity: 0; }
.app-phone[data-state="on"] .ap-meadow .ff{ animation: firefly 4s ease-in-out infinite; }
.ap-meadow .ff:nth-of-type(1){ left: 20%; bottom: 70%; } .ap-meadow .ff:nth-of-type(2){ left: 48%; bottom: 90%; animation-delay: -1s; }
.ap-meadow .ff:nth-of-type(3){ left: 68%; bottom: 60%; animation-delay: -2s; } .ap-meadow .ff:nth-of-type(4){ left: 85%; bottom: 85%; animation-delay: -3s; }
@keyframes firefly{ 0%,100%{ opacity: 0; transform: translate(0,0); } 40%{ opacity: 1; } 50%{ transform: translate(6px,-10px); } 80%{ opacity: .6; } }
.app-caption{ margin-top: 16px; text-align: center; font-family: var(--mono); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-4); }

/* Round flags (circle-flags, the same set the dashboard uses). */
.go-flag{ width: 24px; height: 24px; border-radius: 50%; flex: none; box-shadow: 0 0 0 1px rgba(255,255,255,.18); }
.go-flag--lg{ width: 36px; height: 36px; }
.go-chips button{ display: inline-flex; align-items: center; gap: 8px; padding: 0 14px 0 8px; }
.go-chips button img{ width: 18px; height: 18px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(255,255,255,.18); }

.ap-stalk .cf-stem{ position: relative; left: auto; bottom: auto; transform: none; display: block; }
.stampfield{ opacity: .38; }
#go-list{ background: #12141f; }

/* Hero: the ported app stands where the mockup was. */
.hero-visual .app-phone{ position: relative; z-index: 1; width: 330px; }
.hero-visual .app-caption{ position: absolute; bottom: -34px; left: 0; right: 0; }
/* Features without phones: three cards. */
.feat-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 56px; }
.feat{ border: 1px solid var(--line-2); border-radius: var(--radius); padding: 28px; background: var(--bg-2); display: flex; flex-direction: column; }
.feat .n{ font-size: 13px; font-weight: 600; color: var(--ink-4); margin-bottom: 18px; font-variant-numeric: tabular-nums; }
.feat h3{ font-size: 24px; line-height: 1.1; letter-spacing: -0.03em; font-weight: 700; margin-bottom: 12px; }
.feat p{ font-size: 16px; line-height: 1.6; color: var(--ink-2); }
.feat .more{ display: inline-flex; gap: 8px; margin-top: auto; padding-top: 18px; color: var(--cf); font-weight: 600; }
@media (prefers-reduced-motion: reduce){
  .stampcol, .ap-dust, .ap-rings i, .ap-meadow .ff, .app-phone[data-state="on"] .ap-head, .app-phone[data-state="busy"] .ap-flower .fo{ animation: none !important; }
}
@media (max-width: 900px){
  .stampfield{ grid-template-columns: repeat(3, 1fr); }
  .go-top{ grid-template-columns: 1fr; padding: 26px 22px 22px; }
  .go-proof{ text-align: left; }
  .feat-grid{ grid-template-columns: 1fr; }
}
@media (max-width: 600px){
  .travel{ padding-top: 96px; }
  .go{ padding: 8px; border-radius: 24px; }
  .go-top{ border-radius: 18px; }
  .go-form{ padding: 18px 10px 4px; }
  .go-row{ grid-template-columns: 1fr; }
  .go-row .btn{ width: 100%; }
  #go-result{ padding: 0 8px 10px; }
  .go-card{ padding: 18px; }
  .go-name{ font-size: 26px; }
  .go-proof b{ font-size: 36px; }
  .pstamp{ min-width: 120px; padding: 10px 12px; } .pstamp b{ font-size: 14px; } .pstamp.round{ width: 120px; height: 120px; }
  .hero-visual .app-phone{ width: min(290px, 78vw); }
}
/* Hero chips sit beside the phone, never over the app's own banner. */
.hero-visual .f1{ top: 34%; left: -16%; }
.hero-visual .f2{ top: auto; bottom: 30%; right: -15%; }
@media (max-width: 900px){
  .hero-visual .f1{ left: -2%; } .hero-visual .f2{ right: -2%; }
}
@media (max-width: 600px){
  .hero-visual .float{ display: none; }
  .stampcol{ animation: none; }
}
@media (max-width: 600px){ .hero-visual .stamp{ bottom: 2%; left: -3%; } }

/* ==========================================================
   Original flower design (Cicekler / Cornflower Splash)
   ========================================================== */
.cf-stalk{ stroke: #3FA46F; }
.cf-leaf{ fill: #2FCB7A; stroke: none; opacity: 0; transition: opacity .8s .6s; }
.cf-aura{ opacity: 0; transition: opacity .9s 1.2s; }
.cf-plant.in .cf-aura{ opacity: .75; }

/* The connect flower: wilted while exposed, lifting while it connects, in bloom once protected. */
.ap-head{ line-height: 0; }
.ap-head .cp{ width: 150px; height: auto; display: block; overflow: visible; }
.ap-flower::before{ content: ""; position: absolute; left: 50%; top: 36%; width: 260px; height: 260px; transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(circle, rgba(46,91,255,.30), transparent 65%); opacity: .17; transition: opacity .6s; pointer-events: none; }
.app-phone[data-state="busy"] .ap-flower::before{ opacity: .47; }
.app-phone[data-state="on"] .ap-flower::before{ opacity: 1; }
.ap-rings{ top: 30px; }
.cp-pool{ fill: rgba(63,164,111,.30); }
.cp-sprout{ transform-box: fill-box; transform-origin: 50% 100%; animation: akca-sprout .9s cubic-bezier(.34,1.56,.64,1) .2s both; }
.cp-sway{ transform-box: fill-box; transform-origin: 50% 100%; animation: akca-sway-a 4.6s ease-in-out infinite; }
.app-phone[data-state="on"] .cp-sway{ animation-duration: 3.1s; }
.cp-lean{ transform-box: fill-box; transform-origin: 50% 100%; transform: rotate(5deg); transition: transform .8s cubic-bezier(.34,1.56,.64,1); }
.cp-stem{ fill: none; stroke: #4F6355; stroke-width: 8; stroke-linecap: round; transition: stroke .5s; }
.cp-leaf{ fill: #55705F; transform-box: fill-box; transition: fill .5s, transform .8s cubic-bezier(.34,1.56,.64,1); }
.cp-leaf1{ transform-origin: 100% 20%; transform: rotate(26deg); }
.cp-leaf2{ transform-origin: 0% 20%; transform: rotate(-24deg); transition-delay: 0s, 80ms; }
.cp-head{ transform-box: fill-box; transform-origin: 50% 60%; transform: rotate(132deg); transition: transform .9s cubic-bezier(.34,1.56,.64,1); }
.cp-bob{ transform-box: fill-box; transform-origin: 50% 80%; animation: akca-bob 3.6s ease-in-out -1.2s infinite; }
.cp-o{ fill: #44536F; opacity: .85; transform-box: fill-box; transform-origin: 50% 100%; transform: scale(.36);
  transition: transform .56s cubic-bezier(.34,1.56,.64,1) calc(var(--k) * 42ms), fill .45s calc(var(--k) * 30ms), opacity .32s; }
.cp-i{ fill: #333F58; opacity: .8; transform-box: fill-box; transform-origin: 50% 100%; transform: scale(.22);
  transition: transform .52s cubic-bezier(.34,1.56,.64,1) calc(260ms + var(--k) * 38ms), fill .45s calc(260ms + var(--k) * 30ms), opacity .32s; }
.cp-disc{ fill: #0B0B0C; stroke: #44536F; stroke-width: 3; transform-box: fill-box; transform-origin: 50% 50%; transform: scale(.68); transition: transform .45s, stroke .45s; }
.cp-dots{ opacity: 0; transition: opacity .4s .62s; }
.app-phone[data-state="busy"] .cp-lean{ transform: rotate(2deg); }
.app-phone[data-state="busy"] .cp-stem{ stroke: #4A8A66; }
.app-phone[data-state="busy"] .cp-leaf{ fill: #3E9B63; }
.app-phone[data-state="busy"] .cp-head{ transform: rotate(52deg); }
.app-phone[data-state="busy"] .cp-o{ fill: #3D5A9E; }
.app-phone[data-state="busy"] .cp-disc{ stroke: #5C82FF; animation: akca-pulse .9s ease-in-out infinite; }
.app-phone[data-state="on"] .cp-lean{ transform: rotate(0deg); }
.app-phone[data-state="on"] .cp-stem{ stroke: #3FA46F; }
.app-phone[data-state="on"] .cp-leaf{ fill: #2FCB7A; transform: rotate(0deg); }
.app-phone[data-state="on"] .cp-head{ transform: rotate(0deg); }
.app-phone[data-state="on"] .cp-o{ fill: #5C82FF; opacity: 1; transform: scale(.95); }
.app-phone[data-state="on"] .cp-i{ fill: #1F45D6; opacity: 1; transform: scale(.52); }
.app-phone[data-state="on"] .cp-disc{ stroke: #5C82FF; transform: scale(1); }
.app-phone[data-state="on"] .cp-dots{ opacity: 1; }
/* The garden that sprouts once protected. */
.ap-garden{ position: absolute; left: 0; right: 0; bottom: 0; height: 230%; opacity: 0; transition: opacity .4s; pointer-events: none; }
.ap-garden svg{ width: 100%; height: 100%; display: block; }
.gp{ transform-box: fill-box; transform-origin: 50% 100%; transform: scale(.4, 0); }
.app-phone[data-state="on"] .ap-garden{ opacity: 1; }
.app-phone[data-state="on"] .gp{ animation: akca-sprout .8s cubic-bezier(.34,1.56,.64,1) var(--gd) both; }
.gp-sway{ transform-box: fill-box; transform-origin: 50% 100%; animation: akca-sway-a var(--sd) ease-in-out var(--sdl) infinite; }
.gp-sway.gp-b{ animation-name: akca-sway-b; }
.gp-bob{ transform-box: fill-box; transform-origin: 50% 85%; animation: akca-bob var(--sd) ease-in-out infinite; }
@keyframes akca-sprout{ 0%{ transform: scale(.4, 0); opacity: 0; } 55%{ transform: scale(1.04, 1.12); opacity: 1; } 78%{ transform: scale(.98, .94); } 100%{ transform: scale(1, 1); opacity: 1; } }
@keyframes akca-sway-a{ 0%, 100%{ transform: rotate(-2.4deg); } 50%{ transform: rotate(2.8deg); } }
@keyframes akca-sway-b{ 0%, 100%{ transform: rotate(3deg); } 50%{ transform: rotate(-2deg); } }
@keyframes akca-bob{ 0%, 100%{ transform: rotate(-3.2deg); } 50%{ transform: rotate(4deg); } }
@keyframes akca-pulse{ 0%, 100%{ opacity: 1; } 50%{ opacity: .35; } }

/* The splash: the line draws itself, then the cornflower opens at its tip. */
.sig{ display: block; width: 210px; height: auto; margin: 0 auto 18px; overflow: visible; position: relative; }
.sig-line{ fill: none; stroke: #FBF8F1; stroke-width: 15; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1000; stroke-dashoffset: 1000; transition: stroke-dashoffset 1.15s cubic-bezier(.65,0,.35,1) .1s; }
.sig.in .sig-line{ stroke-dashoffset: 0; }
.sig .fo, .sig .fi{ transform-box: fill-box; transform-origin: 50% 100%; transform: scale(0); transition: transform .6s cubic-bezier(.34,1.56,.64,1); }
.sig .fo{ transition-delay: calc(1.1s + var(--i) * 38ms); }
.sig .fi{ transition-delay: calc(1.4s + var(--i) * 45ms); }
.sig .fd{ transform-box: fill-box; transform-origin: 50% 50%; transform: scale(0); transition: transform .5s cubic-bezier(.34,1.56,.64,1) 1.65s; }
.sig.in .fo, .sig.in .fi, .sig.in .fd{ transform: scale(1); }
.sig-glow{ opacity: 0; transition: opacity .9s 1.6s; }
.sig.in .sig-glow{ opacity: .75; }
.sig-flower{ transform-box: fill-box; transform-origin: 50% 50%; }
.sig.in .sig-flower{ animation: sig-breath 4.4s ease-in-out 2.4s infinite; }
@keyframes sig-breath{ 0%, 100%{ transform: scale(1) rotate(-1.4deg); } 50%{ transform: scale(1.02) rotate(1.4deg); } }

/* Stamps carry the A mark in their ink, not the word. */
.pmark{ display: block; width: 22px; height: 22px; background: currentColor;
  -webkit-mask: url(/assets/akca-mark-white.png) center / contain no-repeat; mask: url(/assets/akca-mark-white.png) center / contain no-repeat; }
.pstamp .pmark{ margin-bottom: 2px; }
.stamp-top{ display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.stamp .pmark{ width: 14px; height: 14px; }

/* The nav: a glass island in the middle, like the app's tab capsule. */
.nav{ background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom: 0; }
.nav::before{ content: ""; position: absolute; inset: 0 0 -24px; pointer-events: none;
  background: linear-gradient(rgba(10,12,22,.92), rgba(10,12,22,.55) 60%, rgba(10,12,22,0)); }
.nav-in{ position: relative; }
.nav-links{ margin: 0 auto; gap: 2px; padding: 4px; border-radius: 999px; font-size: 14.5px; }
.nav-links a{ padding: 8px 16px; border-radius: 999px; transition: background .2s, color .2s; }
.nav-links a:hover, .nav-links a.on{ background: rgba(255,255,255,.1); color: var(--ink); }
.nav-cta{ margin-left: 0; }

/* AkcaVPN+ the way the app writes it: the mark, VPN, and a + that glows. */
.akplus{ display: inline-flex; align-items: center; gap: 9px; }
.akplus img{ width: 26px; height: 26px; }
.akplus b{ font-weight: 600; letter-spacing: .09em; }
.gplus{ font-style: normal; font-weight: 900; color: #fff; display: inline-block; transform: translateY(-.06em);
  animation: plus-glow 1.6s ease-in-out infinite alternate; }
.akplus .gplus{ font-size: 1.3em; margin-left: -3px; }
.btn-primary .gplus{ color: inherit; animation: none; text-shadow: none; }
@keyframes plus-glow{ from{ text-shadow: 0 0 4px rgba(255,255,255,.4); } to{ text-shadow: 0 0 10px rgba(255,255,255,.9), 0 0 2px rgba(255,255,255,.9); } }
@media (prefers-reduced-motion: reduce){
  .gplus{ animation: none; text-shadow: 0 0 6px rgba(255,255,255,.6); }
  .cp-sprout, .cp-sway, .cp-bob, .gp, .gp-sway, .gp-bob, .sig.in .sig-flower{ animation: none !important; }
  .sig-line{ transition: none; }
}
@media (max-width: 900px){
  .nav-links{ display: none; }
}
@media (max-width: 600px){
  .sig{ width: 170px; }
  .ap-head .cp{ width: 132px; }
}
.ap-garden{ height: 165%; }
.btn .gplus{ margin-left: -10px; }
@media (max-width: 900px){ .cf-perch{ display: none; } }
@media (max-width: 600px){ .ap-garden{ height: 120%; } }

/* ==========================================================
   Travel: a passport visa page behind the destination check
   ========================================================== */
.travel{ padding: 150px 0 140px; }
.visa{ position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.visa-print{ position: absolute; inset: 0; width: 100%; height: 100%; }
.visa-waves path{ fill: none; stroke: rgba(169,189,255,.075); stroke-width: 1; }
.visa-rose{ fill: none; stroke: rgba(169,189,255,.1); stroke-width: .9; }
.visa-head{ position: absolute; top: 104px; left: 4%; right: 4%; display: flex; justify-content: space-between;
  font-family: var(--mono); font-size: 11px; letter-spacing: .32em; color: rgba(169,189,255,.42); }
.visa-micro{ position: absolute; left: 0; right: 0; white-space: nowrap; overflow: hidden; font-family: var(--mono); font-size: 7.5px; letter-spacing: .38em; color: rgba(169,189,255,.24); }
.visa-micro--top{ top: 88px; } .visa-micro--bot{ bottom: 78px; }
.visa-mrz{ position: absolute; left: 4%; right: 4%; bottom: 18px; display: grid; gap: 6px; overflow: hidden; white-space: nowrap;
  font-family: var(--mono); font-size: clamp(11px, 1.25vw, 17px); letter-spacing: .34em; color: rgba(233,227,214,.17); }
.vst{ position: absolute; opacity: 0; transform: scale(1.6) rotate(calc(var(--r) + 10deg)); filter: blur(3px); mix-blend-mode: screen;
  transition: transform .34s cubic-bezier(.2,1.45,.4,1) var(--dl), opacity .14s var(--dl), filter .3s var(--dl); }
.visa.in .vst{ opacity: .66; transform: scale(1) rotate(var(--r)); filter: blur(0); }
.vst svg{ display: block; width: 100%; height: auto; overflow: visible; }
.vst text{ text-transform: uppercase; }

/* The app's top bar for an AkcaVPN+ member: the mark, VPN, and the glowing +. */
.ap-plus{ font-style: normal; font-size: 17px; font-weight: 900; color: #fff; line-height: 1; transform: translateY(-2px); animation: plus-glow 1.6s ease-in-out infinite alternate; }
.ap-top{ gap: 6px; }

@media (prefers-reduced-motion: reduce){
  .vst{ transition: none; opacity: .66; transform: rotate(var(--r)); filter: none; }
  .ap-plus{ animation: none; text-shadow: 0 0 6px rgba(255,255,255,.7); }
}
@media (max-width: 600px){
  .travel{ padding: 112px 0 120px; }
  .visa-head{ top: 70px; font-size: 9.5px; letter-spacing: .24em; }
  .visa-micro--top{ top: 56px; }
  .visa-mrz{ font-size: 10px; letter-spacing: .2em; bottom: 14px; }
}

/* ---------- Travel opening (sp3nd-style): capsule → panel ---------- */
.go.opening{ transition: clip-path .85s cubic-bezier(.22,1,.36,1); }
.go > :not(.go-pill){ transition: opacity .5s var(--ease), transform .6s var(--ease); }
.go.closed > :not(.go-pill){ opacity: 0; transform: translateY(12px); }
.go.opened > .go-top{ transition-delay: 0s; } .go.opened > .go-form{ transition-delay: .08s; } .go.opened > #go-result{ transition-delay: .16s; }
.go-pill{ position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; gap: 10px; pointer-events: none;
  font-family: var(--serif); font-size: 24px; color: var(--ink); opacity: 0; transition: opacity .25s; }
.go-pill svg{ width: 20px; height: 20px; color: var(--cf); }
.go.closed .go-pill{ opacity: 1; }
.go.opening .go-pill{ opacity: 0; transition-delay: .1s; }

/* The search bar types destinations after "Where to?". */
.go-input .go-ghost{ position: absolute; left: 46px; right: 16px; top: 50%; transform: translateY(-50%); pointer-events: none; white-space: nowrap; overflow: hidden;
  font-size: 16px; color: var(--ink-4); display: flex; align-items: center; gap: 0; opacity: 0; transition: opacity .2s; }
.go-input .go-ghost-q{ margin-right: 6px; }
.go-input .go-ghost-t{ color: var(--ink); }
.go-caret{ display: inline-block; width: 2px; height: 1.1em; margin-left: 2px; background: var(--cf); animation: caret 1s steps(1) infinite; }
@keyframes caret{ 50%{ opacity: 0; } }
#go-input.ghosting::placeholder{ color: transparent; }
#go-input.ghosting + .go-ghost, .go-ghost:not(.off){ }
.go-ghost.off{ opacity: 0 !important; }
#go-input.ghosting ~ .go-ghost{ opacity: 1; }

/* Flight trails across the visa page. */
.visa-routes .route{ fill: none; stroke: rgba(169,189,255,.22); stroke-width: 1.4; stroke-dasharray: 2 10; stroke-linecap: round; }
.visa-routes .comet{ fill: none; stroke: #d6e2ff; stroke-width: 2.6; stroke-linecap: round; stroke-dasharray: 60 940; stroke-dashoffset: 1000; opacity: .8;
  filter: drop-shadow(0 0 6px rgba(169,189,255,.9)); animation: comet var(--dur) linear var(--del) infinite; }
@keyframes comet{ from{ stroke-dashoffset: 1000; } to{ stroke-dashoffset: 0; } }
/* The page fades in as the panel opens; the stamps land after it. */
.visa{ opacity: 0; transition: opacity .9s var(--ease) .2s; }
.visa.in{ opacity: 1; }
.visa .vst{ transition-delay: calc(var(--dl) + 900ms); }
@media (prefers-reduced-motion: reduce){
  .visa{ opacity: 1; transition: none; }
  .visa-routes .comet{ animation: none; opacity: 0; }
  .go-caret{ animation: none; }
}

/* ==========================================================
   Travel, light: a white page in the dark site (Ping-smooth, sp3nd's type),
   blue/pink/orange cornflowers on looping green stems.
   ========================================================== */
.travel.light{
  --lt-ink: #0a0c16; --lt-2: #3a3f55; --lt-3: #6b7088; --lt-line: rgba(10,12,22,.09); --lt-blue: #2E5BFF;
  margin: 40px 12px 0; border-radius: 40px; color: var(--lt-ink);
  background: radial-gradient(ellipse 70% 55% at 50% 0%, #eef2ff, transparent 70%), #ffffff;
}
.travel.light .glass{ background: rgba(255,255,255,.72); border-color: rgba(10,12,22,.08);
  -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 40px 90px -40px rgba(30,50,140,.35), 0 2px 8px rgba(10,12,22,.04); }
.travel.light .glass::before{ background: radial-gradient(120% 70% at 15% -20%, rgba(46,91,255,.06), transparent 55%); }
.travel.light .go-top{ background: linear-gradient(180deg, #f5f7ff, #fbfcff); border-color: rgba(46,91,255,.08); grid-template-columns: 1fr 300px; align-items: center; padding: 30px 34px; }
.travel.light .go h2{ font-family: var(--sans); font-weight: 700; font-size: clamp(38px, 4.6vw, 64px); line-height: 1.02; letter-spacing: -0.035em; color: var(--lt-ink); }
.travel.light .go h2 em{ font-style: normal; color: var(--lt-blue); }
.travel.light .go-pill{ font-family: var(--sans); font-weight: 700; font-size: 20px; color: var(--lt-ink); }
.travel.light .go-pill svg{ color: var(--lt-blue); }
/* Destinations running upward, like Ping's list. */
.go-dest{ height: 168px; overflow: hidden; position: relative;
  -webkit-mask-image: linear-gradient(transparent, #000 22%, #000 78%, transparent); mask-image: linear-gradient(transparent, #000 22%, #000 78%, transparent); }
.go-dest-track{ display: flex; flex-direction: column; align-items: flex-end; gap: 10px; animation: dest-run 26s linear infinite; }
.go-dest-dup{ display: contents; }
.go-dest:hover .go-dest-track, .go-dest:focus-within .go-dest-track{ animation-play-state: paused; }
@keyframes dest-run{ from{ transform: translateY(0); } to{ transform: translateY(calc(-50% - 5px)); } }
.dest{ display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px 8px 8px; border-radius: 14px; cursor: pointer;
  background: #fff; border: 1px solid var(--lt-line); box-shadow: 0 8px 20px -12px rgba(30,50,140,.35); font: 600 16px/1 var(--sans); color: var(--lt-ink);
  transition: transform .25s var(--ease), box-shadow .25s; }
.dest:hover{ transform: translateX(-4px); box-shadow: 0 12px 26px -12px rgba(30,50,140,.5); }
.dest img{ width: 26px; height: 26px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(10,12,22,.08); }
.dest-ok{ font: 700 10px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: #12704a; background: #e7f7ef; padding: 4px 6px; border-radius: 6px; }
/* Form on white. */
.travel.light .go-form label{ color: var(--lt-2); }
.travel.light #go-input{ background: #f3f5fb; border-color: rgba(10,12,22,.1); color: var(--lt-ink); box-shadow: inset 0 1px 2px rgba(10,12,22,.04); }
.travel.light #go-input:focus{ border-color: rgba(46,91,255,.55); box-shadow: 0 0 0 4px rgba(46,91,255,.12); }
.travel.light .go-input svg{ color: var(--lt-3); }
.travel.light .go-input .go-ghost{ color: var(--lt-3); }
.travel.light .go-input .go-ghost-t{ color: var(--lt-ink); }
.travel.light .go-caret{ background: var(--lt-blue); }
.travel.light .btn-primary{ background: var(--lt-blue); color: #fff; box-shadow: 0 12px 30px -12px rgba(46,91,255,.8), inset 0 1px 0 rgba(255,255,255,.25); }
.travel.light .btn-primary:hover{ background: #2148e0; }
.travel.light .btn-glass{ background: #fff; border-color: var(--lt-line); color: var(--lt-ink); box-shadow: 0 6px 16px -10px rgba(30,50,140,.4); }
.travel.light #go-list{ background: #fff; border-color: var(--lt-line); box-shadow: 0 24px 50px -20px rgba(30,50,140,.35); }
.travel.light #go-list li{ color: var(--lt-ink); }
.travel.light #go-list li:hover, .travel.light #go-list li.on{ background: #eef2ff; }
.travel.light .go-mini{ color: #12704a; }
.travel.light .go-card{ background: #fff; border-color: rgba(46,91,255,.16); box-shadow: 0 20px 50px -30px rgba(30,50,140,.4); }
.travel.light .go-name{ font-family: var(--sans); font-weight: 700; letter-spacing: -0.02em; color: var(--lt-ink); }
.travel.light .go-badge{ color: var(--lt-3); border-color: var(--lt-line); }
.travel.light .go-badge--ok{ color: #12704a; border-color: rgba(18,112,74,.35); background: #e7f7ef; }
.travel.light .go-notes li{ color: var(--lt-2); }
.travel.light .go-notes li::before{ color: var(--lt-blue); border-color: rgba(46,91,255,.35); }
.travel.light .go-how{ color: var(--lt-3); border-color: var(--lt-line); }
.travel.light .go-live{ color: #12704a; } .travel.light .go-live--none{ color: var(--lt-3); }
.travel.light .go-flag{ box-shadow: 0 0 0 1px rgba(10,12,22,.1); }
.travel.light .hero-foot a{ background: #fff; color: var(--lt-2); border: 1px solid var(--lt-line); box-shadow: 0 10px 24px -14px rgba(30,50,140,.4); }
.travel.light .hero-foot svg{ color: var(--lt-3); }
/* The visa page, faint, on white paper. */
.travel.light .visa-waves path{ stroke: rgba(46,91,255,.06); }
.travel.light .visa-rose{ stroke: rgba(46,91,255,.07); }
.travel.light .visa-head{ color: rgba(46,91,255,.4); }
.travel.light .visa-micro{ color: rgba(46,91,255,.22); }
.travel.light .visa-mrz{ color: rgba(10,12,22,.14); }
.travel.light .vst{ mix-blend-mode: multiply; filter: saturate(1.2) brightness(.62); }
.travel.light .visa.in .vst{ opacity: .32; filter: saturate(1.2) brightness(.62); }
.travel.light .visa-routes .route{ stroke: rgba(46,91,255,.22); }
.travel.light .visa-routes .comet{ stroke: var(--lt-blue); opacity: .45; filter: none; }
/* The flowers. */
.bouquet{ position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; }
.travel .wrap{ position: relative; z-index: 1; }
.bq-svg{ display: block; overflow: visible; }
.bq{ will-change: transform; transition: transform .25s linear; }
.bq-stem{ fill: none; stroke: #3FA46F; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.4s cubic-bezier(.65,0,.35,1) calc(var(--i) * 140ms); }
.bouquet.in .bq-stem{ stroke-dashoffset: 0; }
.bq-head{ transform-box: fill-box; transform-origin: 50% 50%; }
.bouquet.in .bq-head{ animation: bq-sway 5s ease-in-out calc(2.2s + var(--i) * 300ms) infinite alternate; }
.bq .fo, .bq .fi{ transform-box: fill-box; transform-origin: 50% 100%; transform: scale(0); transition: transform .7s cubic-bezier(.34,1.56,.64,1); }
.bq .fo{ transition-delay: calc(1.05s + var(--i) * 140ms + var(--i, 0) * 0ms); }
.bq .fd{ transform-box: fill-box; transform-origin: 50% 50%; transform: scale(0); transition: transform .5s cubic-bezier(.34,1.56,.64,1) calc(1.55s + var(--i) * 140ms); }
.bouquet.in .fo, .bouquet.in .fi, .bouquet.in .fd{ transform: scale(1); }
.bq .fi{ transition-delay: calc(1.35s + var(--i) * 140ms); }
@keyframes bq-sway{ from{ transform: rotate(-5deg); } to{ transform: rotate(5deg); } }
@media (prefers-reduced-motion: reduce){
  .go-dest-track{ animation: none; } .go-dest-dup{ display: none; }
  .bq-stem, .bq .fo, .bq .fi, .bq .fd{ transition: none; }
  .bouquet.in .bq-head{ animation: none; }
}
@media (max-width: 900px){
  .travel.light{ margin: 24px 8px 0; border-radius: 28px; }
  .travel.light .go-top{ grid-template-columns: 1fr; padding: 24px 22px; }
  .go-dest{ height: 112px; }
  .go-dest-track{ align-items: flex-start; }
}

/* ==========================================================
   The whole page in light: white like the AkcaVPN artwork and Ping.
   The phone stays the app (dark), with its own cornflower.
   ========================================================== */
:root{
  --bg: #ffffff; --bg-2: #f6f8fc; --bg-3: #eef2fa;
  --line: rgba(10,12,22,.08); --line-2: rgba(10,12,22,.14);
  --ink: #0a0c16; --ink-2: #3a3f55; --ink-3: #6b7088; --ink-4: #9aa0b4;
  --cf: #2E5BFF; --cf-deep: #2148e0;
}
body::before{ opacity: .025; }
::selection{ background: rgba(46,91,255,.18); color: var(--ink); }
.app-phone{ --cf: #a9bdff; }
/* Nav */
.nav::before{ background: linear-gradient(rgba(255,255,255,.94), rgba(255,255,255,.7) 60%, rgba(255,255,255,0)); }
.glass{ background: rgba(255,255,255,.72); border-color: rgba(10,12,22,.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 16px 40px -24px rgba(30,50,140,.35), 0 1px 3px rgba(10,12,22,.04); }
.glass::before{ background: radial-gradient(120% 70% at 18% -20%, rgba(46,91,255,.05), transparent 55%); }
.nav-links a{ color: var(--ink-2); }
.nav-links a:hover, .nav-links a.on{ background: rgba(46,91,255,.08); color: var(--ink); }
.menu-btn{ color: var(--ink); border-color: var(--line-2); background: rgba(255,255,255,.8); }
.mobile-menu{ background: rgba(255,255,255,.97); }
/* Buttons */
.btn-primary{ background: var(--cf); color: #fff; box-shadow: 0 12px 30px -12px rgba(46,91,255,.75), inset 0 1px 0 rgba(255,255,255,.25); }
.btn-primary:hover{ background: var(--cf-deep); }
.btn-ghost{ border-color: var(--line-2); color: var(--ink); }
.btn-ghost:hover{ background: rgba(10,12,22,.04); border-color: var(--ink-4); }
.btn-glass{ background: #fff; border-color: var(--line); color: var(--ink); box-shadow: 0 6px 16px -10px rgba(30,50,140,.4); }
.btn-glass:hover{ background: var(--bg-2); }
/* Hero */
.hero::before{ background:
    radial-gradient(ellipse 45% 40% at 72% 35%, rgba(46,91,255,.10), transparent 70%),
    radial-gradient(ellipse 35% 30% at 15% 10%, rgba(242,85,158,.06), transparent 70%); }
.hero::after{ background-image: radial-gradient(circle, rgba(10,12,22,.07) 1px, transparent 1.2px); }
.pill{ background: #fff; box-shadow: 0 6px 16px -10px rgba(30,50,140,.35); }
.pill:hover{ background: var(--bg-2); }
.pill b{ color: #fff; }
.float{ background: rgba(255,255,255,.86); border-color: var(--line); color: var(--ink); box-shadow: 0 18px 40px -20px rgba(30,50,140,.45); }
.float small{ color: var(--ink-3); }
.hero-visual .stamp{ background: rgba(255,255,255,.88); color: var(--cf);
  box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 4px rgba(46,91,255,.5), 0 20px 40px -20px rgba(30,50,140,.45); }
.hero-visual .app-phone, .app-phone{ box-shadow: 0 0 0 1px rgba(10,12,22,.12) inset, 0 50px 100px -40px rgba(20,30,80,.55), 0 20px 50px -30px rgba(46,91,255,.45); }
/* Sections */
.feat{ background: #fff; box-shadow: 0 18px 40px -30px rgba(30,50,140,.35); }
.plan{ background: #fff; box-shadow: 0 24px 60px -40px rgba(30,50,140,.4); }
.plan--plus{ background: linear-gradient(160deg, rgba(46,91,255,.08), rgba(46,91,255,.0) 50%), #fff; border-color: rgba(46,91,255,.3); }
.plan li::before{ background: rgba(46,91,255,.1) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232E5BFF' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center/11px no-repeat; }
.dl a{ background: #fff; box-shadow: 0 12px 30px -24px rgba(30,50,140,.4); }
.akplus img{ filter: invert(1) brightness(.15); }
/* The glowing + on white: blue light. */
.gplus{ color: var(--cf); }
@keyframes plus-glow{ from{ text-shadow: 0 0 4px rgba(46,91,255,.35); } to{ text-shadow: 0 0 12px rgba(46,91,255,.85), 0 0 2px rgba(46,91,255,.6); } }
.app-phone .ap-plus{ color: #fff; animation-name: plus-glow-dark; }
@keyframes plus-glow-dark{ from{ text-shadow: 0 0 4px rgba(255,255,255,.4); } to{ text-shadow: 0 0 10px rgba(255,255,255,.9), 0 0 2px rgba(255,255,255,.9); } }
.btn-primary .gplus{ color: #fff; }
/* The splash line in ink, as on the bone version of the splash. */
.sig-line{ stroke: var(--ink); }
.end::before{ background: radial-gradient(ellipse at center, rgba(46,91,255,.10), transparent 65%); }
/* Travel: a soft blue page on the white one. */
.travel.light{ background: radial-gradient(ellipse 70% 55% at 50% 0%, #e8eeff, transparent 70%), #f5f7ff; border: 1px solid rgba(46,91,255,.08); }
.travel.light .glass{ background: rgba(255,255,255,.8); }
.perk .gplus{ color: #fff; animation-name: plus-glow-dark; }
/* The head sits on the end of its stem (the stem's top is size/2 below the plant's top). */
.cf-bloom{ top: calc(var(--size) / 2); }
.cf-leaf{ transform-box: view-box; }
/* Flowers around the page: behind the content, on the edges. */
.has-bouquet{ position: relative; }
.has-bouquet > .wrap{ position: relative; z-index: 1; }
.sec.has-bouquet{ padding-bottom: 40px; margin-bottom: -40px; }
@media (max-width: 600px){ .cf-peek{ display: none; } }

/* ==========================================================
   Free-from seals: scalloped, engraved, struck-through icons;
   overlapping like stickers on a can.
   ========================================================== */
.seals{ list-style: none; display: flex; flex-wrap: nowrap; align-items: center; gap: 0; margin-top: 44px; padding: 10px 0 10px 6px; }
.seal2{ --s: 118px; position: relative; flex: none; width: var(--s); height: var(--s); margin-left: -20px; perspective: 600px; z-index: calc(10 - var(--d)); }
.seal2:first-child{ margin-left: 0; }
.seal2--hero{ --s: 142px; z-index: 20; }
.seal2-in{ position: absolute; inset: 0; display: block; border-radius: 50%; transform-style: preserve-3d;
  transition: transform .35s cubic-bezier(.2,.7,.1,1);
  filter: drop-shadow(0 1px 0 rgba(255,255,255,.9)) drop-shadow(0 14px 18px rgba(20,30,80,.18)) drop-shadow(0 3px 4px rgba(20,30,80,.12)); }
.seal2 svg{ display: block; width: 100%; height: 100%; overflow: visible; transform: rotate(var(--r)); }
.seal-gui{ fill: none; stroke-width: .55; stroke-opacity: .16; }
.seal2--hero .seal-gui{ stroke-opacity: .2; }
.seal-ringt{ font: 800 11.5px/1 var(--sans); letter-spacing: .08em; }
.seal-lab{ font: 700 10px/1 var(--mono); letter-spacing: .18em; text-anchor: middle; }
.seal2--hero .seal-lab{ font-size: 8.5px; letter-spacing: .14em; }
.seal-ring{ transform-origin: 0 0; animation: seal-spin 60s linear infinite; }
.seal2:nth-child(2n) .seal-ring{ animation-direction: reverse; animation-duration: 75s; }
.seal2:hover .seal-ring{ animation-duration: 12s; }
/* foil sheen that follows the pointer */
.seal2-sheen{ position: absolute; inset: 4%; border-radius: 50%; pointer-events: none; mix-blend-mode: soft-light; opacity: 0;
  background: radial-gradient(circle at var(--mx, 30%) var(--my, 25%), rgba(255,255,255,.95), rgba(255,255,255,0) 45%),
              conic-gradient(from 120deg at var(--mx, 50%) var(--my, 50%), rgba(255,0,170,.25), rgba(0,200,255,.25), rgba(255,220,0,.25), rgba(255,0,170,.25));
  transition: opacity .3s; }
.seal2:hover .seal2-sheen{ opacity: 1; }
/* stamp down, one by one */
.seals .seal2-in{ opacity: 0; transform: scale(1.5) rotate(14deg); }
.seals.in .seal2-in{ opacity: 1; transform: none;
  transition: transform .42s cubic-bezier(.2,1.5,.4,1) calc(var(--d) * 120ms), opacity .15s calc(var(--d) * 120ms); }
.seals.in .seal2:hover .seal2-in{ transition: transform .35s cubic-bezier(.2,.7,.1,1); }
.seal2:focus-within{ outline: none; }
@media (prefers-reduced-motion: reduce){
  .seal-ring{ animation: none; }
  .seals .seal2-in, .seals.in .seal2-in{ opacity: 1; transform: none; transition: none; }
}
@media (max-width: 600px){
  .seals{ flex-wrap: wrap; justify-content: center; row-gap: 4px; padding-left: 0; }
  .seal2{ --s: 112px; margin-left: -10px; }
  .seal2--hero{ --s: 128px; }
  .seal2:nth-child(4){ margin-left: 0; }
}

/* Footer, shared with every page: four link columns, payment methods, Solana. */
.foot-grid{ grid-template-columns: 1.4fr repeat(4, 1fr); }
.foot-logo{ display: block; height: 24px; width: auto; margin-bottom: 14px; }
.foot p{ line-height: 1.6; }
.foot .eyca-partner{ display: inline-flex; align-items: center; gap: 10px; margin-top: 20px; }
.foot .eyca-partner img{ height: 36px; width: auto; }
.foot .eyca-partner span{ font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.pay-strip{ margin-top: 40px; display: flex; gap: 8px; flex-wrap: wrap; }
.pay-strip span{ display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 40px; background: #fff; border: 1px solid var(--line); border-radius: 10px; }
.pay-strip img{ height: 16px; width: auto; max-width: 46px; }
.pay-strip img[alt="Visa"]{ height: 13px; }
.pay-strip img[alt="American Express"]{ height: 20px; }
.foot-bottom{ margin-top: 28px; align-items: center; font-size: 13px; }
.powered{ display: inline-flex; align-items: center; gap: 7px; }
.powered .solm{ width: 13px; height: 10px; display: inline-flex; }
.powered .solm svg{ width: 100%; height: 100%; }
.powered b{ color: var(--ink); }
@media (max-width: 1080px){ .foot-grid{ grid-template-columns: 1fr 1fr 1fr; } .foot-grid > div:first-child{ grid-column: 1 / -1; } }
@media (max-width: 600px){ .foot-grid{ grid-template-columns: 1fr 1fr; } }

/* Travel: the mobile networks at the destination, each one learned on its own. */
.go-nets{ margin-top: 18px; padding-top: 16px; border-top: 1px dashed var(--lt-line); }
.go-nets-h{ font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--lt-3); margin-bottom: 10px; }
.go-chips{ list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.go-chip{ display: inline-flex; align-items: center; gap: 8px; padding: 7px 13px 7px 11px; border-radius: 999px; background: #f6f8fc; border: 1px solid var(--lt-line); font-size: 14px; font-weight: 600; color: var(--lt-ink); }
.go-chip svg{ width: 14px; height: 14px; flex: none; fill: var(--lt-blue); color: var(--lt-blue); }
.go-chip--wifi{ background: #fff; font-weight: 500; color: var(--lt-2); }
.go-chip small{ font-family: var(--mono); font-size: 11px; font-weight: 500; color: #12704a; padding-left: 8px; border-left: 1px solid var(--lt-line); }
.go-chip--live{ border-color: rgba(18,112,74,.3); background: #f1faf5; }
.go-nets .go-how{ margin-top: 12px; padding-top: 0; border-top: 0; font-size: 14.5px; }
.go-caveat{ position: relative; margin: 0 0 12px; padding: 10px 14px 10px 36px; border-radius: 12px; background: #fff8eb; border: 1px solid rgba(180,83,9,.18); color: #7a4307; font-size: 14px; line-height: 1.5; }
.go-caveat::before{ content: "!"; position: absolute; left: 12px; top: 11px; width: 16px; height: 16px; border-radius: 50%; background: #b45309; color: #fff; font: 700 11px/16px var(--sans); text-align: center; }

/* Solana mark in the "Server list" chip: the gradient mark on an ink coin */
.float .sol-mark{ width: 26px; height: 26px; border-radius: 50%; background: var(--ink); display: grid; place-items: center; flex: none; }
.float .sol-mark svg{ width: 13px; height: 11px; }

/* Seeker perk: the Solana mark on a black coin, like the token logos beside it */
.perk-brand .glyph--sol{ border-radius: 50%; background: #000; }
.perk-brand .glyph--sol svg{ width: 14px; height: 11px; }

/* The SKR mark is a white S on transparent: give it a black coin so it shows on light grounds */
.pill .tok img.skr, .perk-brand img.skr, .paywith img.tok.skr{ background: #000; }