/* ============================================================
   andata.hk · andata International —  refined-light skin v3
   paper #F5F7FA · ink #05070F · signal indigo #2563EB
   Fine editorial type · mono HUD accents · calm blueprint grid
   Tablet/portrait safe.
   ============================================================ */
:root{
  --bg:#F5F7FA; --bg2:#FFFFFF; --panel:#FFFFFF; --panel2:#EEF1F7;
  --ink:#05070F; --mut:#4A5468; --mut2:#8B93A7;
  --line:#E2E7F0; --line2:#C7D0E0;
  --acc:#2563EB; --acc-d:#1E40AF; --acc-soft:#93b4f5; --acc-tint:rgba(37,99,235,.06); --acc-glow:rgba(37,99,235,.18);
  --grid:rgba(8,14,32,.04);
  --sans:"DM Sans",system-ui,-apple-system,"Segoe UI","PingFang SC","Noto Sans SC",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,"SF Mono","Cascadia Code",Menlo,monospace;
  --r:16px; --max:1140px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--ink); font-family:var(--sans);
  font-size:16px; line-height:1.7; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
a{color:inherit; text-decoration:none}
p{margin:0 0 1em}
/* fine, refined display type */
h1,h2,h3{margin:0 0 .3em; font-weight:300; letter-spacing:-.03em; line-height:1.06}
.wrap{max-width:var(--max); margin:0 auto; padding:0 28px}
.mono{font-family:var(--mono)}
.mut{color:var(--mut)}
.sup{font-size:.55em; vertical-align:.95em; font-weight:400}
[id]{scroll-margin-top:88px}
.sl{color:var(--mut2)}

/* ---------- topbar ---------- */
.top{position:sticky; top:0; z-index:60; backdrop-filter:blur(14px); background:rgba(245,247,250,.85); border-bottom:1px solid var(--line)}
.top .wrap{display:flex; align-items:center; justify-content:space-between; gap:18px; height:66px}
.brand{display:flex; align-items:baseline; gap:12px; white-space:nowrap}
.brand .mark{font-family:var(--mono); font-weight:600; font-size:25px; line-height:1; color:var(--acc); letter-spacing:-1px}
.brand .word{font-family:var(--mono); font-weight:500; font-size:15px; letter-spacing:.2px}
.brand .word em{font-style:normal; font-weight:400; font-size:10px; letter-spacing:2.4px; text-transform:uppercase; color:var(--mut2); margin-left:9px}
.nav{display:flex; gap:2px; align-items:center}
.nav a{position:relative; font-family:var(--mono); font-size:12px; font-weight:500; letter-spacing:1.8px; text-transform:uppercase; color:var(--mut); padding:8px 13px; transition:.16s}
.nav a::after{content:""; position:absolute; left:13px; right:13px; bottom:4px; height:1.5px; background:var(--acc); transform:scaleX(0); transform-origin:left; transition:.18s}
.nav a:hover{color:var(--ink)}
.nav a:hover::after{transform:scaleX(1)}
.top .cta{font-family:var(--mono); font-size:12px; font-weight:500; letter-spacing:.3px; border:1px solid var(--line2); color:var(--acc); padding:8px 15px; border-radius:9px; white-space:nowrap; transition:.16s; background:#fff}
.top .cta:hover{border-color:var(--acc); background:var(--acc); color:#fff}
.navbtn{display:none}

/* ---------- hero ---------- */
.hero{position:relative; padding:76px 0 8px; overflow:hidden}
.hero::before{content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(820px 430px at 80% -10%, rgba(37,99,235,.08), transparent 62%),
             radial-gradient(640px 340px at -6% 112%, rgba(37,99,235,.045), transparent 60%)}
.hero-grid{position:relative; display:grid; grid-template-columns:minmax(0,1fr) 430px; gap:64px; align-items:center}
.hero-left{min-width:0}
.kicker{display:flex; align-items:center; gap:12px; color:var(--acc); font-size:11px; font-weight:500; letter-spacing:2.2px; text-transform:uppercase; margin:0 0 26px}
.kicker .sep{color:var(--mut2)}
.pulse{display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--acc); flex:none; animation:pulse 2.4s ease-out infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(37,99,235,.35)}70%{box-shadow:0 0 0 9px rgba(37,99,235,0)}100%{box-shadow:0 0 0 0 rgba(37,99,235,0)}}
.hero h1{font-size:clamp(38px,5.8vw,82px); font-weight:280; letter-spacing:-.045em; line-height:.99; margin:0 0 26px}
.hero h1 .ac{color:var(--acc); letter-spacing:-.04em}
.hero .lede{color:var(--mut); font-size:clamp(15.5px,1.7vw,17.5px); max-width:46ch; margin:0 0 34px}
.btns{display:flex; gap:16px; flex-wrap:wrap; align-items:center}
.meta{color:var(--mut2); font-size:11px; letter-spacing:.6px; text-transform:uppercase; margin:32px 0 0; display:flex; gap:8px 20px; flex-wrap:wrap; align-items:baseline}
.meta span{color:var(--ink); font-weight:600}
.meta span:before{content:"· "; color:var(--acc); margin-right:8px}
.meta span:nth-of-type(1)::before{content:""; margin:0}
.meta .eq{color:var(--acc); letter-spacing:1.1px; font-weight:500; text-transform:none}

