@font-face{ font-family:'Inter'; src:url('../fonts/inter-var.woff2') format('woff2'); font-weight:100 900; font-style:normal; font-display:swap; }
@font-face{ font-family:'Outfit'; src:url('../fonts/outfit-var.woff2') format('woff2'); font-weight:100 900; font-style:normal; font-display:swap; }

/* ==========================================================================
   Vandely — main stylesheet
   Light, open palette. Mountains in the hero, clean sections below.
   ========================================================================== */

:root{
  color-scheme: light;
  --bg:#F7F5F0;  --bg2:#EEF2F3; --card:#FFFFFF;
  --ink:#16212A; --ink2:#46545F; --ink3:#7A8791;
  --line:#DEE3E6; --line2:#CAD3D8;
  --sun:#E08A3C; --sun2:#F3BD7E; --sunInk:#A85A17;
  --night:#131C24; --night2:#1C2731;

  /* seven services */
  --c1:#1C9CB5;  /* import & export        */
  --c2:#D8871C;  /* B2B sourcing           */
  --c3:#7657D1;  /* business consulting    */
  --c4:#DE5236;  /* commodity trading      */
  --c5:#2A9A66;  /* construction           */
  --c6:#D9A40E;  /* PPP & renewable energy */
  --c7:#DB5689;  /* design & furniture     */

  --r:14px; --r2:10px;
  --e:cubic-bezier(.22,.61,.36,1);
  --eo:cubic-bezier(.16,1,.3,1);
  --shell:1280px;
  --shadow:0 1px 2px rgba(22,33,42,.04),0 10px 30px -18px rgba(22,33,42,.25);
}
:root[data-theme="dark"]{ color-scheme: light; }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ color-scheme: light; } }

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:84px; -webkit-text-size-adjust:100%; }
body{ margin:0; background:var(--bg); color:var(--ink); font:400 16px/1.65 'Inter',system-ui,sans-serif;
  -webkit-font-smoothing:antialiased; overflow-x:hidden; }
