/* SINKAI — shared stylesheet (home + document pages). Dark theme only.
   No inline styles or scripts anywhere: pages run under a strict CSP. */

:root{
  color-scheme:dark;
  --bg:#020608;
  --panel:rgba(6,20,24,.58);
  --panel-hover:rgba(10,32,38,.82);
  --line:rgba(101,245,223,.18);
  --line-strong:rgba(101,245,223,.42);
  --text:#f0fbfb;
  --muted:#7e999e;
  --mint:#65f5df;
  --mint-2:#19d7c2;
  --cyan:#26b2d0;
  --glow:rgba(101,245,223,.3);
  --shadow:0 24px 70px rgba(0,0,0,.55);
}

*,*::before,*::after{box-sizing:border-box}
html{min-height:100%;background:var(--bg);scroll-behavior:smooth}
body{
  margin:0;min-height:100vh;display:flex;flex-direction:column;overflow-x:hidden;
  color:var(--text);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  -webkit-text-size-adjust:100%;
}
a{color:inherit}

/* Fixed background layer: the page scrolls over it, which gives the depth effect.
   Fades to solid at the bottom so long pages never end on a hard edge. */
.bg-layer{
  position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(2,6,8,0) 0%,rgba(2,6,8,.28) 55%,rgba(2,6,8,.9) 100%),
    url(/img/bg.svg) center top/cover no-repeat;
}
/* Moving network: two layers of lines+dots drift with transform animations only
   (GPU-composited, the SVGs are rasterised once, so this is cheap). */
.bg-layer::before,.bg-layer::after{
  content:"";position:absolute;inset:-7%;pointer-events:none;will-change:transform;
  background-position:center top;background-size:cover;background-repeat:no-repeat;
}
.bg-layer::before{background-image:url(/img/net-a.svg);animation:driftA 22s ease-in-out infinite alternate}
.bg-layer::after{background-image:url(/img/net-b.svg);animation:driftB 29s ease-in-out infinite alternate}
@keyframes driftA{
  from{transform:translate3d(-3.5%,2.5%,0) rotate(-1.2deg) scale(1)}
  to{transform:translate3d(3.5%,-2.5%,0) rotate(1.2deg) scale(1.05)}
}
@keyframes driftB{
  from{transform:translate3d(3%,-3%,0) rotate(1deg) scale(1.04)}
  to{transform:translate3d(-3%,3%,0) rotate(-1deg) scale(1)}
}

/* Parallax for the background only: as the page scrolls, the layer drifts up slowly
   (30vh over the whole page) while the content moves at normal speed. Pure CSS
   scroll-driven animation: browsers without it keep the static fixed background;
   prefers-reduced-motion disables it (see the rule at the end of this file). */
@supports (animation-timeline:scroll()){
  .bg-layer{bottom:-30vh;animation:bgdrift linear both;animation-timeline:scroll(root block)}
  @keyframes bgdrift{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,-30vh,0)}}
}

.topline{
  height:2px;flex:none;
  background:linear-gradient(90deg,transparent,var(--mint),transparent);
  box-shadow:0 0 15px var(--mint);
}