/* hero visual: HUD growth card */
.hero-vis{background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:18px 18px 14px;
  box-shadow:0 30px 80px -50px rgba(5,7,15,.3)}
.vis-h{display:flex; align-items:center; justify-content:space-between; gap:12px; font-size:10px; letter-spacing:1.8px; text-transform:uppercase; color:var(--mut2); margin:0 4px 16px; border-bottom:1px solid var(--line); padding-bottom:13px}
.vis-h .coords{color:var(--mut2)}
.vdot{width:7px; height:7px; background:var(--acc); border-radius:2px; flex:none; display:inline-block; margin-right:2px}
/* milestone list — the compounding stack */
.hero-vis .mstack{position:relative; margin:2px 2px 0}
.hero-vis .mstack:before{content:""; position:absolute; left:5px; top:10px; bottom:16px; width:1px; background:var(--line)}
.hero-vis .mrow{position:relative; display:flex; align-items:baseline; gap:12px; padding:13px 0 13px 22px; border-bottom:1px solid var(--line)}
.hero-vis .mrow:last-child{border-bottom:none}
.hero-vis .mrow:before{content:""; position:absolute; left:1px; top:50%; transform:translateY(-50%); width:8px; height:8px; border-radius:50%; background:var(--acc); box-shadow:0 0 0 3px rgba(37,99,235,.14)}
.hero-vis .mrow:last-child:before{background:var(--acc-d)}
.hero-vis .mrow .exp{font-family:var(--mono); font-size:10px; font-weight:600; color:var(--acc); min-width:36px; letter-spacing:.3px}
.hero-vis .mrow .exp sup{font-size:.6em; font-weight:700}
.hero-vis .mrow .nm{font-weight:600; color:var(--ink); font-size:15px}
.hero-vis .mrow .nt{margin-left:auto; color:var(--mut2); font-size:12px; text-align:right; max-width:56%}