body.lock{ overflow:hidden; }
a{ color:inherit; text-decoration:none; } img,svg{ max-width:100%; }
::selection{ background:var(--sun2); color:var(--ink); }
:is(a,button,input,select,textarea,[tabindex]):focus-visible{ outline:2px solid var(--sun); outline-offset:3px; border-radius:4px; }
.sr{ position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.skip:focus{ position:fixed; left:16px; top:16px; z-index:500; width:auto; height:auto; clip:auto;
  background:var(--ink); color:#fff; padding:10px 18px; border-radius:8px; }

h1,h2,h3,h4{ font-family:'Outfit',system-ui,sans-serif; margin:0; letter-spacing:-.03em; line-height:1.08; }
h1{ font-weight:300; font-size:clamp(2.5rem,5.8vw,4.9rem); }
h2{ font-weight:400; font-size:clamp(1.9rem,3.6vw,2.9rem); }
h3{ font-weight:500; font-size:clamp(1.1rem,1.6vw,1.3rem); letter-spacing:-.02em; }
p{ margin:0; }
.lede{ max-width:60ch; color:var(--ink2); font-size:clamp(1rem,1.15vw,1.1rem); }
.eyebrow{ display:inline-flex; align-items:center; gap:.7rem; font-size:.8125rem; font-weight:500; color:var(--sunInk); }
.eyebrow::before{ content:""; width:26px; height:2px; border-radius:2px; background:var(--sun); }
.shell{ width:100%; max-width:var(--shell); margin-inline:auto; padding-inline:clamp(1.25rem,4vw,2.5rem); }
section{ position:relative; }
.pad{ padding-block:clamp(4.5rem,8vw,7rem); }
.alt{ background:var(--bg2); }
.head{ display:grid; gap:1rem; max-width:720px; }
.head h2{ margin-top:.2rem; }

/* ---------- buttons ---------- */
.btn{ position:relative; display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  font:500 .95rem/1 'Inter',sans-serif; padding:1rem 1.6rem; border-radius:999px; border:1px solid transparent;
  cursor:pointer; overflow:hidden; isolation:isolate; transition:transform .25s var(--e),box-shadow .35s var(--e),background-color .35s,color .35s,border-color .35s; }
.btn:hover{ transform:translateY(-2px); }
.btn-sun{ background:linear-gradient(120deg,var(--sun),var(--sun2)); color:#2A1605; box-shadow:0 12px 30px -14px rgba(224,138,60,.8); }
.btn-sun:hover{ box-shadow:0 18px 40px -14px rgba(224,138,60,.9); }
.btn-ghost{ border-color:rgba(255,255,255,.55); color:#fff; background:rgba(255,255,255,.08); backdrop-filter:blur(6px); }
.btn-ghost:hover{ background:#fff; color:var(--ink); }
.btn-line{ border-color:var(--line2); color:var(--ink); background:var(--card); }
.btn-line:hover{ border-color:var(--ink); }
.btn-wa{ background:#25D366; color:#053B1D; box-shadow:0 12px 30px -14px rgba(37,211,102,.8); }
.btn[disabled]{ opacity:.6; cursor:not-allowed; transform:none; }

/* ---------- header ---------- */
#progress{ position:fixed; top:0; left:0; height:3px; width:0; z-index:300; background:linear-gradient(90deg,var(--sun),var(--sun2)); }
.site-header{ position:fixed; inset-inline:0; top:0; z-index:200; transition:background-color .4s var(--e),box-shadow .4s var(--e),color .4s; color:#fff; }
.site-header.stuck,.site-header.solid{ background:rgba(247,245,240,.9); backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%); box-shadow:0 1px 0 var(--line); color:var(--ink); }
.nav{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding-block:.95rem; }
.brand{ display:flex; align-items:center; gap:.7rem; }
.brand .wm{ font:500 1rem 'Outfit',sans-serif; letter-spacing:.22em; text-transform:uppercase; }
.brand svg .v-sun,.brand svg .v-halo{ transition:transform .7s var(--eo); transform-box:fill-box; transform-origin:center; }
.brand:hover svg .v-sun{ transform:translateY(-6px); }
.brand:hover svg .v-halo{ transform:translateY(-6px) scale(1.5); }
.menu{ display:flex; align-items:center; gap:1.9rem; }
.menu a{ font-size:.9rem; font-weight:500; opacity:.85; position:relative; transition:opacity .3s; }
.menu a::after{ content:""; position:absolute; left:0; bottom:-6px; width:0; height:2px; border-radius:2px; background:var(--sun); transition:width .35s var(--e); }
.menu a:hover{ opacity:1; } .menu a:hover::after{ width:100%; }
.menu .btn{ opacity:1; padding:.7rem 1.2rem; font-size:.85rem; }
.menu .btn::after{ display:none; }
.burger{ display:none; background:none; border:0; color:inherit; padding:.4rem; cursor:pointer; }
@media (max-width:980px){ .menu{ display:none; } .burger{ display:block; } }
.drawer{ position:fixed; inset:0; z-index:250; background:var(--bg); padding:5.5rem clamp(1.25rem,6vw,3rem) 2rem;
  transform:translateY(-102%); transition:transform .55s var(--eo); display:flex; flex-direction:column; gap:.2rem; }
.drawer[data-open="true"]{ transform:none; }
.drawer a{ font:300 clamp(1.6rem,7vw,2.3rem) 'Outfit',sans-serif; letter-spacing:-.03em; padding:.55rem 0; border-bottom:1px solid var(--line); }
.drawer .btn{ margin-top:1.4rem; font:500 1rem 'Inter',sans-serif; letter-spacing:0; border-bottom:0; }
.drawer-close{ position:absolute; top:1rem; right:clamp(1.25rem,4vw,2.5rem); background:none; border:0; padding:.5rem; cursor:pointer; color:var(--ink); }

/* ---------- hero ---------- */
.hero{ position:relative; min-height:100svh; display:flex; align-items:center; overflow:hidden; background:#5E7FA3; color:#fff; }
#terrain{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.hero-scrim{ position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(90deg,rgba(12,18,24,.58) 0%,rgba(12,18,24,.28) 42%,rgba(12,18,24,0) 70%),
             linear-gradient(to top,var(--bg) 0%,rgba(247,245,240,0) 14%); }
.hero-body{ position:relative; z-index:2; width:100%; padding-block:7rem 6rem; }
.since{ display:inline-flex; align-items:center; gap:.6rem; margin-bottom:1.1rem; padding:.4rem .9rem; border-radius:999px;
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.3); backdrop-filter:blur(8px); font:500 .82rem 'Inter',sans-serif; letter-spacing:.04em; color:#fff; }
.since::before{ content:""; width:7px; height:7px; border-radius:2px; transform:rotate(45deg); background:var(--sun2); }
.hero h1{ max-width:15ch; text-shadow:0 2px 30px rgba(0,0,0,.25); }
.hero .lede{ color:rgba(255,255,255,.88); margin-top:1.5rem; max-width:48ch; }
.hero-cta{ display:flex; flex-wrap:wrap; gap:.8rem; margin-top:2.2rem; }
.reveal-line{ display:block; overflow:hidden; padding-bottom:.06em; }
.reveal-line>span{ display:block; transform:translateY(108%); animation:lineUp 1.1s var(--eo) forwards; }
.reveal-line:nth-child(2)>span{ animation-delay:.1s; }
@keyframes lineUp{ to{ transform:none; } }
.hero-hint{ margin-top:2.4rem; display:flex; align-items:center; gap:.6rem; font-size:.8rem; color:rgba(255,255,255,.8); }
.hero-hint i{ width:9px; height:9px; transform:rotate(45deg); background:var(--sun2); box-shadow:0 0 0 0 rgba(243,189,126,.7); animation:ping 2.4s ease-out infinite; }
@keyframes ping{ to{ box-shadow:0 0 0 7px rgba(243,189,126,0); } }
@media (max-width:760px){
  .hero-scrim{ background:linear-gradient(to top,var(--bg) 0%,rgba(247,245,240,0) 12%),rgba(12,18,24,.4); }
  .hero-hint{ display:none; }
}
#peakTip{ position:fixed; z-index:210; pointer-events:none; opacity:0; transform:translate(-50%,-165%);
  background:#fff; color:var(--ink); border-radius:10px; padding:.55rem .8rem; font-size:.78rem; white-space:nowrap;
  box-shadow:var(--shadow); transition:opacity .2s; }
#peakTip b{ font-weight:600; } #peakTip em{ font-style:normal; color:var(--ink3); margin-left:.45rem; }

/* ---------- services ---------- */
.cards{ display:grid; grid-template-columns:1fr; gap:1.1rem; margin-top:3rem; }
@media (min-width:640px){ .cards{ grid-template-columns:repeat(2,1fr); } .card.wide{ grid-column:span 2; } }
@media (min-width:1140px){ .cards{ grid-template-columns:repeat(4,1fr); } }
.card{ position:relative; background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:1.7rem 1.5rem 1.4rem;
  display:flex; flex-direction:column; min-height:360px; overflow:hidden; box-shadow:var(--shadow);
  transform-style:preserve-3d; transition:transform .35s var(--e),border-color .4s,box-shadow .4s; will-change:transform; }
.card::before{ content:""; position:absolute; inset:0 0 auto 0; height:4px; background:var(--c); }
.card::after{ content:""; position:absolute; inset:auto 0 0 0; height:110px; background:var(--c); opacity:.07;
  clip-path:polygon(0% 100%,10% 60%,19% 76%,31% 34%,41% 62%,52% 22%,63% 66%,74% 42%,85% 70%,94% 50%,100% 72%,100% 100%);
  transform:translateY(20px); transition:transform .7s var(--eo),opacity .5s; }
.card:hover{ border-color:color-mix(in srgb,var(--c) 45%,var(--line)); box-shadow:0 22px 50px -24px color-mix(in srgb,var(--c) 55%,transparent); }
.card:hover::after{ transform:none; opacity:.16; }
.card .glow{ position:absolute; inset:0; opacity:0; transition:opacity .4s; pointer-events:none;
  background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%),color-mix(in srgb,var(--c) 14%,transparent),transparent 65%); }
.card:hover .glow{ opacity:1; }
.card-in{ position:relative; z-index:1; display:flex; flex-direction:column; height:100%; }
.ico{ width:46px; height:46px; border-radius:12px; display:grid; place-items:center; color:var(--c);
  background:color-mix(in srgb,var(--c) 12%,#fff); transition:transform .5s var(--eo); }
.card:hover .ico{ transform:translateY(-3px) rotate(-4deg); }
.card .num{ font:500 .72rem 'Outfit',sans-serif; letter-spacing:.12em; color:var(--ink3); margin-top:1.1rem; }
.card h3{ margin-top:.35rem; }
.card p{ margin-top:.55rem; color:var(--ink2); font-size:.9rem; }
.card ul{ list-style:none; margin:1rem 0 0; padding:0; display:grid; gap:.42rem; font-size:.84rem; color:var(--ink2); }
.card li{ display:flex; gap:.55rem; }
.card li::before{ content:""; width:6px; height:6px; margin-top:.5rem; flex:none; border-radius:2px; transform:rotate(45deg); background:var(--c); }
.card .go{ margin-top:auto; padding-top:1.3rem; display:flex; justify-content:space-between; align-items:center;
  font-size:.86rem; font-weight:600; color:var(--c); }
.card .go svg{ transition:transform .4s var(--e); }
.card:hover .go svg{ transform:translate(4px,-4px); }
.stretch::after{ content:""; position:absolute; inset:0; z-index:2; }
.visit{ position:relative; z-index:3; align-self:flex-start; display:inline-flex; align-items:center; gap:.45rem; margin-top:1rem;
  padding:.55rem .95rem; border-radius:999px; background:var(--c); color:#fff; font:600 .8rem 'Inter',sans-serif;
  box-shadow:0 10px 22px -12px var(--c); transition:transform .25s var(--e),filter .25s; }
.visit:hover{ transform:translateY(-2px); filter:brightness(1.08); }
.visit svg{ transition:transform .3s var(--e); } .visit:hover svg{ transform:translate(2px,-2px); }
.card.wide{ background:linear-gradient(120deg,color-mix(in srgb,var(--c) 8%,#fff),#fff 60%); }

/* ---------- process explorer ---------- */
.explorer{ display:grid; grid-template-columns:minmax(220px,290px) 1fr; margin-top:3rem; background:var(--card);
  border:1px solid var(--line); border-radius:var(--r); overflow:hidden; box-shadow:var(--shadow); }
@media (max-width:900px){ .explorer{ grid-template-columns:1fr; } }
.tabs{ display:flex; flex-direction:column; border-right:1px solid var(--line); background:#FBFBF9; }
@media (max-width:900px){ .tabs{ flex-direction:row; overflow-x:auto; border-right:0; border-bottom:1px solid var(--line); } }
.tab{ position:relative; display:flex; align-items:center; gap:.75rem; text-align:left; background:none; border:0;
  border-bottom:1px solid var(--line); padding:1.05rem 1.3rem; font:500 .95rem 'Outfit',sans-serif; letter-spacing:-.01em;
  color:var(--ink2); cursor:pointer; white-space:nowrap; transition:color .3s,background-color .3s; }
.tab:last-child{ border-bottom:0; }
.tab i{ width:10px; height:10px; border-radius:2px; transform:rotate(45deg); background:var(--c); opacity:.45; transition:opacity .3s,transform .4s var(--e); flex:none; }
.tab::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--c); transform:scaleY(0); transition:transform .4s var(--eo); }
.tab:hover{ color:var(--ink); background:#fff; }
.tab[aria-selected="true"]{ color:var(--ink); background:#fff; }
.tab[aria-selected="true"] i{ opacity:1; transform:rotate(45deg) scale(1.25); }
.tab[aria-selected="true"]::before{ transform:scaleY(1); }
@media (max-width:900px){ .tab{ border-bottom:0; } .tab::before{ width:auto; height:3px; top:auto; left:0; right:0; transform:scaleX(0); }
  .tab[aria-selected="true"]::before{ transform:scaleX(1); } }
.panel{ padding:clamp(1.4rem,3vw,2.4rem); }
.panel[hidden]{ display:none; }
.panel.is-in>*{ opacity:0; transform:translateY(10px); animation:pin .55s var(--eo) forwards; }
.panel.is-in>*:nth-child(2){ animation-delay:.06s } .panel.is-in>*:nth-child(3){ animation-delay:.12s }
.panel.is-in>*:nth-child(4){ animation-delay:.18s } .panel.is-in>*:nth-child(5){ animation-delay:.24s }
@keyframes pin{ to{ opacity:1; transform:none; } }
.panel h3{ font-size:1.35rem; }
.panel .sum{ margin-top:.5rem; color:var(--ink2); max-width:62ch; }
.steps4{ display:grid; grid-template-columns:repeat(4,1fr); gap:.7rem; margin-top:1.3rem; counter-reset:st; }
@media (max-width:720px){ .steps4{ grid-template-columns:repeat(2,1fr); } }
.st{ background:var(--bg); border:1px solid var(--line); border-radius:var(--r2); padding:.95rem .9rem; transition:border-color .3s,transform .3s var(--e); }
.st:hover{ border-color:var(--c); transform:translateY(-2px); }
.st b{ display:block; font:600 .72rem 'Outfit',sans-serif; letter-spacing:.1em; color:var(--c); }
.st span{ display:block; margin-top:.35rem; font-size:.82rem; color:var(--ink2); line-height:1.5; }
.panel-cta{ margin-top:1.4rem; }

/* scenes */
.scene{ position:relative; margin:1.4rem 0 0; border-radius:var(--r2); overflow:hidden; border:1px solid var(--line);
  background:linear-gradient(180deg,#D8E6F1 0%,#EEE5DA 72%,#E9DFD2 100%); }
.scene svg{ display:block; width:100%; height:auto; }
.scene figcaption{ position:absolute; left:.8rem; bottom:.7rem; font-size:.7rem; color:var(--ink2);
  background:rgba(255,255,255,.85); padding:.25rem .55rem; border-radius:6px; }
.tb{ transform-box:fill-box; transform-origin:center; }
.veh{ display:none; } .veh[data-on="true"]{ display:block; }
@keyframes sc-rise{ from{ transform:translateY(14px) } to{ transform:translateY(-6px) } }
@keyframes sc-dash{ to{ stroke-dashoffset:-260 } }
@keyframes sc-flow{ to{ stroke-dashoffset:-180 } }
@keyframes sc-puff{ 0%{ opacity:0; transform:translate(0,0) scale(.5) } 22%{ opacity:.45 } 100%{ opacity:0; transform:translate(-16px,-56px) scale(1.9) } }
@keyframes sc-belt{ to{ transform:translateX(-84px) } }
@keyframes sc-ring{ 0%{ opacity:.9; transform:scale(.4) } 100%{ opacity:0; transform:scale(2.6) } }
@keyframes sc-draw{ to{ stroke-dashoffset:0 } }
@keyframes sc-pop{ 0%,8%{ opacity:0; transform:scale(.3) } 18%{ opacity:1; transform:scale(1.2) } 26%,92%{ opacity:1; transform:scale(1) } 100%{ opacity:0 } }
@keyframes sc-jib{ 0%,100%{ transform:rotate(-15deg) } 50%{ transform:rotate(17deg) } }
@keyframes sc-hook{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(30px) } }
@keyframes sc-block{ 0%,10%{ opacity:0; transform:translateY(18px) } 22%,94%{ opacity:1; transform:none } 100%{ opacity:0; transform:translateY(18px) } }
@keyframes sc-candle{ 0%{ transform:scaleY(0); opacity:0 } 14%,100%{ transform:scaleY(1); opacity:1 } }
@keyframes sc-fill{ 0%{ transform:scaleY(.12) } 50%{ transform:scaleY(1) } 100%{ transform:scaleY(.12) } }
@keyframes sc-tilt{ 0%,100%{ transform:rotate(-7deg) } 50%{ transform:rotate(7deg) } }
@keyframes sc-ray{ to{ transform:rotate(360deg) } }
@keyframes sc-sail{ from{ transform:translateX(-140px) } to{ transform:translateX(680px) } }
@keyframes sc-fly{ from{ transform:translate(-110px,26px) } to{ transform:translate(700px,-34px) } }
@keyframes sc-drive{ from{ transform:translateX(-110px) } to{ transform:translateX(680px) } }
@keyframes sc-scan{ 0%,100%{ transform:translateX(0) } 50%{ transform:translateX(250px) } }
@keyframes sc-wave{ to{ stroke-dashoffset:-60 } }
@keyframes vHalo{ 0%,100%{ transform:scale(1); opacity:.4 } 50%{ transform:scale(1.7); opacity:.85 } }
.an-sun{ animation:sc-rise 9s var(--e) infinite alternate; }
.an-ray{ animation:sc-ray 26s linear infinite; }
.an-dash{ stroke-dasharray:9 9; animation:sc-dash 6s linear infinite; }
.an-flow{ stroke-dasharray:7 10; animation:sc-flow 2.6s linear infinite; }
.an-wave{ stroke-dasharray:14 10; animation:sc-wave 3.4s linear infinite; }
.an-belt{ animation:sc-belt 2.4s linear infinite; }
.an-scan{ animation:sc-scan 6.5s var(--e) infinite; }
.an-jib{ animation:sc-jib 9s var(--e) infinite; }
.an-hook{ animation:sc-hook 4.5s var(--e) infinite; }
.an-tilt{ animation:sc-tilt 11s var(--e) infinite; }
.an-sail{ animation:sc-sail 17s linear infinite; }
.an-fly{ animation:sc-fly 9s linear infinite; }
.an-drive{ animation:sc-drive 11s linear infinite; }
.an-draw{ animation:sc-draw 2.6s var(--eo) forwards; }
.an-fillup{ animation:sc-fill 7s var(--e) infinite; }
.scene:hover .an-belt,.scene:hover .an-flow{ animation-duration:1.1s; }
.modes{ display:flex; gap:.45rem; flex-wrap:wrap; margin-top:.9rem; }
.mode{ border:1px solid var(--line2); background:#fff; color:var(--ink2); font:500 .78rem 'Inter',sans-serif;
  padding:.5rem .9rem; border-radius:999px; cursor:pointer; transition:all .3s var(--e); }
.mode:hover{ border-color:var(--c); color:var(--ink); }
.mode[aria-pressed="true"]{ background:var(--c); border-color:var(--c); color:#fff; }
.mode-out{ margin-top:.65rem; font-size:.84rem; color:var(--ink2); }
.mode-out b{ color:var(--ink); font-weight:600; }

/* ---------- PPP ---------- */
.ppp-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1.1rem; margin-top:3rem; }
@media (max-width:940px){ .ppp-grid{ grid-template-columns:1fr; } }
.box{ background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:clamp(1.2rem,2.4vw,1.8rem); box-shadow:var(--shadow); }
.box h3{ font-size:1.12rem; }
.box .sub{ margin-top:.4rem; font-size:.88rem; color:var(--ink2); }
.box svg{ display:block; width:100%; height:auto; margin-top:1rem; }
.struct .node rect{ transition:fill .3s,stroke .3s; }
.struct .node:hover rect{ fill:color-mix(in srgb,var(--c6) 18%,#fff); stroke:var(--c6); }
.struct .lnk{ stroke-dasharray:6 8; animation:sc-flow 3.4s linear infinite; }
.phase{ cursor:pointer; }
.phase rect{ opacity:.35; transition:opacity .3s; }
.phase:hover rect,.phase[data-on="true"] rect{ opacity:1; }
.phase text{ fill:var(--ink2); font:500 10px 'Inter',sans-serif; }
.phase[data-on="true"] text{ fill:var(--ink); }
.phase-out{ margin-top:1rem; padding-top:1rem; border-top:1px solid var(--line); font-size:.88rem; color:var(--ink2); }
.phase-out b{ color:var(--ink); }
.sizing{ display:grid; grid-template-columns:1fr 1.15fr; gap:clamp(1.2rem,3vw,2.2rem); align-items:start; }
@media (max-width:820px){ .sizing{ grid-template-columns:1fr; } }
.calc label{ display:flex; justify-content:space-between; font-size:.88rem; color:var(--ink2); margin-top:1.2rem; }
.calc label b{ font:600 1rem 'Outfit',sans-serif; color:var(--ink); }
.calc input[type=range]{ width:100%; margin-top:.7rem; accent-color:var(--c6); height:24px; }
.kpis{ display:grid; grid-template-columns:repeat(auto-fit,minmax(110px,1fr)); gap:.8rem; margin-top:1.1rem; }
.kpi{ background:var(--bg); border-radius:var(--r2); padding:.85rem .9rem; border:1px solid var(--line); }
.kpi b{ display:block; font:500 1.35rem 'Outfit',sans-serif; letter-spacing:-.02em; color:var(--ink); }
.kpi span{ font-size:.72rem; color:var(--ink3); }
.note{ font-size:.74rem; color:var(--ink3); margin-top:.9rem; }

/* ---------- numbers ---------- */
.stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.1rem; margin-top:3rem; }
@media (max-width:900px){ .stats{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .stats{ grid-template-columns:1fr; } }
.stat{ position:relative; overflow:hidden; background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  padding:1.8rem 1.6rem 1.9rem; box-shadow:var(--shadow); transform-style:preserve-3d; transition:transform .35s var(--e),box-shadow .4s; }
.stat::after{ content:""; position:absolute; inset:auto 0 0 0; height:58%; background:var(--c); opacity:.06;
  clip-path:polygon(0% 100%,9% 58%,18% 76%,30% 30%,41% 62%,53% 18%,64% 66%,75% 40%,86% 70%,94% 48%,100% 70%,100% 100%);
  transform:translateY(22px); transition:transform .8s var(--eo),opacity .6s; }
.stat:hover{ box-shadow:0 24px 50px -24px color-mix(in srgb,var(--c) 55%,transparent); }
.stat:hover::after{ transform:none; opacity:.14; }
.big{ position:relative; z-index:1; display:block; font:200 clamp(4rem,9.5vw,8.4rem)/.9 'Outfit',sans-serif; letter-spacing:-.06em;
  background:linear-gradient(160deg,var(--c) 10%,color-mix(in srgb,var(--c) 55%,#1a1a1a) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent; }
.big .count{ color:inherit; }
.stat h3{ position:relative; z-index:1; margin-top:1rem; }
.stat p{ position:relative; z-index:1; margin-top:.35rem; font-size:.86rem; color:var(--ink2); }

/* ---------- partners ---------- */
.pbanner{ position:relative; margin-top:2.8rem; padding:2.4rem 0 2.8rem; overflow:hidden; isolation:isolate; }
.pbanner .aur{ position:absolute; inset:-25% -10%; z-index:-1; filter:blur(70px); opacity:.55; pointer-events:none; }
.pbanner .aur i{ position:absolute; width:40%; height:70%; border-radius:50%; animation:aur 24s ease-in-out infinite alternate; }
.pbanner .aur i:nth-child(1){ left:0; top:10%; background:#9ED8E6; }
.pbanner .aur i:nth-child(2){ left:22%; top:34%; background:#CBBEF3; animation-duration:28s; animation-delay:-6s; }
.pbanner .aur i:nth-child(3){ left:44%; top:0; background:#F7DD8E; animation-duration:31s; animation-delay:-12s; }
.pbanner .aur i:nth-child(4){ left:62%; top:36%; background:#F5BFD3; animation-duration:26s; animation-delay:-3s; }
.pbanner .aur i:nth-child(5){ left:80%; top:8%; background:#A9E0C4; animation-duration:30s; animation-delay:-9s; }
@keyframes aur{ 0%{ transform:translate(0,0) scale(1) } 50%{ transform:translate(7%,-9%) scale(1.15) } 100%{ transform:translate(-7%,7%) scale(.92) } }
.lanes{ display:grid; gap:1.1rem; -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); }
.lane{ display:flex; gap:1rem; width:max-content; animation:lane 72s linear infinite; }
.lane.rev{ animation-direction:reverse; animation-duration:84s; }
.pbanner:hover .lane,.pbanner[data-paused="true"] .lane{ animation-play-state:paused; }
@keyframes lane{ to{ transform:translateX(-50%); } }
.plogo{ margin:0; position:relative; flex:none; display:grid; place-items:center; height:104px; min-width:172px; padding:14px 22px;
  background:#fff; border-radius:12px; box-shadow:0 8px 24px -16px rgba(22,33,42,.45); transition:transform .45s var(--eo),box-shadow .45s var(--eo); }
.plogo img{ display:block; max-height:72px; max-width:206px; width:auto; height:auto; }
.plogo:hover{ transform:translateY(-6px) scale(1.04); box-shadow:0 20px 40px -18px rgba(22,33,42,.45),0 0 0 2px var(--glow,var(--sun)); }
.plogo figcaption{ position:absolute; left:50%; bottom:-1.45rem; transform:translate(-50%,4px); white-space:nowrap;
  font-size:.7rem; color:var(--ink2); opacity:0; transition:all .3s var(--e); pointer-events:none; }
.plogo:hover figcaption{ opacity:1; transform:translate(-50%,0); }
.pgrid{ display:none; grid-template-columns:repeat(auto-fill,minmax(168px,1fr)); gap:1rem; }
.pgrid .plogo{ min-width:0; }
.pbanner[data-view="grid"] .lanes{ display:none; }
.pbanner[data-view="grid"] .pgrid{ display:grid; }
.no-js .lanes{ display:none; } .no-js .pgrid{ display:grid; }
.pctrl{ display:flex; flex-wrap:wrap; gap:.6rem; }
.pctrl button{ border:1px solid var(--line2); background:#fff; color:var(--ink2); font:500 .8rem 'Inter',sans-serif;
  padding:.55rem 1rem; border-radius:999px; cursor:pointer; transition:all .3s var(--e); }
.pctrl button:hover,.pctrl button[aria-pressed="true"]{ border-color:var(--ink); color:var(--ink); }
.pnote{ font-size:.74rem; color:var(--ink3); margin-top:.9rem; }

/* ---------- history ---------- */
.ascent{ margin-top:2.6rem; background:var(--card); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; box-shadow:var(--shadow); }
.ascent svg{ display:block; width:100%; height:auto; }
.ascent .node{ cursor:pointer; outline:none; }
.ascent .dot{ transition:transform .35s var(--e); transform-box:fill-box; transform-origin:center; }
.ascent .node:hover .dot,.ascent .node[data-on="true"] .dot{ transform:scale(1.6); }
.ascent .yr{ fill:var(--ink); font:600 12px 'Outfit',sans-serif; }
.ascent .lbl{ fill:var(--ink3); font:400 10px 'Inter',sans-serif; opacity:0; transition:opacity .3s; }
.ascent .node:hover .lbl,.ascent .node[data-on="true"] .lbl{ opacity:1; }
.timeline{ margin-top:1.6rem; display:grid; gap:.7rem; }
.tl{ display:grid; grid-template-columns:110px 1fr; gap:1.4rem; padding:1.1rem 1.3rem; background:var(--card);
  border:1px solid var(--line); border-radius:var(--r2); transition:border-color .3s,background-color .3s; }
@media (max-width:640px){ .tl{ grid-template-columns:1fr; gap:.3rem; } }
.tl b{ font:500 1.15rem 'Outfit',sans-serif; color:var(--sunInk); }
.tl h4{ font:600 1rem 'Outfit',sans-serif; letter-spacing:-.01em; }
.tl p{ margin-top:.25rem; font-size:.88rem; color:var(--ink2); }
.tl[data-on="true"]{ border-color:var(--sun); background:#FFF8F0; }

/* ---------- offices ---------- */
.topo-wrap{ position:relative; margin-top:2.6rem; border-radius:var(--r); overflow:hidden; border:1px solid var(--line); background:#fff; box-shadow:var(--shadow); }
#topo{ display:block; width:100%; height:clamp(260px,34vw,380px); cursor:crosshair; }
.topo-note{ position:absolute; left:1rem; bottom:.9rem; font-size:.7rem; color:var(--ink3); background:rgba(255,255,255,.85); padding:.3rem .6rem; border-radius:6px; }
.offices{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.1rem; margin-top:1.1rem; }
@media (max-width:900px){ .offices{ grid-template-columns:1fr; } }
.office{ display:flex; flex-direction:column; align-items:stretch; justify-content:flex-start; width:100%; text-align:left; font:inherit; color:inherit; background:var(--card); border:1px solid var(--line);
  border-radius:var(--r); padding:1.4rem 1.4rem 1.3rem; cursor:pointer; box-shadow:var(--shadow); transition:border-color .3s,transform .3s var(--e); }
.office:hover,.office[aria-pressed="true"]{ border-color:var(--sun); transform:translateY(-3px); }
.office .row{ display:flex; justify-content:space-between; align-items:baseline; gap:1rem; }
.office .ttl{ font:500 1.15rem 'Outfit',sans-serif; letter-spacing:-.02em; color:var(--ink); }
.office .clock{ font:300 1.4rem 'Outfit',sans-serif; color:var(--sunInk); }
.office p{ margin-top:.55rem; font-size:.9rem; color:var(--ink2); }
.office .tag{ display:block; margin-top:.8rem; font-size:.72rem; font-weight:600; color:var(--ink3); letter-spacing:.06em; text-transform:uppercase; }

/* ---------- contact ---------- */
.contact{ display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(1.2rem,3vw,2.2rem); margin-top:3rem; align-items:start; }
@media (max-width:900px){ .contact{ grid-template-columns:1fr; } }
.direct{ display:grid; gap:1rem; }
.wa-card{ display:block; background:linear-gradient(135deg,#25D366,#1EB457); color:#fff; border-radius:var(--r); padding:1.6rem;
  box-shadow:0 20px 44px -22px rgba(37,211,102,.9); transition:transform .3s var(--e),box-shadow .3s; position:relative; overflow:hidden; }
.wa-card:hover{ transform:translateY(-3px); box-shadow:0 26px 50px -22px rgba(37,211,102,1); }
.wa-card svg.wa{ width:40px; height:40px; }
.wa-card b{ display:block; margin-top:1rem; font:500 1.35rem 'Outfit',sans-serif; letter-spacing:-.02em; }
.wa-card span{ display:block; margin-top:.2rem; font-size:.9rem; opacity:.92; }
.wa-card .arrow{ position:absolute; right:1.4rem; top:1.4rem; transition:transform .35s var(--e); }
.wa-card:hover .arrow{ transform:translate(4px,-4px); }
.mail-card{ display:block; background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:1.4rem 1.6rem; box-shadow:var(--shadow); transition:border-color .3s; }
.mail-card:hover{ border-color:var(--sun); }
.mail-card small{ display:block; font-size:.78rem; color:var(--ink3); }
.mail-card b{ display:block; margin-top:.25rem; font:500 1.15rem 'Outfit',sans-serif; }
.reply{ font-size:.84rem; color:var(--ink3); padding-left:.2rem; }
.form{ background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:clamp(1.3rem,3vw,2rem); box-shadow:var(--shadow); }
.fgrid{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
@media (max-width:600px){ .fgrid{ grid-template-columns:1fr; } }
.full{ grid-column:1/-1; }
.lab{ display:block; font-size:.82rem; font-weight:500; color:var(--ink2); margin-bottom:.4rem; }
.in{ width:100%; background:var(--bg); border:1px solid var(--line); border-radius:10px; padding:.85rem .95rem;
  color:var(--ink); font:400 .95rem/1.5 'Inter',sans-serif; transition:border-color .25s,background-color .25s,box-shadow .25s; }
.in::placeholder{ color:#9AA5AD; }
.in:focus{ outline:none; background:#fff; border-color:var(--sun); box-shadow:0 0 0 4px rgba(224,138,60,.15); }
.in[aria-invalid="true"]{ border-color:#D6453D; }
textarea.in{ min-height:130px; resize:vertical; }
.err{ display:none; font-size:.76rem; color:#C23A33; margin-top:.3rem; }
.err[data-on="true"]{ display:block; }
.chips{ display:flex; flex-wrap:wrap; gap:.45rem; }
.chips input{ position:absolute; opacity:0; pointer-events:none; }
.chips label{ display:inline-flex; align-items:center; gap:.45rem; border:1px solid var(--line2); background:#fff; border-radius:999px;
  padding:.5rem .85rem; font-size:.82rem; cursor:pointer; color:var(--ink2); transition:all .25s var(--e); }
.chips label::before{ content:""; width:8px; height:8px; border-radius:2px; transform:rotate(45deg); background:var(--c); }
.chips label:hover{ border-color:var(--c); color:var(--ink); }
.chips input:checked+label{ background:var(--c); border-color:var(--c); color:#fff; }
.chips input:checked+label::before{ background:#fff; }
.chips input:focus-visible+label{ outline:2px solid var(--sun); outline-offset:2px; }
.sendvia{ display:grid; grid-template-columns:1fr 1fr; gap:.7rem; }
@media (max-width:520px){ .sendvia{ grid-template-columns:1fr; } }
.via{ position:relative; cursor:pointer; }
.via input{ position:absolute; opacity:0; pointer-events:none; }
.via-box{ position:relative; display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto auto; column-gap:.7rem; align-items:center;
  padding:.9rem 2.6rem .9rem 1rem; border:1.5px solid var(--line2); border-radius:12px; background:#fff; color:var(--ink2);
  transition:border-color .25s,background-color .25s,box-shadow .25s; }
.via-box svg{ grid-row:1/3; color:var(--ink3); transition:color .25s; }
.via-box b{ font:600 .95rem 'Outfit',sans-serif; color:var(--ink); }
.via-box small{ font-size:.74rem; color:var(--ink3); }
.via .tick{ position:absolute; right:.9rem; top:50%; width:20px; height:20px; margin-top:-10px; border-radius:6px; border:1.5px solid var(--line2); background:#fff; transition:all .25s; }
.via input:checked+.via-box{ border-color:var(--sun); background:#FFF8F0; box-shadow:0 0 0 3px rgba(224,138,60,.12); }
.via input:checked+.via-box svg{ color:var(--sunInk); }
.via input:checked+.via-box .tick{ background:var(--sun) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.2 3.2L15 7' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat; border-color:var(--sun); }
.via.wa input:checked+.via-box{ border-color:#25D366; background:#F0FBF4; box-shadow:0 0 0 3px rgba(37,211,102,.14); }
.via.wa input:checked+.via-box svg{ color:#1EA952; }
.via.wa input:checked+.via-box .tick{ background-color:#25D366; border-color:#25D366; }
.via input:focus-visible+.via-box{ outline:2px solid var(--sun); outline-offset:2px; }
.done .btn{ margin-top:1rem; } .done-wa{ margin:0; }
.consent{ display:flex; gap:.6rem; align-items:flex-start; font-size:.82rem; color:var(--ink2); }
.consent input{ margin-top:.2rem; width:16px; height:16px; accent-color:var(--sun); flex:none; }
.fbar{ display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap; margin-top:1.3rem; }
.fbar small{ font-size:.78rem; color:var(--ink3); }
#fStatus{ margin-top:1rem; font-size:.92rem; }
.done{ display:none; text-align:center; padding:2.4rem 1rem; }
.done svg{ width:64px; height:64px; }
.done h3{ margin-top:1rem; font-size:1.4rem; }
.done p{ margin-top:.4rem; color:var(--ink2); }
.form[data-state="done"] form{ display:none; }
.form[data-state="done"] .done{ display:block; animation:pin .6s var(--eo); }
.fallback{ display:flex; gap:.6rem; flex-wrap:wrap; margin-top:.8rem; }

/* ---------- footer ---------- */
.site-footer{ position:relative; background:var(--night); color:#C9D2D8; }
.site-footer .ridge{ display:block; width:100%; height:clamp(50px,7vw,100px); background:var(--bg2); }
.site-footer .ridge svg{ display:block; width:100%; height:100%; }
.fwrap{ padding-block:3.2rem 2.4rem; }
.fcols{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:2rem; }
@media (max-width:900px){ .fcols{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .fcols{ grid-template-columns:1fr; } }
.site-footer .brand{ color:#fff; }
.site-footer h4{ font:600 .92rem 'Outfit',sans-serif; color:#fff; letter-spacing:0; }
.site-footer ul{ list-style:none; margin:1rem 0 0; padding:0; display:grid; gap:.6rem; font-size:.88rem; }
.site-footer ul a{ color:#AEB9C1; transition:color .3s; } .site-footer ul a:hover{ color:var(--sun2); }
.fbase{ margin-top:2.6rem; padding-top:1.4rem; border-top:1px solid rgba(255,255,255,.1); display:flex; flex-wrap:wrap; justify-content:space-between; gap:1rem; font-size:.78rem; color:#8D99A2; }

/* floating whatsapp + top */
#wa{ position:fixed; right:clamp(1rem,2.5vw,1.8rem); bottom:clamp(1rem,2.5vw,1.8rem); z-index:190; display:flex; align-items:center;
  height:56px; padding:0 16px; gap:0; border-radius:28px; background:#25D366; color:#053B1D; box-shadow:0 16px 36px -14px rgba(37,211,102,.85);
  transition:gap .45s var(--eo),padding .45s var(--eo),transform .3s var(--e); }
#wa span{ max-width:0; overflow:hidden; white-space:nowrap; font:600 .88rem 'Inter',sans-serif; transition:max-width .5s var(--eo); }
#wa:hover,#wa:focus-visible{ gap:.55rem; padding:0 20px 0 16px; transform:translateY(-2px); }
#wa:hover span,#wa:focus-visible span{ max-width:200px; }
#wa::after{ content:""; position:absolute; inset:0; border-radius:inherit; border:2px solid #25D366; animation:waPing 2.6s ease-out infinite; pointer-events:none; }
@keyframes waPing{ 0%{ transform:scale(1); opacity:.7 } 100%{ transform:scale(1.5); opacity:0 } }
#top{ position:fixed; left:clamp(1rem,2.5vw,1.8rem); bottom:clamp(1rem,2.5vw,1.8rem); z-index:190; width:46px; height:46px; border-radius:50%;
  display:grid; place-items:center; background:#fff; color:var(--ink); border:1px solid var(--line); box-shadow:var(--shadow); cursor:pointer;
  opacity:0; transform:translateY(12px); pointer-events:none; transition:all .4s var(--e); }
#top[data-on="true"]{ opacity:1; transform:none; pointer-events:auto; }

/* page template (legal pages etc.) */
.page-wrap{ padding-block:8rem 5rem; }
.page-wrap .entry{ max-width:760px; margin-top:1.6rem; }
.entry{ color:var(--ink2); }
.entry h2,.entry h3{ color:var(--ink); font-size:1.22rem; font-weight:500; margin:1.9rem 0 .5rem; }
.entry p{ margin:.6rem 0; } .entry ul{ margin:.6rem 0; padding-left:1.2rem; } .entry li{ margin:.4rem 0; }
.entry strong{ color:var(--ink); font-weight:600; }
.entry a{ color:var(--sunInk); text-decoration:underline; text-underline-offset:2px; }

/* privacy policy dialog (preview) */
.policy{ border:0; padding:0; border-radius:var(--r); width:min(780px,92vw); max-height:88vh; background:#fff; color:var(--ink);
  box-shadow:0 40px 90px -30px rgba(10,16,22,.55); }
.policy::backdrop{ background:rgba(19,28,36,.55); backdrop-filter:blur(4px); }
.policy[open]{ animation:pin .45s var(--eo); }
.policy-in{ padding:clamp(1.4rem,4vw,2.6rem); max-height:88vh; overflow:auto; }
.policy-close{ position:sticky; top:0; float:right; width:40px; height:40px; border-radius:50%; border:1px solid var(--line);
  background:#fff; color:var(--ink); cursor:pointer; display:grid; place-items:center; }
.policy-close:hover{ border-color:var(--ink); }
.plink{ display:inline-block; margin:.45rem 0 0 1.6rem; font-size:.8rem; color:var(--sunInk); text-decoration:underline; text-underline-offset:2px; }

/* reveal */
[data-rev]{ opacity:0; transform:translateY(18px); }
[data-rev][data-shown="true"]{ opacity:1; transform:none; transition:opacity .8s var(--eo) var(--d,0ms),transform .8s var(--eo) var(--d,0ms); }
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation:none !important; transition:none !important; }
  [data-rev],.reveal-line>span,.panel.is-in>*{ opacity:1 !important; transform:none !important; }
}