:root{
    --green:#2fa84a;
    --green-bright:#37c44d;
    --green-soft:#e8f6ec;
    --navy:#1a2456;
    --navy-soft:#2a3470;
    --ink:#0e1726;
    --muted:#64708a;
    --bg:#f5f7f6;
    --bg-2:#eef1f0;
    --card:#ffffff;
    --line:#e4e8ea;
    --shadow-sm:0 4px 14px rgba(16,23,38,.05);
    --shadow:0 18px 50px rgba(16,23,38,.10);
    --shadow-lg:0 30px 80px rgba(16,23,38,.14);
    --rad:22px;          /* large cards / sections */
    --rad-md:18px;       /* standard cards */
    --rad-sm:12px;       /* chips / small elements */
    --rad-pill:999px;    /* buttons / tags */
    /* layout & spacing scale (8px base) */
    --container:1240px;
    --container-pad:28px;
    --space-section:96px;     /* vertical padding per section (desktop) */
    --space-section-sm:64px;  /* vertical padding per section (mobile) */
    --gap:22px;               /* default grid gap */
    /* motion */
    --ease:cubic-bezier(.22,1,.36,1);
    --dur-reveal:.7s;
    --dur-hover:.3s;
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{
    font-family:'Plus Jakarta Sans',sans-serif;
    background:var(--bg);
    color:var(--ink);
    line-height:1.6;
    overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3,h4,.display{font-family:'Sora',sans-serif;letter-spacing:-.02em;line-height:1.05}
  a{text-decoration:none;color:inherit}
  .wrap{max-width:var(--container);margin:0 auto;padding:0 var(--container-pad)}
  .green{color:var(--green)}
  .navy{color:var(--navy)}

  /* ---------- LOGO ---------- */
  .logo{display:flex;align-items:center;gap:11px}
  .logo svg{width:42px;height:42px;flex:none}
  .logo .name{font-family:'Sora',sans-serif;font-weight:800;font-size:22px;letter-spacing:.5px;color:var(--green);line-height:1}
  .logo .name small{display:block;font-weight:600;font-size:9.5px;letter-spacing:6px;color:var(--navy);margin-top:2px}

  /* ---------- NAV ---------- */
  nav{
    position:sticky;top:14px;z-index:50;margin:14px auto 0;max-width:1240px;
    display:flex;align-items:center;justify-content:space-between;
    background:rgba(255,255,255,.78);backdrop-filter:blur(16px);
    border:1px solid rgba(255,255,255,.7);border-radius:20px;
    padding:14px 22px;box-shadow:var(--shadow-sm);
  }
  .navlinks{display:flex;gap:34px;align-items:center}
  .navlinks a{font-weight:600;font-size:15px;color:#2a3140;position:relative;transition:color .2s}
  .navlinks a:hover{color:var(--green)}
  .navlinks a.active{color:var(--green)}
  .navlinks a.active::after{content:"";position:absolute;left:50%;bottom:-9px;transform:translateX(-50%);width:6px;height:6px;border-radius:50%;background:var(--green)}
  .btn{
    display:inline-flex;align-items:center;gap:9px;font-weight:700;font-size:15px;
    padding:13px 24px;border-radius:999px;cursor:pointer;border:none;transition:.25s;
  }
  .btn-primary{background:var(--green);color:#fff;box-shadow:0 10px 24px rgba(47,168,74,.32)}
  .btn-primary:hover{background:var(--green-bright);transform:translateY(-2px);box-shadow:0 16px 32px rgba(47,168,74,.4)}
  .btn-ghost{background:#fff;color:var(--ink);border:1.5px solid var(--line)}
  .btn-ghost:hover{border-color:var(--green);color:var(--green);transform:translateY(-2px)}
  .btn .arr{transition:transform .25s}
  .btn:hover .arr{transform:translateX(4px)}
  .menu-toggle{display:none;background:none;border:none;cursor:pointer}

  /* ---------- HERO ---------- */
  .hero{position:relative;text-align:center;padding:78px 0 70px;overflow:hidden}
  .rings{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;z-index:0}
  .rings span{position:absolute;border:1px solid rgba(47,168,74,.10);border-radius:50%}
  .rings span:nth-child(1){width:560px;height:560px}
  .rings span:nth-child(2){width:840px;height:840px;border-color:rgba(47,168,74,.07)}
  .rings span:nth-child(3){width:1160px;height:1160px;border-color:rgba(47,168,74,.05)}
  .hero-inner{position:relative;z-index:2;max-width:880px;margin:0 auto}
  .badge{
    display:inline-flex;align-items:center;gap:8px;background:var(--green-soft);color:var(--green);
    font-weight:700;font-size:13px;letter-spacing:1.4px;padding:9px 18px;border-radius:999px;margin-bottom:26px;
  }
  .badge svg{width:15px;height:15px}
  .hero h1{font-size:clamp(46px,8vw,96px);font-weight:800;color:var(--ink)}
  .hero h1 .swap{color:var(--green);display:inline-block;min-width:1ch}
  .hero p.sub{font-size:clamp(17px,2vw,21px);color:var(--muted);max-width:620px;margin:24px auto 0;font-weight:500}
  .hero .cta-row{display:flex;gap:16px;justify-content:center;margin-top:38px;flex-wrap:wrap}
  .btn-lg{padding:17px 30px;font-size:16px}

  /* floating icon cards */
  .float{
    position:absolute;z-index:1;width:96px;height:96px;border-radius:26px;background:#fff;
    display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow);
    border:1px solid rgba(255,255,255,.8);
  }
  .float svg{width:46px;height:46px;stroke:var(--green);fill:none;stroke-width:1.7}
  .f1{top:120px;left:5%;animation:bob 6s ease-in-out infinite}
  .f2{top:115px;right:5%;animation:bob 6.6s ease-in-out infinite .4s}
  .f3{bottom:120px;left:8%;animation:bob 7s ease-in-out infinite .8s}
  .f4{bottom:130px;right:7%;animation:bob 6.2s ease-in-out infinite .2s}
  @keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-16px)}}
  @media(max-width:880px){.float{display:none}}

  /* ---------- TRUST STRIP ---------- */
  .strip{
    max-width:1100px;margin:18px auto 0;background:#fff;border:1px solid var(--line);
    border-radius:var(--rad);box-shadow:var(--shadow-sm);display:grid;grid-template-columns:repeat(4,1fr);
    position:relative;z-index:3;
  }
  .strip .cell{display:flex;align-items:center;gap:14px;padding:22px 24px;border-right:1px solid var(--line)}
  .strip .cell:last-child{border-right:none}
  .strip .ic{width:38px;height:38px;flex:none;color:var(--green)}
  .strip .ic svg{width:100%;height:100%;stroke:var(--green);fill:none;stroke-width:1.8}
  .strip h4{font-size:16px;font-weight:700;color:var(--ink)}
  .strip span{font-size:13.5px;color:var(--muted)}
  .trustline{text-align:center;margin-top:30px;color:var(--muted);font-weight:600;font-size:15px;display:flex;align-items:center;justify-content:center;gap:14px}
  .trustline svg{width:18px;height:18px;color:var(--green);fill:var(--green)}

  /* ---------- SECTION SHELL ---------- */
  section{position:relative}
  .sec{padding:var(--space-section) 0}
  .eyebrow{font-weight:700;letter-spacing:2px;font-size:13px;color:var(--green);text-transform:uppercase;margin-bottom:16px}
  .sec h2{font-size:clamp(38px,5vw,62px);font-weight:800}
  .underline{width:74px;height:5px;background:var(--green);border-radius:4px;margin:18px 0 24px}
  .lede{font-size:18px;color:var(--muted);max-width:480px;font-weight:500}

  /* scroll progress bar (global) */
  .scrollbar{position:fixed;top:0;left:0;right:0;height:3px;background:transparent;z-index:1000;pointer-events:none}
  .scrollbar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--green),var(--green-bright));box-shadow:0 0 10px rgba(47,168,74,.5)}

  /* ============ WE DESIGN · horizontal showcase ============ */
  .hshow{position:relative;background:linear-gradient(180deg,#fff 0%,var(--bg) 100%)}
  .hshow-sticky{position:sticky;top:0;height:100vh;min-height:660px;display:flex;align-items:center;overflow:hidden}
  .hshow-inner{display:grid;grid-template-columns:330px 1fr;gap:50px;align-items:center;width:100%}
  .hshow-rail h2{font-size:clamp(36px,5vw,60px);font-weight:800}
  .hshow-rail h2 .we{display:block;color:var(--ink);font-size:.6em}
  .hshow-rail .lede{max-width:300px;font-size:16.5px;margin-bottom:4px}
  .hshow-meta{display:flex;align-items:center;gap:16px;margin:24px 0 22px;max-width:300px}
  .hp-track{flex:1;height:6px;background:var(--bg-2);border-radius:4px;overflow:hidden}
  .hp-track i{display:block;height:100%;width:16.6%;background:linear-gradient(90deg,var(--green),var(--green-bright));border-radius:4px;transition:width .12s linear}
  .hp-count{font-family:'Sora',sans-serif;font-weight:700;color:var(--ink);font-size:13px;white-space:nowrap}
  .hp-count b{font-size:22px;color:var(--green)}
  .hp-count span{color:var(--muted);font-weight:600}
  .hshow-hint{display:inline-flex;align-items:center;gap:8px;margin-top:20px;color:var(--muted);font-size:13px;font-weight:600}
  .hshow-hint svg{width:20px;height:20px;stroke:var(--green);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;animation:hintNudge 1.5s ease infinite}
  @keyframes hintNudge{0%,100%{transform:translateX(0)}50%{transform:translateX(6px)}}

  .hshow-viewport{overflow:hidden}
  .htrack{display:flex;gap:24px;will-change:transform;padding:14px 0}
  .hpanel{
    flex:0 0 340px;height:clamp(420px,70vh,560px);position:relative;overflow:hidden;
    background:var(--card);border:1px solid var(--line);border-radius:var(--rad);box-shadow:var(--shadow-sm);
    display:flex;flex-direction:column;opacity:.6;
    transition:transform .45s var(--ease),box-shadow .45s,border-color .45s,opacity .45s;transform:scale(.95);
  }
  .hpanel.active{opacity:1;transform:scale(1);box-shadow:var(--shadow);border-color:rgba(47,168,74,.4)}
  .hpanel-brand{flex-basis:440px}
  .hp-index{position:absolute;top:16px;right:20px;font-family:'Sora',sans-serif;font-weight:800;font-size:19px;color:var(--green);opacity:.55;z-index:3}
  .hp-visual{flex:1;display:flex;align-items:center;justify-content:center;background:radial-gradient(130% 130% at 0 0,#fff,var(--green-soft));border-bottom:1px solid var(--line)}
  .hp-visual .mk{width:70%;height:auto;display:block;transition:transform .45s var(--ease)}
  .hpanel.active .hp-visual .mk{transform:scale(1.06)}
  .hpanel-body{padding:24px 26px 28px}
  .hpanel-body h3{font-size:21px;font-weight:700;margin-bottom:8px;color:var(--ink)}
  .hpanel-body p{color:var(--muted);font-size:14.5px;font-weight:500;line-height:1.55}

  .dtag{display:inline-block;font-size:11px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:var(--green);background:var(--green-soft);padding:5px 11px;border-radius:999px;margin-bottom:12px}
  .dchips{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
  .dchips span{font-size:12px;font-weight:600;color:var(--navy);background:var(--bg-2);border:1px solid var(--line);border-radius:999px;padding:5px 11px}

  /* brand board (panel 01) */
  .brandboard{flex:1;position:relative;overflow:hidden;padding:28px;display:flex;flex-direction:column;justify-content:center;gap:18px;background:radial-gradient(130% 130% at 0% 0%,#fff 0%,var(--green-soft) 100%);border-bottom:1px solid var(--line)}
  .bb-mono{position:absolute;right:-12px;bottom:-44px;font-family:'Sora',sans-serif;font-weight:800;font-size:190px;line-height:1;color:var(--navy);opacity:.06;pointer-events:none;user-select:none}
  .bb-logo{align-self:flex-start;background:#fff;border:1px solid var(--line);border-radius:16px;padding:20px 24px;box-shadow:var(--shadow-sm);display:flex;position:relative;z-index:1}
  .bb-logo img{width:180px;height:auto;display:block}
  .bb-swatches{display:flex;gap:9px;flex-wrap:wrap;position:relative;z-index:1}
  .bb-swatches span{display:flex;align-items:center;gap:7px;font-size:10.5px;font-weight:700;letter-spacing:.4px;color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:9px;padding:5px 9px 5px 7px}
  .bb-swatches span::before{content:"";width:14px;height:14px;border-radius:5px;background:var(--c);box-shadow:inset 0 0 0 1px rgba(0,0,0,.06)}
  .bb-type{align-self:flex-start;display:inline-flex;align-items:center;gap:11px;background:#fff;border:1px solid var(--line);border-radius:11px;padding:7px 13px;box-shadow:var(--shadow-sm);position:relative;z-index:1}
  .bb-type b{font-family:'Sora',sans-serif;font-weight:800;font-size:24px;color:var(--navy);line-height:1}
  .bb-type span{font-size:11.5px;color:var(--muted);font-weight:600}

  /* mockup micro-motion (active panel / hover) */
  .mk-heart,.mk-play,.mk-spark{transform-box:fill-box;transform-origin:center}
  @media (prefers-reduced-motion: no-preference){
    .hpanel.active .mk-heart,.hpanel:hover .mk-heart{animation:beat 1s ease infinite}
    .hpanel.active .mk-play,.hpanel:hover .mk-play{animation:pulse 1.4s ease infinite}
    .hpanel.active .mk-spark,.hpanel:hover .mk-spark{animation:twinkle 1.3s ease infinite}
    .hpanel .mk-spark:nth-of-type(2){animation-delay:.4s}
  }
  @keyframes beat{0%,100%{transform:scale(1)}28%{transform:scale(1.22)}42%{transform:scale(1)}70%{transform:scale(1.12)}}
  @keyframes pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.14);opacity:.82}}
  @keyframes twinkle{0%,100%{opacity:.3;transform:scale(.65)}50%{opacity:1;transform:scale(1.18)}}

  /* static fallback (reduced-motion / no-pin): rail beside a horizontal scroller */
  .hshow.is-static .hshow-sticky{position:static;height:auto;min-height:0;display:block;overflow:visible;padding:var(--space-section) 0}
  .hshow.is-static .hshow-viewport{overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:14px}
  .hshow.is-static .htrack{transform:none!important}
  .hshow.is-static .hpanel{opacity:1;transform:none;height:clamp(420px,62vh,520px);scroll-snap-align:start}
  .hshow.is-static .hshow-meta{display:none}

  /* WE DEVELOP */
  .develop{background:var(--navy);color:#fff;overflow:hidden}
  .develop .eyebrow{color:var(--green-bright)}
  .develop h2{color:#fff}
  .develop .head{text-align:center;max-width:680px;margin:0 auto 56px}
  .develop .lede{color:#b9c0d8;margin:0 auto}
  .develop .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
  .dcard{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:var(--rad);padding:34px 30px;transition:.3s}
  .dcard:hover{background:rgba(255,255,255,.09);transform:translateY(-6px);border-color:rgba(55,196,77,.4)}
  .dcard .badge-ic{width:56px;height:56px;border-radius:16px;background:rgba(55,196,77,.15);display:flex;align-items:center;justify-content:center;margin-bottom:22px}
  .dcard .badge-ic svg{width:28px;height:28px;stroke:var(--green-bright);fill:none;stroke-width:1.8}
  .dcard h3{font-size:21px;font-weight:700;margin-bottom:10px}
  .dcard p{color:#b9c0d8;font-size:15px}
  .dot-grid{position:absolute;top:30px;right:30px;width:160px;height:90px;opacity:.5;background-image:radial-gradient(rgba(255,255,255,.3) 1.4px,transparent 1.4px);background-size:14px 14px}
  .dot-grid.left{left:30px;right:auto;top:auto;bottom:30px}

  /* WE DOMINATE */
  .dominate{text-align:center;background:linear-gradient(180deg,var(--bg) 0%,#fff 100%)}
  .constel{position:relative;width:540px;max-width:92vw;aspect-ratio:1.15/1;margin:0 auto 12px;overflow:visible}
  .constel .center{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:120px;z-index:3}
  .node{
    position:absolute;width:74px;height:74px;border-radius:50%;background:#fff;box-shadow:var(--shadow);
    display:flex;align-items:center;justify-content:center;z-index:2;transition:transform .3s;
  }
  .node:hover{transform:scale(1.12)}
  .node svg,.node img{width:38px;height:38px}
  .n1{top:2%;left:50%;transform:translateX(-50%)}
  .n2{top:16%;right:8%}
  .n3{top:46%;right:0}
  .n4{bottom:8%;right:22%}
  .n5{bottom:8%;left:22%}
  .n6{top:46%;left:0}
  .n7{top:16%;left:8%}
  .node:hover{transform:scale(1.12)}
  .n1:hover{transform:translateX(-50%) scale(1.12)}
  .constel svg.web{position:absolute;inset:0;width:100%;height:100%;z-index:1;overflow:visible}
  .constel svg.web line{stroke:#d3dade;stroke-width:1;fill:none}
  .constel svg.web .flow line{
    stroke:rgba(47,168,74,.35);stroke-width:1.2;stroke-dasharray:6 10;
    animation:dashflow 2.6s linear infinite;
  }
  @keyframes dashflow{to{stroke-dashoffset:-32}}
  .constel svg.web .spokes line{stroke:rgba(47,168,74,.14);stroke-width:1}
  .constel svg.web .pulses circle{fill:var(--green-bright);filter:drop-shadow(0 0 5px rgba(55,196,77,.9))}
  /* glowing node rings */
  .node::before{
    content:"";position:absolute;inset:-6px;border-radius:50%;
    border:2px solid rgba(47,168,74,.5);opacity:0;
    animation:nodepulse 2.8s ease-out infinite;
  }
  @keyframes nodepulse{
    0%{transform:scale(.85);opacity:.7}
    70%{transform:scale(1.45);opacity:0}
    100%{opacity:0}
  }
  .n1::before{animation-delay:0s}.n2::before{animation-delay:.4s}
  .n3::before{animation-delay:.8s}.n4::before{animation-delay:1.2s}
  .n5::before{animation-delay:1.6s}.n6::before{animation-delay:2s}.n7::before{animation-delay:2.4s}
  /* centre receiving glow */
  .constel .center{filter:drop-shadow(0 0 0 rgba(55,196,77,0));animation:centerglow 2.4s ease-in-out infinite}
  @keyframes centerglow{0%,100%{filter:drop-shadow(0 6px 14px rgba(16,23,38,.12))}50%{filter:drop-shadow(0 0 22px rgba(55,196,77,.45))}}
  @media(prefers-reduced-motion:reduce){
    .flow line,.pulses circle,.node::before,.center{animation:none}
  }
  /* ---- viral reaction bubbles ---- */
  .reactions{position:absolute;inset:0;z-index:4;pointer-events:none}
  .rx{
    position:absolute;width:34px;height:34px;border-radius:50%;background:#fff;
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 8px 20px rgba(16,23,38,.16);opacity:0;
    animation:viral 4.4s ease-in-out infinite;
  }
  .rx svg{width:18px;height:18px}
  .rx.like  svg{fill:#ff4d6d;stroke:none}
  .rx.thumb svg{fill:#2fa84a;stroke:none}
  .rx.cmt   svg{fill:#1da1f2;stroke:none}
  .rx.share svg{stroke:#7c5cff;fill:none}
  .rx.plus{font-family:'Sora';font-weight:800;font-size:13px;color:var(--green)}
  @keyframes viral{
    0%   {opacity:0;transform:translateY(8px) scale(.3)}
    12%  {opacity:1;transform:translateY(-6px) scale(1.12)}
    20%  {transform:translateY(-12px) scale(1)}
    70%  {opacity:.85}
    100% {opacity:0;transform:translateY(-78px) scale(.85)}
  }
  .r-a{left:46%;top:8%;  animation-delay:0s}
  .r-b{right:14%;top:20%;animation-delay:.6s}
  .r-c{right:6%; top:46%;animation-delay:1.2s}
  .r-d{right:24%;bottom:14%;animation-delay:1.8s}
  .r-e{left:24%;bottom:12%;animation-delay:2.3s}
  .r-f{left:6%; top:48%;animation-delay:2.8s}
  .r-g{left:12%;top:22%;animation-delay:3.3s}
  .r-h{left:58%;top:30%;animation-delay:3.8s}
  .r-i{right:34%;top:14%;animation-delay:.9s}
  @media(prefers-reduced-motion:reduce){.rx{animation:none;opacity:0}}
  .dominate h2{margin-top:8px}
  .dominate .underline{margin:18px auto 22px}
  .dominate .lede{margin:0 auto 50px}
  .fcards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;max-width:920px;margin:0 auto}
  .fcard{background:#fff;border:1px solid var(--line);border-radius:18px;padding:26px;text-align:left;display:flex;gap:16px;box-shadow:var(--shadow-sm);transition:.3s}
  .fcard:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:rgba(47,168,74,.3)}
  .fcard .ic{width:42px;height:42px;flex:none;color:var(--green)}
  .fcard .ic svg{width:100%;height:100%;stroke:var(--green);fill:none;stroke-width:1.7}
  .fcard h4{font-size:17px;font-weight:700;margin-bottom:4px}
  .fcard p{font-size:14px;color:var(--muted)}

  /* CTA BANNER */
  .cta-banner{padding:0 0 96px}
  .cta-box{background:var(--green);border-radius:32px;padding:64px 40px;text-align:center;color:#fff;position:relative;overflow:hidden;box-shadow:0 30px 70px rgba(47,168,74,.3)}
  .cta-box::before{content:"";position:absolute;top:-60px;right:-60px;width:260px;height:260px;border-radius:50%;background:rgba(255,255,255,.12)}
  .cta-box::after{content:"";position:absolute;bottom:-80px;left:-40px;width:220px;height:220px;border-radius:50%;background:rgba(255,255,255,.10)}
  .cta-box h2{font-size:clamp(32px,4vw,48px);font-weight:800;position:relative}
  .cta-box p{font-size:18px;opacity:.92;margin:16px auto 32px;max-width:520px;position:relative;font-weight:500}
  .cta-box .btn{background:#fff;color:var(--green);position:relative}
  .cta-box .btn:hover{transform:translateY(-3px);box-shadow:0 16px 34px rgba(0,0,0,.18)}

  /* FOOTER */
  footer{background:var(--ink);color:#aab3c5;padding:60px 0 30px}
  .foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;padding-bottom:40px;border-bottom:1px solid rgba(255,255,255,.08)}
  footer .logo .name{color:#fff}
  footer .logo .name small{color:var(--green-bright)}
  footer p.about{margin-top:18px;font-size:14.5px;max-width:300px;line-height:1.7}
  footer h5{color:#fff;font-family:'Sora';font-weight:600;font-size:15px;margin-bottom:18px}
  footer ul{list-style:none}
  footer ul li{margin-bottom:11px}
  footer ul li a{font-size:14.5px;transition:color .2s}
  footer ul li a:hover{color:var(--green-bright)}
  .foot-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:26px;flex-wrap:wrap;gap:14px;font-size:13.5px}
  .foot-social{display:flex;gap:12px}
  .foot-social a{width:38px;height:38px;border-radius:10px;background:rgba(255,255,255,.06);display:flex;align-items:center;justify-content:center;transition:.25s}
  .foot-social a:hover{background:var(--green)}
  .foot-social svg{width:18px;height:18px;fill:#aab3c5;transition:.25s}
  .foot-social a:hover svg{fill:#fff}

  /* reveal */
  .reveal{opacity:0;transform:translateY(30px);transition:opacity .7s ease,transform .7s ease}
  .reveal.in{opacity:1;transform:none}
  .reveal-left,.reveal-right,.reveal-scale{opacity:0;transition:opacity .7s var(--ease),transform .7s var(--ease)}
  .reveal-left{transform:translateX(-44px)}
  .reveal-right{transform:translateX(44px)}
  .reveal-scale{transform:scale(.9)}
  .reveal-left.in,.reveal-right.in,.reveal-scale.in{opacity:1;transform:none}
  .develop .reveal-scale:nth-of-type(2){transition-delay:.1s}
  .develop .reveal-scale:nth-of-type(3){transition-delay:.2s}


  .logo-img{height:40px;width:auto;display:block}
  .foot-logo img{height:38px;width:auto}
  .foot-logo .name{font-family:'Sora';font-weight:800;font-size:20px;letter-spacing:.5px;color:#fff;line-height:1}
  .foot-logo .name small{display:block;font-weight:600;font-size:9px;letter-spacing:5px;color:var(--green-bright);margin-top:2px}
  img.center{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:110px;height:auto;z-index:3}

  /* ---------- WE DEVELOP · code screen ---------- */
  .code-window{
    max-width:860px;margin:0 auto 60px;border-radius:16px;overflow:hidden;position:relative;z-index:2;
    background:#0b1130;border:1px solid rgba(255,255,255,.08);box-shadow:0 26px 64px rgba(0,0,0,.42);
    font-family:ui-monospace,'SFMono-Regular','JetBrains Mono',Menlo,Consolas,monospace;
  }
  .cw-body{padding:30px 16px 32px 0;min-height:372px;font-size:14.5px;line-height:1.85;background:radial-gradient(1200px 260px at 82% -10%,rgba(55,196,77,.07),transparent)}
  .cw-row{display:flex;white-space:pre}
  .cw-num{width:52px;flex:none;text-align:right;padding-right:20px;color:#39406b;user-select:none}
  .cw-txt{color:#c6cdf0;word-break:break-word}
  .cw-txt .kw{color:#7aa2ff}
  .cw-txt .str{color:var(--green-bright)}
  .cw-txt .fn{color:#f5c451}
  .cw-txt .num{color:#b48cff}
  .cw-txt .cm{color:#5d6790;font-style:italic}
  .cw-caret{display:inline-block;width:8px;height:1.05em;background:var(--green-bright);margin-left:1px;vertical-align:-2px;border-radius:1px;animation:cwBlink 1s steps(1) infinite}
  @keyframes cwBlink{0%,50%{opacity:1}50.01%,100%{opacity:0}}
  @media(prefers-reduced-motion:reduce){.cw-caret{animation:none}}

  /* tablet: bento goes 2-up, feature full width */
  @media(max-width:980px){
    .hshow-inner{grid-template-columns:300px 1fr;gap:34px}
    .hpanel{flex-basis:300px}
    .hpanel-brand{flex-basis:400px}
  }

  @media(max-width:880px){
    .navlinks{display:none}
    .menu-toggle{display:block}
    .sec{padding:var(--space-section-sm) 0}
    .strip{grid-template-columns:1fr 1fr}
    .strip .cell:nth-child(2){border-right:none}
    .strip .cell{border-bottom:1px solid var(--line)}
    .strip .cell:nth-child(3),.strip .cell:nth-child(4){border-bottom:none}
    .hshow-sticky{position:static;height:auto;min-height:0;display:block;overflow:visible;padding:var(--space-section-sm) 0}
    .hshow-inner{display:block}
    .hshow-rail{margin-bottom:24px}
    .hshow-rail .lede{max-width:none}
    .hshow-meta{display:none}
    .hshow-viewport{overflow-x:auto;-webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory;
      margin:0 calc(-1*var(--container-pad));padding:6px var(--container-pad) 18px}
    .htrack{padding:0;transform:none!important}
    .hpanel{flex-basis:78vw;max-width:320px;height:auto;min-height:430px;opacity:1;transform:none;scroll-snap-align:center}
    .hpanel.active{transform:none}
    .hpanel-brand{flex-basis:84vw;max-width:360px}
    .develop .cards{grid-template-columns:1fr}
    .code-window{margin-bottom:48px}
    .cw-body{font-size:12px;min-height:auto;line-height:1.8;padding:22px 8px 24px 0}
    .cw-num{width:34px;padding-right:12px}
    .fcards{grid-template-columns:1fr}
    .foot-grid{grid-template-columns:1fr 1fr;gap:30px}
  }