/* Header: the header image dissolves into the page background */
.header{position:relative;width:100%;z-index:2}
.brand-hero{
  position:relative;display:block;width:100%;overflow:hidden;text-decoration:none;
  -webkit-mask-image:linear-gradient(to bottom,#000 52%,transparent 100%);
  mask-image:linear-gradient(to bottom,#000 52%,transparent 100%);
}
.brand-hero img{
  display:block;width:100%;height:clamp(130px,15vw,240px);
  object-fit:cover;object-position:30% 30%;
}
.header.compact .brand-hero img{height:clamp(110px,11vw,170px)}

/* Layout */
.main{
  position:relative;width:min(1180px,calc(100% - 48px));margin:0 auto;flex:1;
  padding:34px 0 72px;
}
.hero-glow{
  position:absolute;width:560px;height:300px;top:0;left:-180px;pointer-events:none;
  background:radial-gradient(ellipse,rgba(44,219,201,.12),transparent 70%);filter:blur(20px);
}

.eyebrow{
  position:relative;display:inline-flex;align-items:center;gap:10px;padding:7px 14px;
  border:1px solid var(--line);border-radius:999px;background:rgba(4,18,22,.62);
  backdrop-filter:blur(12px);color:var(--mint);
  font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
}
.eyebrow:before{
  content:"";width:6px;height:6px;border-radius:50%;background:var(--mint);
  box-shadow:0 0 10px var(--mint);animation:pulseGlow 2s infinite ease-in-out;
}
@keyframes pulseGlow{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.3;transform:scale(.8)}}

h1{
  position:relative;font-size:clamp(42px,7vw,92px);line-height:.96;letter-spacing:-.05em;
  font-weight:800;margin:24px 0 22px;max-width:920px;text-wrap:balance;
}
h1 span{
  color:transparent;background:linear-gradient(120deg,#fff 8%,var(--mint) 60%,var(--cyan) 100%);
  -webkit-background-clip:text;background-clip:text;
}
.intro{max-width:640px;color:#9db5b9;font-size:clamp(15px,1.3vw,18px);line-height:1.75;margin:0;text-wrap:pretty}

/* Sections */
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin:76px 0 24px}
.section-head h2{font-size:clamp(22px,2.4vw,34px);letter-spacing:-.03em;font-weight:800;margin:0 0 6px}
.section-head p{margin:0;color:var(--muted);font-size:13px;line-height:1.6}
.count{
  display:flex;align-items:center;gap:9px;white-space:nowrap;padding:9px 15px;border-radius:999px;
  border:1px solid var(--line);background:rgba(8,28,32,.65);backdrop-filter:blur(12px);
  color:#c8dddd;font-size:12px;font-weight:600;
}
.count i,.status-dot{
  display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--mint);
  box-shadow:0 0 0 4px rgba(101,245,223,.07),0 0 12px var(--mint);
}

/* Map card (glass) */
.map{
  position:relative;padding:clamp(14px,2.2vw,26px);border-radius:24px;border:1px solid var(--line);
  background:var(--panel);backdrop-filter:blur(18px);box-shadow:var(--shadow);overflow:hidden;
}
.world{display:block;width:100%;height:auto;border-radius:16px;background:rgba(2,10,14,.55)}
.land path{fill:rgba(25,59,64,.9);stroke:#061315;stroke-width:.55;stroke-linejoin:round;transition:fill .25s}
.land path:hover{fill:rgba(33,75,80,.95)}
.country{cursor:pointer;outline:none}
.country .shape{fill:var(--mint-2);fill-opacity:.75;stroke:#061315;stroke-width:.55;transition:fill-opacity .2s,filter .2s}
.country:hover .shape,.country:focus-visible .shape{fill-opacity:1;filter:drop-shadow(0 0 7px rgba(101,245,223,.55))}
.country:focus-visible .shape{stroke:#fff;stroke-width:1.4}
.country .hit{fill:transparent}
.country .dot{fill:#fff}
.country .ring{fill:var(--mint);fill-opacity:.65;transform-box:fill-box;transform-origin:center;animation:mappulse 2.4s ease-out infinite}
.country .label{fill:#fff;font-size:13px;font-weight:700;paint-order:stroke;stroke:#061315;stroke-width:3px;pointer-events:none}
@keyframes mappulse{0%{transform:scale(1);opacity:.9}100%{transform:scale(4.8);opacity:0}}

.countries{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.countries li{margin:0}
.countries a{
  position:relative;display:block;overflow:hidden;padding:16px 18px;border-radius:16px;
  background:rgba(8,30,36,.55);border:1px solid var(--line);text-decoration:none;
  transition:transform .3s cubic-bezier(.16,1,.3,1),background .3s,border-color .3s,box-shadow .3s;
}
.countries a:hover,.countries a:focus-visible{
  transform:translateY(-3px);background:var(--panel-hover);border-color:var(--line-strong);
  box-shadow:0 14px 36px rgba(0,0,0,.45),0 0 22px var(--glow);outline:none;
}
.countries strong{display:block;font-size:15px;font-weight:700}
.countries span{display:inline-flex;align-items:center;gap:7px;margin-top:4px;color:var(--mint);font-size:12px}
.countries span:after{content:"↗"}

.map-caption{
  display:flex;justify-content:space-between;align-items:center;gap:18px;margin-top:16px;padding-top:14px;
  border-top:1px solid rgba(101,245,223,.1);color:var(--muted);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
}
.legend{display:flex;align-items:center;gap:9px}
.legend .status-dot{width:6px;height:6px}

/* Expansion card */
.next{
  display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:20px;padding:24px 26px;
  border-radius:20px;border:1px solid var(--line);
  background:radial-gradient(circle at 0 50%,rgba(101,245,223,.08),transparent 40%),var(--panel);
  backdrop-filter:blur(16px);
}
.next-copy{display:flex;align-items:center;gap:16px}
.next-icon{
  display:grid;place-items:center;width:44px;height:44px;flex:none;border-radius:13px;
  background:rgba(101,245,223,.08);border:1px solid var(--line);color:var(--mint);font-size:20px;
}
.next h3{margin:0 0 5px;font-size:15px;font-weight:700}
.next p{margin:0;color:var(--muted);font-size:13px;line-height:1.6}
.next-tag{font-size:10px;letter-spacing:.17em;color:#91aaaa;border:1px solid rgba(145,170,170,.22);padding:9px 12px;border-radius:8px;white-space:nowrap}

/* Footer */
.footer{
  position:relative;width:min(1180px,calc(100% - 48px));margin:0 auto;padding:26px 0 30px;
  display:flex;align-items:center;justify-content:space-between;gap:16px 24px;flex-wrap:wrap;
  border-top:1px solid rgba(101,245,223,.12);color:var(--muted);font-size:13px;
}
.footer-brand{font-weight:800;color:#fff;letter-spacing:.14em}
.footer-links{display:flex;flex-wrap:wrap;gap:6px 22px}
.footer-links a{text-decoration:none;transition:color .25s}
.footer-links a:hover,.footer-links a:focus-visible,.footer-links a[aria-current]{color:var(--mint)}
.footer-copy{font-size:12px}

/* Document pages (privacy, terms, data deletion, support) */
.main.doc{padding-top:30px}
.doc h1{font-size:clamp(32px,5vw,56px);margin:20px 0 0}
.doc-body{
  margin-top:30px;padding:clamp(20px,4vw,42px);border-radius:24px;border:1px solid var(--line);
  background:var(--panel);backdrop-filter:blur(18px);box-shadow:var(--shadow);
  color:#b3cacb;font-size:15px;line-height:1.75;
}
.doc-body>:first-child{margin-top:0}
.doc-body>:last-child{margin-bottom:0}
.doc-body h2{color:var(--text);font-size:20px;letter-spacing:-.02em;font-weight:700;margin:36px 0 10px}
.doc-body h3{color:var(--text);font-size:15px;font-weight:700;margin:22px 0 6px}
.doc-body p{margin:0 0 14px}
.doc-body a{color:var(--mint)}
.doc-body strong{color:var(--text);font-weight:700}
.doc-body ul,.doc-body ol{margin:0 0 14px;padding-left:22px}
.doc-body li{margin:6px 0}
.doc-body .lead{font-size:17px;color:#c4d8d8}
.doc-body .meta{color:var(--muted);font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.doc-body code{background:rgba(101,245,223,.08);border:1px solid rgba(101,245,223,.14);border-radius:5px;padding:1px 6px;font-size:.92em;color:var(--text)}
.table-wrap{overflow-x:auto;margin:0 0 18px;border:1px solid var(--line);border-radius:14px}
.doc-body table{width:100%;border-collapse:collapse;font-size:14px;line-height:1.55}
.doc-body th,.doc-body td{text-align:left;vertical-align:top;padding:11px 14px;border-bottom:1px solid var(--line)}
.doc-body thead th{color:var(--text);font-weight:700;background:rgba(101,245,223,.05);font-size:12px;letter-spacing:.06em;text-transform:uppercase}
.doc-body tbody tr:last-child td{border-bottom:0}

/* Responsive */
@media (max-width:760px){
  .main{width:calc(100% - 32px);padding:22px 0 52px}
  .brand-hero img{height:clamp(110px,28vw,170px);object-position:center}
  .header.compact .brand-hero img{height:clamp(96px,24vw,140px)}
  h1{font-size:clamp(40px,12vw,64px);margin-top:20px}
  .section-head{margin-top:56px;align-items:flex-start;flex-direction:column;gap:14px}
  .map{padding:10px;border-radius:18px}
  .map-caption{align-items:flex-start;flex-direction:column;gap:8px;font-size:10px}
  .next{padding:18px 16px;align-items:flex-start}
  .next-copy{gap:12px}
  .footer{width:calc(100% - 32px);flex-direction:column;gap:14px;text-align:center}
  .footer-links{justify-content:center}
  .doc-body{border-radius:18px;font-size:14.5px}
  .doc-body table{min-width:30rem}
}
@media (max-width:480px){
  .eyebrow{font-size:9px;letter-spacing:.15em;padding:6px 11px}
  .world{width:112%;max-width:none;margin-left:-6%}
  .countries{grid-template-columns:1fr}
  .next-tag{display:none}
  .country .label{display:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;scroll-behavior:auto!important;transition:none!important}
}