/* ---------- ticker ---------- */
.ticker{border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:#fff; overflow:hidden; margin:58px 0 0}
.tk-run{display:inline-flex; align-items:center; white-space:nowrap; animation:tk 38s linear infinite}
.tk-run span{font-size:11px; font-weight:500; letter-spacing:2.8px; text-transform:uppercase; color:var(--mut); padding:13px 0}
.tk-run i{font-style:normal; color:var(--acc); margin:0 28px; font-weight:600}
.tk-run .lx{text-transform:none}
@keyframes tk{0%{transform:translate3d(0,0,0)}100%{transform:translate3d(-50%,0,0)}}

/* ---------- buttons ---------- */
.btn{display:inline-flex; align-items:center; gap:9px; font-family:var(--mono); font-size:13px; font-weight:500; letter-spacing:.1px; padding:14px 22px; border-radius:10px; border:1px solid transparent; cursor:pointer; transition:.18s}
.btn .arr{transition:transform .18s; font-size:13px}
.btn:hover .arr{transform:translate(2px,-2px)}
.btn.pri{background:var(--acc); color:#fff}
.btn.pri:hover{background:var(--acc-d); transform:translateY(-1px)}
.btn.ghost{border-color:var(--line2); color:var(--ink); background:#fff}
.btn.ghost:hover{border-color:var(--acc); color:var(--acc)}
.btn.big{padding:17px 30px; font-size:15px; letter-spacing:.3px}
.btn.sm{padding:10px 15px; font-size:11.5px; border-radius:8px}

/* ---------- sections ---------- */
.sec{padding:44px 0 16px}
.sec-h{position:relative; border-top:1px solid var(--line); margin-bottom:30px; padding-top:30px}
.k{font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:2.6px; text-transform:uppercase; color:var(--acc); margin:0 0 16px}
.sec-h h2{font-size:clamp(27px,4.2vw,56px); font-weight:300; letter-spacing:-.035em}
.sec-h h2 em{font-family:var(--mono); font-style:normal; font-size:.34em; font-weight:400; letter-spacing:1.6px; text-transform:uppercase; color:var(--mut2); margin-left:16px; vertical-align:middle}

/* product rows */
.sec.prod{padding:16px 0}
.sec.prod + .sec.prod{border-top:1px solid var(--line)}
.prod-grid{display:grid; grid-template-columns:minmax(0,1fr) 330px; gap:58px; align-items:center}
.p-desc .lede2{color:var(--mut); font-size:16.5px; line-height:1.8; max-width:56ch; margin-bottom:26px}
.chips{list-style:none; margin:0; padding:0; border-top:1px solid var(--line)}
.chips li{display:flex; align-items:baseline; gap:18px; padding:15px 2px; border-bottom:1px solid var(--line); font-size:15px; font-weight:500}
.chips li b{color:var(--acc); font-size:11px; font-weight:600; letter-spacing:1px; width:22px; flex:none}
.p-mod{background:linear-gradient(180deg,#fff,var(--panel2)); border:1px solid var(--line); border-left:2px solid var(--acc); border-radius:12px; padding:24px 22px; display:flex; flex-direction:column; gap:4px; min-width:0}
.mod-l{font-size:10px; letter-spacing:2.4px; text-transform:uppercase; color:var(--mut2); margin:0 0 12px}
.mod{display:flex; align-items:center; gap:8px; font-size:16px; font-weight:500; color:var(--acc); letter-spacing:-.2px; word-break:break-all; line-height:1.25; transition:.15s}
.mod .m-ic{color:var(--acc); font-size:12px; flex:none}
.mod .u{color:var(--mut); font-weight:400}
.mod .arr{transition:transform .18s; flex:none}
.mod:hover .arr{transform:translate(2px,-2px)}
.mod:hover{color:var(--acc-d)}
.mod-s{font-size:10.5px; letter-spacing:.7px; text-transform:uppercase; color:var(--mut2); margin:8px 0 0}
.p-mod .btn{margin-top:14px; align-self:flex-start}

/* about */
.about-grid{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:60px; align-items:start}
.about-grid .ah{font-size:clamp(27px,4.2vw,52px); font-weight:300; letter-spacing:-.035em; margin-bottom:20px}
.about-grid .lede2{color:var(--mut); font-size:16px; line-height:1.8; max-width:52ch; margin-bottom:28px}
.facts{list-style:none; margin:0; padding:0; border-top:1px solid var(--line)}
.facts li{display:flex; align-items:baseline; gap:24px; padding:16px 2px; border-bottom:1px solid var(--line); font-size:15.5px; font-weight:500; letter-spacing:-.01em}
.facts li span{color:var(--mut2); font-size:10px; font-weight:500; letter-spacing:2px; text-transform:uppercase; flex:none; width:76px}

/* ---------- CTA band (dark) ---------- */
.cta-band{background:#060A18; color:#fff; margin-top:66px; text-align:center; padding:78px 0 86px; position:relative; overflow:hidden}
.cta-band::before{content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(720px 320px at 50% -70px, rgba(37,99,235,.28), transparent 62%)}
.cta-band .wrap{position:relative}
.cta-band .k.center{color:var(--acc-soft); text-align:center}
.cta-band h2{color:#fff; font-size:clamp(30px,5vw,58px); font-weight:260; letter-spacing:-.035em; margin-bottom:14px}
.cta-sub{color:#AAB4C9; max-width:44ch; margin:0 auto 32px; font-size:16.5px}
.cta-band .btn.pri{background:#fff; color:var(--acc-d)}
.cta-band .btn.pri:hover{background:var(--acc-soft)}
.cta-s{color:#67718F; font-size:10.5px; letter-spacing:1.6px; text-transform:uppercase; margin:32px auto 0}

/* ---------- footer ---------- */
.foot{border-top:1px solid var(--line); background:#fff}
.foot .wrap{display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; padding:30px 28px}
.fl{color:var(--mut2); font-size:12px; display:flex; gap:12px; align-items:baseline; flex-wrap:wrap}
.fl b{color:var(--ink); font-weight:500; font-family:var(--mono); font-size:13.5px}
.ec{display:flex; gap:20px; flex-wrap:wrap; font-size:12px}
.ec a{color:var(--mut2); transition:.15s}
.ec a:hover{color:var(--acc)}
.ec a b{display:block; color:var(--mut); font-size:12px; font-weight:400; margin-bottom:1px}
.ec a:hover b{color:var(--ink)}
.pow{color:var(--mut2); font-size:11.5px; font-family:var(--mono)}
.pow a{color:var(--mut); font-weight:600}
.pow a:hover{color:var(--acc)}
@media(max-width:900px){.foot .wrap{flex-direction:column; align-items:flex-start; gap:14px}}

/* ---------- reveal ---------- */
.js .rv{opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease}
.js .rv.in{opacity:1; transform:none}
.js .hero-left .rv{transition-delay:.05s}
.js .hero-vis.rv{transition-delay:.2s}

/* ============================================================
   responsive — desktop → tablet → phone
   ============================================================ */
@media(max-width:1120px){
  .hero-grid{grid-template-columns:minmax(0,1fr) 380px; gap:40px}
}
@media(max-width:1040px){
  /* tablet portrait: single-column flow, no cramped side rails */
  .hero{padding:58px 0 6px}
  .hero-grid{grid-template-columns:1fr; gap:30px}
  .hero-vis{max-width:540px}
  .prod-grid{grid-template-columns:1fr; gap:24px}
  .p-mod{max-width:480px}
  .hero h1{font-size:clamp(32px,7vw,54px)}
  .sec-h h2{font-size:clamp(24px,5.6vw,40px)}
  .sec-h h2 em{display:block; margin:10px 0 0; font-size:.5em}
  .about-grid{grid-template-columns:1fr; gap:26px}
  .about-grid .ah{font-size:clamp(24px,5.6vw,38px)}
  .top .cta{display:none}
}
@media(max-width:860px){
  .navbtn{display:inline-flex; flex-direction:column; gap:4.5px; background:none; border:none; padding:8px; cursor:pointer; z-index:70}
  .navbtn span{width:21px; height:2px; background:var(--ink); border-radius:2px; transition:.2s}
  .nav{position:absolute; top:66px; left:0; right:0; flex-direction:column; align-items:stretch; gap:0; background:#fff;
    border-bottom:1px solid var(--line); padding:10px 20px 16px; display:none; box-shadow:0 26px 44px -30px rgba(5,7,15,.35)}
  .nav a{padding:15px 8px; font-size:13px; border-bottom:1px solid var(--panel2)}
  .nav a::after{display:none}
  .nav a:last-child{border-bottom:none}
  .nav.open{display:flex}
}
@media(max-width:640px){
  .wrap{padding:0 20px}
  .hero{padding:44px 0 4px}
  .hero h1{font-size:clamp(26px,8.6vw,40px)}
  .hero .lede{font-size:15px}
  .kicker{font-size:10px; letter-spacing:1.8px}
  .sec-h h2{font-size:clamp(20px,6.4vw,30px)}
  .sec-h h2 em{font-size:.55em}
  .about-grid .ah{font-size:clamp(21px,6.6vw,30px)}
  .p-mod{max-width:none}
  .ticker{display:none}
  .meta{gap:8px 16px}
  .cta-band{padding:58px 0 64px}
}

/* ---------- focus / a11y ---------- */
:is(a,button):focus-visible{outline:2px solid var(--acc); outline-offset:2px; border-radius:6px}
::selection{background:var(--acc); color:#fff}
@media (prefers-reduced-motion: reduce){
  *{animation:none!important; transition:none!important; scroll-behavior:auto!important}
  .tk-run{transform:none!important}
}