:root{
    --bg:#F4F5FB;
    --card:#FFFFFF;
    --ink:#20243F;
    --muted:#7C819B;
    --purple:#6D4AE0;
    --purple-deep:#4C2BB8;
    --teal:#3ECFC0;
    --gradient:linear-gradient(90deg,#3ECFC0 0%,#7C5CE0 100%);
    --green:#2FBF8F;
    --green-soft:#E4F8EF;
    --orange:#F59E42;
    --orange-soft:#FDF1E3;
    --blue:#4F86F7;
    --blue-soft:#E9F0FE;
    --violet-soft:#F0EBFC;
    --pink-soft:#FBEAF3;
    --radius:24px;
    --shadow:0 14px 40px rgba(76,43,184,.10);
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{font-family:'Poppins',system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--ink);line-height:1.6}
  img{max-width:100%}
  a{text-decoration:none;color:inherit}
  .wrap{max-width:1180px;margin:0 auto;padding:0 24px}

  nav{position:sticky;top:0;z-index:50;background:rgba(244,245,251,.85);backdrop-filter:blur(10px);border-bottom:1px solid rgba(109,74,224,.08)}
  .nav-inner{display:flex;align-items:center;justify-content:space-between;height:80px;gap:18px;flex-wrap:nowrap}
  .logo{font-family:'Baloo 2','Poppins',system-ui,sans-serif;font-weight:800;font-size:1.7rem;letter-spacing:.04em;color:var(--purple-deep);display:flex;align-items:center;gap:2px;text-transform:uppercase}
  .logo svg{width:30px;height:30px;margin:0 1px}
  .logo-img{height:42px;width:auto;max-width:none;display:block;flex:0 0 auto;object-fit:contain}
  .foot-logo-img{height:40px}
  .nav-links{display:flex;gap:18px;font-weight:500;color:var(--muted);font-size:.86rem;white-space:nowrap;align-items:center}
  .nav-links a{white-space:nowrap}
  .nav-links a:hover{color:var(--purple)}
  .nav-cta{display:flex;gap:10px;align-items:center;flex-shrink:0}
  .btn{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:.98rem;padding:13px 26px;border-radius:999px;transition:transform .15s ease, box-shadow .15s ease;cursor:pointer;border:none;font-family:inherit}
  .btn-primary{background:linear-gradient(90deg,#7C5CE0,#6D4AE0);color:#fff;box-shadow:0 10px 24px rgba(109,74,224,.35)}
  .btn-primary:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(109,74,224,.42)}
  .btn-ghost{background:#fff;color:var(--purple-deep);border:2px solid #E4E0F5}
  .btn-ghost:hover{border-color:var(--purple);transform:translateY(-2px)}
  .btn-yellow{background:linear-gradient(90deg,#FFC93C,#F5A623);color:#4A2C00;box-shadow:0 10px 24px rgba(245,166,35,.34)}
  .btn-yellow:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(245,166,35,.42)}
  .btn-blue{background:linear-gradient(90deg,#4F86F7,#2E63D6);color:#fff;box-shadow:0 10px 24px rgba(46,99,214,.34)}
  .btn-blue:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(46,99,214,.42)}
  .btn-sm{padding:9px 16px;font-size:.84rem;white-space:nowrap}
  .btn:focus-visible{outline:3px solid #B9A6F5;outline-offset:2px}

  .hero{padding:80px 0 56px;display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
  .eyebrow{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid #E7E3F7;color:var(--purple-deep);font-weight:600;font-size:.82rem;padding:8px 16px;border-radius:999px;margin-bottom:22px}
  .eyebrow .dot{width:8px;height:8px;border-radius:50%;background:var(--gradient)}
  h1{font-size:clamp(2.2rem,4.4vw,3.3rem);font-weight:800;line-height:1.15;letter-spacing:-.01em}
  h1 .grad{background:var(--gradient);-webkit-background-clip:text;background-clip:text;color:transparent}
  h1 .hl{color:var(--purple)}
  .hero p.lead{margin:22px 0 32px;font-size:1.1rem;color:var(--muted);max-width:34rem}
  .hero-ctas{display:flex;gap:14px;flex-wrap:wrap}
  .hero-note{margin-top:18px;font-size:.88rem;color:var(--muted)}
  .hero-note strong{color:var(--ink)}

  .hero-visual{position:relative;width:100%;padding-bottom:20px}
  .ui-card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:22px 24px;position:absolute;overflow:hidden}
  .lb{width:68%;top:34px;left:0}
  .lb h4{font-size:1rem;font-weight:700;margin-bottom:14px;display:flex;justify-content:space-between;align-items:center}
  .lb h4 span{font-size:.72rem;font-weight:600;color:var(--green);background:var(--green-soft);padding:4px 10px;border-radius:999px}
  .row{display:flex;align-items:center;gap:8px;padding:9px 0;border-bottom:1px solid #F1F0F8}
  .row:last-child{border-bottom:none}
  .rank{width:30px;height:30px;border-radius:10px;display:grid;place-items:center;font-weight:700;font-size:.82rem;flex-shrink:0}
  .r1{background:#FFF4D6;color:#C8901B}.r2{background:#EFF1F6;color:#7A8296}.r3{background:#FBEADF;color:#C06B2C}
  .row .name{font-weight:600;font-size:.9rem;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
  .row .flag{font-size:.76rem;color:var(--muted);flex-shrink:0}
  .pp{font-weight:700;color:var(--purple);font-size:.86rem;flex-shrink:0;white-space:nowrap}
  .bar{height:7px;border-radius:999px;background:#EFEDF9;overflow:hidden;margin-top:6px}
  .bar i{display:block;height:100%;border-radius:999px;background:var(--gradient)}
  .chip-qr{right:0;top:0;width:190px;text-align:center}
  .chip-qr .qr{width:96px;height:96px;margin:6px auto 10px;border-radius:14px;background:
    conic-gradient(var(--ink) 25%, transparent 0 50%, var(--ink) 0 75%, transparent 0) 0 0/28px 28px,
    #fff;border:6px solid var(--ink);outline:4px solid #fff}
  .chip-qr b{display:block;font-size:.9rem}
  .chip-qr small{color:var(--muted);font-size:.76rem}
  .chip-pp{right:26px;top:238px;display:flex;align-items:center;gap:12px;padding:16px 20px}
  .coin{width:44px;height:44px;border-radius:50%;background:var(--gradient);display:grid;place-items:center;color:#fff;font-weight:800;font-size:.8rem;box-shadow:0 8px 18px rgba(62,207,192,.4)}
  .chip-pp b{font-size:1rem}.chip-pp small{display:block;color:var(--muted);font-size:.76rem}
  .chip-iqi{left:34px;bottom:0;display:flex;align-items:center;gap:16px;padding:18px 22px}
  .ring{--v:76;width:74px;height:74px;border-radius:50%;background:conic-gradient(#7C5CE0 calc(var(--v)*1%),#EFEDF9 0);display:grid;place-items:center}
  .ring::after{content:"76";width:54px;height:54px;border-radius:50%;background:#fff;display:grid;place-items:center;font-weight:800;color:var(--purple-deep)}
  .chip-iqi b{font-size:.95rem;display:block}
  .chip-iqi small{color:var(--muted);font-size:.78rem}
  .float{animation:float 5s ease-in-out infinite}
  .float.d1{animation-delay:1.2s}.float.d2{animation-delay:2.4s}
  @keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
  @media (prefers-reduced-motion:reduce){.float{animation:none}}


  .hero-microcopy{margin-top:14px;font-size:.84rem;color:var(--muted);font-weight:500;max-width:34rem;text-align:center}


  .trust-badges{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px;overflow:visible}
  .tbadge{background:#fff;border:1px solid #E7E3F7;border-radius:999px;padding:9px 14px;font-size:.78rem;font-weight:600;color:var(--ink);box-shadow:0 4px 14px rgba(76,43,184,.06);white-space:nowrap;flex-shrink:0}

  .laptop-mock{position:relative;width:100%;max-width:560px;margin:0 auto}
  .laptop-frame{background:linear-gradient(180deg,#5B42B0,#3A2385);border-radius:20px 20px 6px 6px;padding:14px 14px 8px;box-shadow:0 30px 60px rgba(60,35,140,.32)}
  .laptop-cam{width:5px;height:5px;border-radius:50%;background:#241553;margin:0 auto 10px;box-shadow:0 0 0 2px rgba(255,255,255,.08)}
  .laptop-body{background:#fff;border-radius:7px;display:flex;min-height:250px;overflow:hidden}
  .laptop-appbar{position:absolute;top:0}
  .laptop-sidebar{width:52px;background:#F6F5FC;padding:18px 0;display:flex;flex-direction:column;align-items:center;gap:11px;flex-shrink:0}
  .laptop-sidebar .g{width:26px;height:26px;border-radius:8px;background:var(--gradient);color:#fff;font-weight:800;display:grid;place-items:center;font-size:.78rem;margin-bottom:6px}
  .laptop-sidebar .navline{width:24px;height:4px;border-radius:3px;background:#DFDAF6}
  .laptop-sidebar .navline.active{background:var(--purple)}
  .laptop-main{flex:1;padding:20px 22px;min-width:0}
  .laptop-main h4{font-size:.94rem;font-weight:700}
  .laptop-main .sub{font-size:.76rem;color:var(--muted);margin-top:2px;margin-bottom:16px}
  .laptop-stats{display:flex;gap:18px;margin-bottom:16px}
  .laptop-stats small{display:block;font-size:.68rem;color:var(--muted)}
  .laptop-stats b{font-size:1.2rem;color:var(--ink)}
  .laptop-activity{background:var(--bg);border-radius:10px;padding:11px 14px}
  .laptop-activity .t{font-size:.72rem;font-weight:700;margin-bottom:7px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
  .laptop-activity ul{list-style:none}
  .laptop-activity li{font-size:.76rem;color:var(--ink);padding:3px 0;padding-left:16px;position:relative}
  .laptop-activity li::before{content:"";position:absolute;left:0;top:9px;width:6px;height:6px;border-radius:50%;background:var(--purple)}
  .laptop-hinge{height:6px;background:linear-gradient(180deg,#6B51C4,#3F2790)}
  .laptop-deck{height:16px;background:linear-gradient(180deg,#8E77D8,#5B42B0);border-radius:0 0 12px 12px;position:relative;box-shadow:0 10px 18px rgba(60,35,140,.22);margin:0 -10px}
  .laptop-deck::after{content:"";position:absolute;left:50%;top:0;transform:translateX(-50%);width:72px;height:5px;background:#4C2BB8;border-radius:0 0 6px 6px}

  .phone-mock{position:absolute;right:-6%;bottom:-30px;width:42%;max-width:172px;background:linear-gradient(180deg,#5B42B0,#3A2385);border-radius:34px;padding:7px;box-shadow:0 26px 55px rgba(60,35,140,.38)}
  .phone-mock .island{width:42px;height:12px;background:#241553;border-radius:8px;margin:9px auto 8px}
  .phone-mock .screen{background:#fff;border-radius:27px;overflow:hidden}
  .hero-phone .screen{height:340px}
  .phone-mock .side-btn{position:absolute;left:-2px;width:2px;background:#2E1B6B;border-radius:2px}
  .phone-mock .side-btn.b1{top:60px;height:22px}
  .phone-mock .side-btn.b2{top:92px;height:34px}
  .phone-mock .side-btn.b3{right:-2px;left:auto;top:78px;height:44px}
  .phone-head{background:linear-gradient(90deg,#7C5CE0,#6D4AE0);color:#fff;padding:14px 14px 16px}
  .phone-head small{font-size:.66rem;opacity:.85;display:block}
  .phone-head b{display:block;font-size:.84rem;margin-top:3px}
  .phone-body{padding:12px 13px 14px}
  .phone-progress{font-size:.66rem;color:var(--muted);display:flex;justify-content:space-between;margin-bottom:6px}
  .phone-actions{display:flex;gap:6px;margin:11px 0}
  .phone-actions span{flex:1;background:var(--bg);border-radius:8px;padding:7px 0;text-align:center;font-size:.76rem}
  .phone-mini-stats{display:flex;gap:8px;margin-bottom:10px}
  .phone-mini-stats div{flex:1;background:var(--bg);border-radius:8px;padding:8px;text-align:center}
  .phone-mini-stats small{font-size:.6rem;color:var(--muted);display:block}
  .phone-mini-stats b{font-size:.82rem}
  .phone-next{background:var(--bg);border-radius:8px;padding:8px 10px}
  .phone-next small{font-size:.6rem;color:var(--muted)}
  .phone-next b{display:block;font-size:.72rem;margin-top:2px}
  .phone-next .starts{color:var(--green);font-size:.62rem;font-weight:600}

  .iqi-card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px 22px;display:flex;align-items:center;gap:16px;max-width:320px;margin:56px auto 0}

  /* Hero phone — leaderboard screen */
  .hero-phone .screen{background:#F3F1FD;display:flex;flex-direction:column;padding-bottom:0}
  .hp-head{padding:30px 14px 10px}
  .hp-head b{font-size:.92rem;display:block}
  .hp-head small{font-size:.6rem;color:var(--muted);display:block;margin-top:2px;line-height:1.35}
  .hp-tabs{display:flex;background:#E7E3F9;border-radius:999px;padding:3px;margin-top:9px}
  .hp-tabs span{flex:1;text-align:center;font-size:.6rem;font-weight:600;padding:5px 0;border-radius:999px;color:var(--muted)}
  .hp-tabs span.on{background:#fff;color:var(--purple-deep)}
  .hp-podium{display:flex;align-items:flex-end;justify-content:center;gap:5px;padding:16px 12px 10px}
  .hpod{flex:1;border-radius:10px;text-align:center;padding:15px 3px 8px;position:relative}
  .hpod .av{position:absolute;top:-9px;left:50%;transform:translateX(-50%);width:19px;height:19px;border-radius:50%;background:var(--orange);border:2px solid #fff}
  .hpod b{display:block;font-size:.76rem;color:var(--orange);font-weight:800}
  .hpod small{display:block;font-size:.56rem;font-weight:700;margin-top:2px}
  .hpod em{font-style:normal;font-size:.5rem;color:var(--muted)}
  .hpod.p1{background:linear-gradient(180deg,#FFD98A,#FFC966);padding-top:21px;padding-bottom:13px}
  .hpod.p2{background:linear-gradient(180deg,#BEEBDC,#CFF0C7);padding-bottom:10px}
  .hpod.p3{background:linear-gradient(180deg,#D7CDF6,#E9CDEF)}
  .hpod .you{display:inline-block;background:var(--blue);color:#fff;font-size:.46rem;font-weight:700;padding:1px 6px;border-radius:999px;margin-top:1px}
  .hp-list-title{font-size:.64rem;font-weight:800;padding:0 14px 6px}
  .hp-row{display:flex;align-items:center;gap:7px;background:#fff;border-radius:999px;margin:0 12px 5px;padding:5px 9px}
  .hp-row .rk{width:18px;height:18px;border-radius:50%;background:var(--purple);color:#fff;font-size:.46rem;font-weight:800;display:grid;place-items:center;flex-shrink:0}
  .hp-row .nm{flex:1;font-size:.58rem;font-weight:700}
  .hp-row .pts{font-size:.5rem;font-weight:700;color:var(--purple-deep);background:var(--blue-soft);padding:2px 7px;border-radius:999px}
  .hp-nav{display:flex;justify-content:space-around;align-items:center;background:#fff;border-radius:16px 16px 22px 22px;margin-top:auto;padding:7px 4px 9px;font-size:.6rem;color:var(--muted)}
  .hp-nav .cup{background:var(--purple);color:#fff;width:23px;height:23px;border-radius:50%;display:grid;place-items:center;font-size:.55rem}
  .iqi-card b{font-size:.92rem;display:block}
  .iqi-card small{color:var(--muted);font-size:.76rem}

  section{padding:70px 0}
  .sec-head{max-width:1000px;margin:0 auto 44px;text-align:center;padding:0 20px}
  .sec-head h2,.sec-head h3{max-width:820px;margin-left:auto;margin-right:auto}
  .sec-head .tag{display:inline-block;font-size:.78rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--purple);background:var(--violet-soft);padding:7px 16px;border-radius:999px;margin-bottom:16px}
  h2{font-size:clamp(1.6rem,3vw,2.2rem);font-weight:800;line-height:1.2}
  .sec-head p{margin-top:14px;color:var(--muted);font-size:1.03rem}


  /* Who */
  /* Nav dropdown for "Who it's for" */
  .nav-drop{position:relative;display:inline-flex;align-items:center}
  .nav-drop-trigger{display:inline-flex;align-items:center;gap:5px}
  .nav-drop-trigger i{font-style:normal;font-size:.85em;transition:transform .2s ease;display:inline-block}
  .nav-drop:hover .nav-drop-trigger,.nav-drop:focus-within .nav-drop-trigger{color:var(--purple)}
  .nav-drop:hover .nav-drop-trigger i,.nav-drop:focus-within .nav-drop-trigger i{transform:rotate(180deg)}
  .nav-drop-menu{position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(6px);margin-top:10px;background:#fff;border:1px solid #F0ECFA;border-radius:18px;box-shadow:0 20px 46px rgba(76,43,184,.18);padding:16px 18px;min-width:500px;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .18s ease,transform .18s ease,visibility .18s;z-index:60}
  .nav-drop:hover .nav-drop-menu,.nav-drop:focus-within .nav-drop-menu{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0)}
  .nav-drop-menu::before{content:"";position:absolute;top:-10px;left:0;right:0;height:10px}
  .nd-title{font-size:.68rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
  .nd-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:4px 14px}
  .nd-item{display:flex;align-items:center;justify-content:flex-start;gap:9px;font-size:.8rem;font-weight:600;color:var(--ink);padding:6px 9px;border-radius:9px;text-align:left;transition:background .15s ease,color .15s ease}
  .nd-item > span:not(.nd-ico){text-align:left;flex:1;min-width:0}
  .nd-ico{flex:0 0 auto}
  .nd-ico{width:24px;height:24px;border-radius:7px;background:var(--violet-soft);display:grid;place-items:center;flex-shrink:0}
  .nd-ico svg{width:14px;height:14px;display:block}
  .nd-item:hover{background:var(--violet-soft);color:var(--purple-deep)}
  .nav-drop-menu-mod{min-width:340px}
  @media (max-width:1040px){.nav-drop-menu{display:none}}

  /* Activity board — "Who Gamify is for" */
  .act-board{background:linear-gradient(140deg,#8C63E8 0%,#6D4AE0 100%);border:1px solid #5B3AC9;border-radius:28px;padding:34px 30px;box-shadow:0 14px 40px rgba(76,43,184,.22)}
  .act-list{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin:0;padding:0}
  .act-item{display:inline-flex;align-items:center;justify-content:center;gap:9px;background:rgba(255,255,255,.94);border:1px solid rgba(255,255,255,.6);border-radius:12px;padding:9px 14px;font-size:.84rem;font-weight:700;color:var(--ink);white-space:nowrap;cursor:default;transition:transform .18s ease,box-shadow .18s ease,background .18s ease}
  .act-item:hover{transform:translateY(-4px) scale(1.02);background:#fff;box-shadow:0 10px 24px rgba(109,74,224,.16)}
  .act-ico{width:26px;height:26px;border-radius:8px;background:var(--violet-soft);display:grid;place-items:center;flex-shrink:0;transition:transform .18s ease}
  .act-ico svg{width:15px;height:15px;display:block}
  .act-item:hover .act-ico{transform:scale(1.1) rotate(-5deg)}
  .act-break{flex-basis:100%;height:0;margin:0;padding:0;border:0;list-style:none}
  @media (prefers-reduced-motion:reduce){.act-item,.act-ico{transition:none}.act-item:hover{transform:none}}

  .aud-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
  .aud{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:30px 26px;position:relative;overflow:hidden;transition:transform .2s ease}
  .aud:hover{transform:translateY(-6px)}
  .aud::before{content:"";position:absolute;inset:0 0 auto 0;height:6px;background:var(--gradient)}
  .aud .emoji{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;font-size:1.4rem;margin-bottom:16px}
  .aud.a1 .emoji{background:var(--violet-soft)}.aud.a2 .emoji{background:var(--green-soft)}.aud.a3 .emoji{background:var(--orange-soft)}
  .aud.a4 .emoji{background:var(--blue-soft)}.aud.a5 .emoji{background:var(--pink-soft)}.aud.a6 .emoji{background:var(--violet-soft)}
  .aud h3{font-size:1.08rem;font-weight:700;margin-bottom:8px}
  .aud p{color:var(--muted);font-size:.92rem}

  /* How it works */
  .steps6{display:grid;grid-template-columns:repeat(6,1fr);gap:16px;counter-reset:step}
  .step6{background:var(--card);border-radius:18px;box-shadow:var(--shadow);padding:22px 16px;position:relative;text-align:center}
  .step6::before{counter-increment:step;content:counter(step);width:34px;height:34px;border-radius:11px;background:var(--gradient);color:#fff;font-weight:800;display:grid;place-items:center;font-size:.9rem;margin:0 auto 12px}
  .step6 h3{font-size:.88rem;font-weight:700}
  .formats{margin-top:34px;display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
  .format{background:var(--card);border-radius:18px;box-shadow:var(--shadow);padding:16px 24px;display:flex;gap:14px;align-items:center}
  .format .pill{font-size:.72rem;font-weight:700;padding:5px 12px;border-radius:999px;letter-spacing:.06em}
  .format.mob .pill{background:var(--green-soft);color:var(--green)}
  .format.gr .pill{background:var(--blue-soft);color:var(--blue)}
  .format span{font-size:.88rem;color:var(--muted)}

  /* Features */
  .feat{background:var(--card);border-radius:20px;box-shadow:var(--shadow);padding:26px 22px;transition:transform .2s ease}
  .feat:hover{transform:translateY(-5px)}
  .feat .ico{width:48px;height:48px;border-radius:15px;display:grid;place-items:center;font-size:1.3rem;margin-bottom:14px}
  .f1{background:var(--violet-soft)}.f2{background:var(--green-soft)}.f3{background:var(--blue-soft)}.f4{background:var(--orange-soft)}.f5{background:var(--pink-soft)}
  .feat h3{font-size:.98rem;font-weight:700;margin-bottom:6px}
  .feat p{font-size:.85rem;color:var(--muted)}

  /* Scores */
  .expand-hint{display:inline-flex;align-items:center;gap:6px;margin-top:auto;font-size:.8rem;font-weight:700;color:var(--purple);background:var(--violet-soft);padding:8px 16px;border-radius:999px}
  .expand-hint i{font-style:normal;transition:transform .2s ease;display:inline-block}
  @keyframes panelIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
  .score-inner{padding:26px 30px 30px;text-align:left}
  .si-lead{font-size:.88rem;color:var(--muted);margin:16px 0 14px}
  .si-grid{display:grid;gap:14px}
  .si-box{background:var(--bg);border-radius:14px;padding:16px 18px;margin-bottom:12px}
  .si-box>b{display:block;font-size:.9rem;margin-bottom:8px}
  .si-box p{font-size:.83rem;color:var(--muted);margin-bottom:8px}
  .si-tag{display:inline-block;font-weight:800;font-size:.7rem;padding:3px 9px;border-radius:7px;margin-right:8px;vertical-align:2px}
  .si-tag.sa{background:var(--green-soft);color:var(--green)}
  .si-tag.eo{background:var(--violet-soft);color:var(--purple-deep)}
  .si-tag.rc,.si-tag.lo{background:var(--blue-soft);color:var(--blue)}
  .si-tag.of{background:var(--orange-soft);color:var(--orange)}
  .si-formula{background:#fff;border-radius:10px;padding:11px 14px;font-size:.8rem;color:var(--ink);margin-top:8px;line-height:1.6}
  .si-check{list-style:none;margin-top:8px}
  .si-check li{font-size:.82rem;padding:4px 0 4px 22px;position:relative;color:var(--ink)}
  .si-check li::before{content:"✓";position:absolute;left:0;top:4px;width:15px;height:15px;border-radius:50%;background:var(--green-soft);color:var(--green);font-size:.6rem;display:grid;place-items:center;font-weight:800}
  .si-note{font-size:.78rem;color:var(--muted);margin:10px 0 14px}
  .si-table{overflow-x:auto;background:#fff;border-radius:12px;padding:4px}
  .si-table table{width:100%;border-collapse:collapse;font-size:.78rem;min-width:520px}
  .si-table th{text-align:left;color:var(--muted);font-weight:700;font-size:.68rem;text-transform:uppercase;letter-spacing:.04em;padding:8px 10px;border-bottom:2px solid var(--bg)}
  .si-table td{padding:9px 10px;border-bottom:1px solid var(--bg);vertical-align:top}
  .si-table tr:last-child td{border-bottom:none}
  .si-versions{margin-top:26px;background:var(--card);box-shadow:var(--shadow);text-align:left}
  .si-versions p{font-size:.88rem;color:var(--muted)}
  .score .badge{display:inline-block;font-family:'Baloo 2','Poppins',system-ui,sans-serif;font-weight:800;font-size:1.5rem;padding:10px 26px;border-radius:18px;margin-bottom:16px}
  .score.pp-c .badge{background:var(--violet-soft);color:var(--purple-deep)}
  .score.fs-c .badge{background:var(--green-soft);color:var(--green)}
  .score.iqi-c .badge{background:var(--orange-soft);color:var(--orange)}
  .score h3{font-size:1.05rem;font-weight:700;margin-bottom:4px}
  .score .who{font-size:.8rem;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;margin-bottom:18px}
  .score p{font-size:.92rem;color:var(--muted)}
  .score .range{margin-top:16px;font-size:.8rem;font-weight:600;color:var(--ink);background:var(--bg);border-radius:999px;padding:7px 16px;display:inline-block}
  .scores-note{text-align:center;margin-top:26px;color:var(--muted);font-size:.9rem}

  /* Platform split */
  .split{display:grid;grid-template-columns:1fr 1fr;gap:24px}
  .split.platform-split{grid-template-columns:1fr}
  .split-card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:36px;display:flex;flex-direction:column;gap:16px}
  .split-card .tag2{display:inline-flex;align-self:flex-start;font-size:.74rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:6px 14px;border-radius:999px}
  .split-card.web .tag2{background:var(--violet-soft);color:var(--purple-deep)}
  .split-card.app .tag2{background:var(--green-soft);color:var(--green)}
  .split-card h3{font-size:1.3rem;font-weight:800}
  .split-card p{color:var(--muted);font-size:.95rem}
  .split-card ul{list-style:none;margin-top:6px}
  .split-card li{font-size:.9rem;padding:7px 0 7px 26px;position:relative}
  .split-card li::before{content:"✓";position:absolute;left:0;top:7px;width:18px;height:18px;border-radius:50%;background:var(--bg);color:var(--purple);font-size:.7rem;display:grid;place-items:center;font-weight:800}
  .platform-split .split-card{display:grid;grid-template-columns:1fr auto;gap:28px;align-items:center;padding:32px}
  .sc-text{display:flex;flex-direction:column;gap:14px;min-width:0}
  .sc-text ul{margin-top:2px}

  /* mini laptop — real MacBook proportions (16:10 screen) */
  .mini-laptop{width:290px;flex-shrink:0}
  .ml-frame{background:linear-gradient(180deg,#5B42B0,#3A2385);border-radius:11px 11px 2px 2px;padding:7px 7px 5px;box-shadow:0 14px 28px rgba(60,35,140,.24)}
  .ml-cam{width:3px;height:3px;border-radius:50%;background:#241553;margin:0 auto 5px}
  .ml-body{background:#fff;border-radius:3px;display:flex;overflow:hidden;height:160px}
  .ml-side{width:30px;background:#F6F5FC;padding:9px 0;display:flex;flex-direction:column;align-items:center;gap:6px;flex-shrink:0}
  .ml-g{width:16px;height:16px;border-radius:5px;background:var(--gradient);color:#fff;font-weight:800;display:grid;place-items:center;font-size:.5rem;margin-bottom:2px}
  .ml-line{width:14px;height:2.5px;border-radius:2px;background:#DFDAF6}
  .ml-line.active{background:var(--purple)}
  .ml-main{flex:1;padding:11px 12px;min-width:0}
  .ml-title{font-size:.62rem;font-weight:700;margin-bottom:8px}
  .ml-stats{display:flex;gap:6px;margin-bottom:9px}
  .ml-stats div{flex:1;background:var(--bg);border-radius:5px;padding:6px 3px;text-align:center}
  .ml-stats b{display:block;font-size:.72rem;color:var(--purple-deep)}
  .ml-stats small{font-size:.44rem;color:var(--muted)}
  .ml-rows{display:flex;flex-direction:column;gap:5px}
  .ml-rows span{height:6px;border-radius:3px;background:var(--bg)}
  .ml-rows span:nth-child(2){width:78%}.ml-rows span:nth-child(3){width:56%}
  .ml-hinge{height:3px;background:linear-gradient(180deg,#6B51C4,#3F2790)}
  .ml-deck{height:8px;background:linear-gradient(180deg,#8E77D8,#5B42B0);border-radius:0 0 4px 4px;position:relative;margin:0 -13px;box-shadow:0 6px 10px rgba(60,35,140,.18)}
  .ml-deck::after{content:"";position:absolute;left:50%;top:0;transform:translateX(-50%);width:46px;height:3px;background:#4C2BB8;border-radius:0 0 3px 3px}

  /* mini phone — real iPhone proportions (~19.5:9) */
  .mini-phone{flex-shrink:0}
  .mp-frame{width:172px;background:linear-gradient(150deg,#5B42B0,#3A2385);border-radius:26px;padding:4px;box-shadow:0 16px 32px rgba(60,35,140,.30)}
  .mp-screen{background:#F3F1FD;border-radius:23px;overflow:hidden;position:relative;height:352px;display:flex;flex-direction:column}
  .mp-island{position:absolute;top:7px;left:50%;transform:translateX(-50%);width:46px;height:13px;background:#241553;border-radius:9px;z-index:3}
  .mp-head{padding:26px 11px 8px}
  .mp-head b{font-size:.76rem;display:block}
  .mp-head small{font-size:.5rem;color:var(--muted);display:block;margin-top:1px;line-height:1.35}
  .mp-tabs{display:flex;background:#E7E3F9;border-radius:999px;padding:2px;margin-top:7px}
  .mp-tabs span{flex:1;text-align:center;font-size:.53rem;font-weight:600;padding:4px 0;border-radius:999px;color:var(--muted)}
  .mp-tabs span.on{background:#fff;color:var(--purple-deep)}
  .mp-podium{display:flex;align-items:flex-end;justify-content:center;gap:4px;padding:14px 10px 8px}
  .pod{flex:1;border-radius:8px;text-align:center;padding:13px 2px 6px;position:relative}
  .pod .av{position:absolute;top:-8px;left:50%;transform:translateX(-50%);width:16px;height:16px;border-radius:50%;background:var(--orange);border:2px solid #fff}
  .pod b{display:block;font-size:.66rem;color:var(--orange);font-weight:800}
  .pod small{display:block;font-size:.48rem;font-weight:700;margin-top:2px}
  .pod em{font-style:normal;font-size:.44rem;color:var(--muted)}
  .pod.p1{background:linear-gradient(180deg,#FFD98A,#FFC966);padding-top:18px;padding-bottom:11px}
  .pod.p2{background:linear-gradient(180deg,#BEEBDC,#CFF0C7);padding-bottom:9px}
  .pod.p3{background:linear-gradient(180deg,#D7CDF6,#E9CDEF)}
  .pod .you{display:inline-block;background:var(--blue);color:#fff;font-size:.42rem;font-weight:700;padding:1px 5px;border-radius:999px;margin-top:1px}
  .mp-list-title{font-size:.56rem;font-weight:800;padding:0 11px 5px}
  .mp-row{display:flex;align-items:center;gap:6px;background:#fff;border-radius:999px;margin:0 9px 4px;padding:4px 7px}
  .mp-row .rk{width:16px;height:16px;border-radius:50%;background:var(--purple);color:#fff;font-size:.42rem;font-weight:800;display:grid;place-items:center;flex-shrink:0}
  .mp-row .nm{flex:1;font-size:.53rem;font-weight:700}
  .mp-row .pts{font-size:.44rem;font-weight:700;color:var(--purple-deep);background:var(--blue-soft);padding:2px 6px;border-radius:999px}
  .mp-nav{display:flex;justify-content:space-around;align-items:center;background:#fff;border-radius:14px 14px 20px 20px;margin-top:auto;padding:6px 4px 8px;font-size:.55rem;color:var(--muted)}
  .mp-nav .cup{background:var(--purple);color:#fff;width:21px;height:21px;border-radius:50%;display:grid;place-items:center;font-size:.5rem}

  /* FAQ */
  .faq{max-width:760px;margin:0 auto}
  .faq-more[hidden]{display:none}
  .faq-toggle{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;margin-top:6px;background:var(--card);border:1.5px solid #E4E0F5;border-radius:16px;padding:15px 22px;font-family:inherit;font-size:.95rem;font-weight:700;color:var(--purple-deep);cursor:pointer;box-shadow:var(--shadow);transition:transform .15s ease,border-color .15s ease}
  .faq-toggle:hover{transform:translateY(-2px);border-color:var(--purple)}
  .faq-toggle:focus-visible{outline:3px solid #B9A6F5;outline-offset:2px}
  .faq-toggle .ft-count{font-size:.76rem;font-weight:700;color:var(--purple);background:var(--violet-soft);padding:4px 11px;border-radius:999px}
  .faq-toggle .ft-arrow{transition:transform .2s ease;display:inline-block;font-size:1.05rem}
  .faq-toggle[aria-expanded="true"] .ft-arrow{transform:rotate(180deg)}
  details{background:var(--card);border-radius:16px;box-shadow:var(--shadow);padding:20px 24px;margin-bottom:14px}
  summary{font-weight:700;font-size:.98rem;cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px}
  summary::-webkit-details-marker{display:none}
  .faq summary::after{content:"+";font-size:1.3rem;color:var(--purple);flex-shrink:0}
  .faq details[open] summary::after{content:"–"}
  details p{margin-top:12px;color:var(--muted);font-size:.92rem}

  /* About/Story/Contact */
  .info-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
  .info{background:var(--card);border-radius:20px;box-shadow:var(--shadow);padding:28px 26px}
  .info .ico{width:46px;height:46px;border-radius:14px;background:var(--violet-soft);display:grid;place-items:center;font-size:1.2rem;margin-bottom:14px}
  .info h3{font-size:1.02rem;font-weight:700;margin-bottom:8px}
  .info p{font-size:.9rem;color:var(--muted);margin-bottom:12px}
  .info a{font-size:.88rem;font-weight:700;color:var(--purple)}

  /* Trust */
  .trust{background:linear-gradient(135deg,#FBDCED 0%,#F9CFE4 55%,#FDE7F2 140%);border:1px solid #F2BDD9;border-radius:32px;color:var(--ink);padding:52px 48px;display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:center;box-shadow:0 20px 50px rgba(214,110,166,.20)}
  .trust-text{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;height:100%}
  .trust-text ul{width:100%;max-width:30rem}
  .trust-shot{display:flex;align-items:center;justify-content:center}
  .trust-shot img{width:100%;max-width:340px;border-radius:16px;display:block;box-shadow:0 16px 40px rgba(76,43,184,.22)}
  .trust h2{color:var(--ink);text-align:center}
  .trust p{color:#8A5570;margin-top:14px;font-size:1rem}
  .trust ul{list-style:none;margin-top:22px;display:grid;gap:12px}
  .trust li{padding-left:32px;position:relative;font-size:.95rem;text-align:left;color:var(--ink)}
  .trust li::before{content:"✓";position:absolute;left:0;top:2px;width:22px;height:22px;border-radius:50%;background:#fff;color:#D6519B;display:grid;place-items:center;font-size:.75rem;font-weight:800;box-shadow:0 2px 8px rgba(214,110,166,.25)}
  .trust .panel{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);border-radius:22px;padding:28px;backdrop-filter:blur(6px)}
  .trust .panel h4{font-size:.85rem;letter-spacing:.1em;text-transform:uppercase;opacity:.8;margin-bottom:18px}
  .kpi{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.18);font-size:.92rem}
  .kpi:last-child{border-bottom:none}
  .kpi b{font-size:1.05rem}

  .cta-final{text-align:center;padding:86px 0 96px}
  .cta-final h2{max-width:620px;margin:0 auto}
  .cta-final p{color:var(--muted);margin:18px auto 34px;max-width:520px}

  footer{background:#fff;border-top:1px solid #ECEAF6;padding:56px 0 30px;color:var(--muted);font-size:.88rem}
  .foot-top{display:grid;grid-template-columns:1.3fr .9fr .9fr .9fr 1.2fr;gap:32px;padding-bottom:36px;border-bottom:1px solid #ECEAF6}
  .foot-brand p{margin-top:14px;font-size:.9rem;max-width:26rem}
  .foot-col h4{font-size:.82rem;font-weight:700;color:var(--ink);text-transform:uppercase;letter-spacing:.06em;margin-bottom:14px}
  .foot-col a{display:block;margin-bottom:10px;font-size:.9rem}
  .foot-col a:hover{color:var(--purple)}
  .foot-partner{font-size:.86rem}
  .foot-partner b{color:var(--ink);display:block;margin-bottom:6px}
  .foot-partner{text-align:center}
  .foot-partner h4{text-align:center}
  .umb-caption{display:flex;flex-direction:column;align-items:center;gap:6px}
  .umb-based{display:inline-flex;align-items:center;gap:6px;font-weight:700;color:var(--ink)}
  .umb-based i{font-style:normal;font-size:1.05rem}
  .umbrella-logo-img{height:38px;width:auto;display:block;margin:0 auto 10px}
  .foot-disclaimer{font-size:.78rem;line-height:1.5;margin-top:12px;color:#A6ABC2}
  .foot-bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;padding-top:24px;font-size:.84rem}
  .foot-bottom.foot-bottom-center{justify-content:center;text-align:center}

  @media (max-width:1180px){
    .nav-links{gap:13px;font-size:.8rem}
    .logo-img{height:36px}
    .btn-sm{padding:8px 13px;font-size:.79rem}
  }
  @media (max-width:1040px){
    .nav-links{display:none}
    .nav-inner{justify-content:space-between}
  }
  @media (max-width:960px){
    .hero{grid-template-columns:1fr;padding-top:56px}
    .hero-visual{max-width:480px;margin:0 auto;width:100%;padding-bottom:40px}
    .aud-grid,.info-grid,.split,.story-grid,.contact-wrap,.topics{grid-template-columns:1fr}
    .act-break{display:none}
    .act-item{font-size:.78rem;padding:8px 12px}
    .act-board{padding:24px 20px}
    .story-card .step-arrow{display:none}
    .platform-split .split-card{grid-template-columns:1fr;justify-items:center}
    .platform-split .split-card .sc-text{width:100%}
    details.score[open] .si-grid{grid-template-columns:1fr}
    .steps6{grid-template-columns:repeat(3,1fr);row-gap:26px}
    .mod-grid{grid-template-columns:1fr;max-width:100%}
    .mod-fun{max-width:100%}
    .mod-shot-phone{width:22%;max-width:56px;right:8px;bottom:8px}
    .mtasks{grid-template-columns:repeat(3,1fr)}
    .trust{grid-template-columns:1fr;padding:44px 30px}
    .nav-links{display:none}
    .foot-top{grid-template-columns:1fr 1fr;row-gap:28px}
    .principle-grid{grid-template-columns:repeat(2,1fr)}
    .mission-block{flex-direction:column;min-height:0;padding:30px 20px;gap:18px}
    .drift-field{position:static;display:flex;flex-direction:column;gap:10px}
    .drift-row{position:static;flex-wrap:wrap;gap:8px;padding:0}
    .mission-text{padding:0}
    .drift{animation:none!important;font-size:.75rem;padding:7px 13px}
    .sustain-block{flex-direction:column;gap:16px;padding:28px 24px;text-align:center}
    .sustain-logo{height:48px}
    .drift-field{position:static;display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
    .download-wrap{grid-template-columns:1fr;padding:32px}
    .field-row{grid-template-columns:1fr}
  }
  @media (max-width:560px){
    .steps6{grid-template-columns:1fr 1fr}
    .lb{width:100%}
    .chip-qr{display:none}
    .chip-pp{top:auto;bottom:120px;right:0}
    .foot-top{grid-template-columns:1fr}
    .principle-grid{grid-template-columns:1fr 1fr}
  }

  /* 8-step timeline */
  .steps8{max-width:820px;margin:0 auto}
  .step8{display:flex;gap:20px;padding:20px 4px;border-bottom:1px solid #ECEAF6}
  .step8:last-child{border-bottom:none}
  .step8 .num{width:40px;height:40px;border-radius:12px;background:var(--gradient);color:#fff;font-weight:800;display:grid;place-items:center;flex-shrink:0;font-size:1rem}
  .step8 .icon{width:40px;height:40px;border-radius:12px;background:var(--violet-soft);display:grid;place-items:center;flex-shrink:0;font-size:1.15rem}
  .step8 .body{flex:1}
  .step8 h3{font-size:1.02rem;font-weight:700;margin-bottom:4px}
  .step8 p{font-size:.9rem;color:var(--muted)}
  .step8 .who-tag{display:inline-block;margin-top:8px;font-size:.72rem;font-weight:700;color:var(--purple-deep);background:var(--violet-soft);padding:4px 12px;border-radius:999px}

  /* Detailed feature cards */
  /* Modules */
  .mod-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;align-items:stretch;max-width:67%;margin:0 auto}
  .mod-fun{margin-top:18px;max-width:51%;margin-left:auto;margin-right:auto}
  .mod{border-radius:18px;box-shadow:var(--shadow);padding:22px 20px;position:relative;border:1px solid transparent;display:flex;flex-direction:column;height:100%;text-align:center;transition:transform .18s ease,box-shadow .18s ease}
  .mod:hover,.mod:focus-within{transform:translateY(-6px);box-shadow:0 18px 40px rgba(76,43,184,.26)}
  @media (prefers-reduced-motion:reduce){.mod{transition:none}.mod:hover{transform:none}}
  .mod-core{background:linear-gradient(150deg,#F0356F 0%,#E41E62 100%);border-color:#C4174F}
  .mod-play{background:linear-gradient(150deg,#FBDCED 0%,#F7CCE3 100%);border-color:#EFAFD2}
  .mod-head{display:flex;align-items:center;justify-content:center;gap:9px;margin-bottom:9px}
  .mod-ico{width:30px;height:30px;border-radius:10px;background:#fff;display:grid;place-items:center;flex-shrink:0;box-shadow:0 3px 10px rgba(76,43,184,.08)}
  .mod-ico svg{width:17px;height:17px}
  .mod h3{font-size:.98rem;font-weight:800;margin:0}
  .mod p{font-size:.82rem;color:rgba(255,255,255,.92);text-align:center;margin-left:auto;margin-right:auto;flex:1;display:flex;align-items:center;justify-content:center}
  .mod h3{color:#fff}
  .mod-play h3{color:var(--ink)}
  .mod-play p{color:#8A5570;text-align:center;flex:0 0 auto}
  .mod-shots{margin-top:auto;padding-top:12px;position:relative}
  .mod-shot-web{width:100%;aspect-ratio:620/300;object-fit:cover;object-position:top left;border-radius:11px;display:block;box-shadow:0 8px 22px rgba(76,43,184,.16)}
  .mod-shot-phone{position:absolute;right:9px;bottom:9px;width:22%;max-width:62px;aspect-ratio:190/380;object-fit:cover;object-position:top;border-radius:8px;display:block;box-shadow:0 6px 18px rgba(76,43,184,.30);border:2px solid #fff}

  .mtasks{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:12px}
  .mtask{display:flex;align-items:center;justify-content:center;text-align:center;background:#fff;border-radius:8px;padding:6px 5px;font-size:.62rem;font-weight:700;line-height:1.25;color:var(--ink);cursor:help;position:relative;transition:transform .15s ease,box-shadow .15s ease}
  .mtask:hover,.mtask:focus-visible{transform:translateY(-2px);box-shadow:0 8px 20px rgba(76,43,184,.14);outline:none}
  .mtask::first-line{line-height:1.3}
  .mtask.t-green{box-shadow:inset 0 0 0 2px #CFF0E4}
  .mtask.t-violet{box-shadow:inset 0 0 0 2px #E2D9F9}
  .mtask.t-amber{box-shadow:inset 0 0 0 2px #FDEBC4}
  .mtask.t-blue{box-shadow:inset 0 0 0 2px #D8E5FD}
  .mtask.t-pink{box-shadow:inset 0 0 0 2px #FAD3E4}
  .mtask.t-orange{box-shadow:inset 0 0 0 2px #FBDCC6}
  .mtask:hover,.mtask:focus-visible{transform:translateY(-2px);box-shadow:0 8px 20px rgba(76,43,184,.18)}

  .mt-ico{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;flex-shrink:0}
  .mt-ico svg{width:19px;height:19px}
  .t-green .mt-ico{background:var(--green-soft);color:#1F9E73}
  .t-amber .mt-ico{background:#FEF3D6;color:#B77706}
  .t-pink  .mt-ico{background:var(--pink-soft);color:#C2306E}
  .t-violet .mt-ico{background:var(--violet-soft);color:var(--purple)}
  .t-blue  .mt-ico{background:var(--blue-soft);color:#2E63D6}
  .t-orange .mt-ico{background:var(--orange-soft);color:#C2660C}

  /* Hover descriptions */
  [data-tip]::after{content:attr(data-tip);position:absolute;left:50%;bottom:calc(100% + 10px);transform:translate(-50%,4px);width:max-content;max-width:250px;background:var(--ink);color:#fff;font-size:.78rem;font-weight:500;line-height:1.4;text-align:left;padding:9px 12px;border-radius:10px;box-shadow:0 10px 26px rgba(32,36,63,.28);opacity:0;visibility:hidden;transition:opacity .18s ease,transform .18s ease;z-index:20;pointer-events:none}
  [data-tip]::before{content:"";position:absolute;left:50%;bottom:calc(100% + 4px);transform:translateX(-50%);border:6px solid transparent;border-top-color:var(--ink);opacity:0;visibility:hidden;transition:opacity .18s ease;z-index:20;pointer-events:none}
  [data-tip]:hover::after,[data-tip]:focus-visible::after{opacity:1;visibility:visible;transform:translate(-50%,0)}
  [data-tip]:hover::before,[data-tip]:focus-visible::before{opacity:1;visibility:visible}
  @media (hover:none){[data-tip]::after,[data-tip]::before{display:none}}

  /* Scoring breakdown */
  .score-detail{margin-top:16px;text-align:left;border-top:1px solid var(--bg);padding-top:14px}
  .score-detail .kpi2{display:flex;justify-content:space-between;font-size:.8rem;padding:5px 0;color:var(--muted)}
  .score-detail .kpi2 b{color:var(--ink)}
  .si-box .kpi2{display:flex;align-items:baseline;gap:6px;font-size:.82rem;padding:4px 0;color:var(--muted)}
  .si-box .kpi2 span{flex:0 1 auto}
  .si-box .kpi2::before{content:none}
  .si-box .kpi2 span::after{content:" -";white-space:pre}
  .si-box .kpi2 b{color:var(--ink);flex:0 0 auto}
  .pp-examples{margin-top:30px;background:var(--card);border-radius:20px;box-shadow:var(--shadow);padding:26px 30px;overflow-x:auto}
  .pp-examples table{width:100%;border-collapse:collapse;font-size:.86rem;min-width:480px}
  .pp-examples th{text-align:left;color:var(--muted);font-weight:700;font-size:.74rem;text-transform:uppercase;letter-spacing:.05em;padding:8px 12px;border-bottom:2px solid var(--bg)}
  .pp-examples td{padding:10px 12px;border-bottom:1px solid var(--bg)}
  .pp-examples tr:last-child td{border-bottom:none}
  .pp-examples caption{text-align:left;font-weight:700;margin-bottom:14px;font-size:.95rem}

  /* Download app */
  .download-head{max-width:1000px;margin:0 auto 32px;text-align:center;padding:0 20px}
  .download-wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center;background:linear-gradient(135deg,#EFEAFD 0%,#F4EFFE 60%,#EAF1FE 100%);border:1px solid #E2D9F8;border-radius:32px;box-shadow:0 18px 46px rgba(76,43,184,.10);padding:44px}
  .dl-features{display:flex;flex-direction:column;gap:18px}
  .dl-feat{display:flex;gap:14px;align-items:flex-start}
  .dl-ico{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;font-size:1.1rem;flex-shrink:0}
  .dl-feat b{display:block;font-size:.98rem;margin-bottom:3px}
  .dl-feat small{font-size:.86rem;color:var(--muted);line-height:1.5;display:block}
  .dl-qr-panel{background:#fff;border-radius:24px;padding:28px;text-align:center;box-shadow:0 10px 30px rgba(76,43,184,.10)}
  .dl-qr-title{font-size:1.05rem;font-weight:800;display:block}
  .dl-qr-sub{font-size:.84rem;color:var(--muted);display:block;margin-top:4px}
  .dl-qr-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:20px}
  .dl-qr{display:block;text-decoration:none;color:inherit;transition:transform .15s ease}
  .dl-qr:hover{transform:translateY(-3px)}
  .dl-qr img{width:100%;max-width:132px;border-radius:12px;border:1px solid #ECEAF6;display:block;margin:0 auto 10px}
  .dl-plat{display:inline-flex;align-items:center;gap:6px;margin-bottom:10px;padding:5px 12px;border-radius:999px;font-size:.76rem;font-weight:700;letter-spacing:.02em}
  .dl-plat svg{width:15px;height:15px;display:block}
  .dl-plat.ios{background:var(--bg);color:var(--ink)}
  .dl-plat.android{background:var(--green-soft);color:#1F8F6B}
  .dl-qr b{display:block;font-size:.88rem}
  .dl-qr small{font-size:.74rem;color:var(--muted)}
  .dl-note{display:inline-flex;align-items:center;gap:8px;background:var(--violet-soft);color:var(--purple-deep);font-weight:600;font-size:.82rem;padding:9px 16px;border-radius:12px;margin-top:20px}

  /* Principles */
  .principle-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:30px}

  /* Mission block — light yellow canvas, centered text, drifting principles */
  .mission-block{position:relative;background:linear-gradient(140deg,#FEF7DC 0%,#FDF3CB 55%,#FEF9E4 100%);border:1px solid #F5E6B0;border-radius:28px;padding:36px 30px;margin-bottom:36px;overflow:hidden;display:flex;align-items:center;justify-content:center}
  .mission-text{position:relative;z-index:2;max-width:760px;margin:0 auto;text-align:center;padding:60px 0}
  .mission-text h3{font-size:1.6rem;font-weight:800;margin-bottom:14px}
  .mission-text p{color:#6B6241;font-size:1rem;line-height:1.7}

  .drift-field{position:absolute;inset:0;z-index:1;pointer-events:none}
  .drift-row{position:absolute;left:0;right:0;display:flex;justify-content:center;gap:14px;flex-wrap:nowrap;padding:0 22px}
  .drift-row.top{top:16px}
  .drift-row.bottom{bottom:16px}
  .drift{position:relative;display:inline-flex;align-items:center;gap:7px;background:rgba(255,255,255,.88);border:1px solid #F2E4B4;border-radius:999px;padding:8px 15px;font-size:.8rem;font-weight:700;color:var(--ink);box-shadow:0 6px 16px rgba(160,130,30,.10);white-space:nowrap;backdrop-filter:blur(2px)}
  .drift i{font-style:normal;font-size:1rem}

  @keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}

  .drift.d1{animation:bob 6s ease-in-out infinite}
  .drift.d2{animation:bob 7s ease-in-out infinite;animation-delay:-1.5s}
  .drift.d3{animation:bob 6.5s ease-in-out infinite;animation-delay:-3s}
  .drift.d4{animation:bob 7.5s ease-in-out infinite;animation-delay:-2s}
  .drift.d5{animation:bob 6.2s ease-in-out infinite;animation-delay:-4s}
  .drift.d6{animation:bob 7.2s ease-in-out infinite;animation-delay:-5s}

  @media (prefers-reduced-motion:reduce){.drift{animation:none!important}}

  /* From project to sustainable platform */
  .sustain-block{display:flex;align-items:center;gap:28px;background:var(--card);border-radius:24px;box-shadow:var(--shadow);padding:30px 36px;margin-top:28px}
  .sustain-rocket{font-size:2.2rem;flex-shrink:0;line-height:1}
  .sustain-text{flex:1;text-align:center;min-width:0}
  .sustain-text h3{font-size:1.15rem;font-weight:700;margin-bottom:8px}
  .sustain-text p{color:var(--muted);font-size:.93rem;max-width:52rem;margin:0 auto}
  .sustain-logo{height:56px;width:auto;flex-shrink:0;display:block}
  .principle{text-align:center;background:var(--card);border-radius:16px;box-shadow:var(--shadow);padding:20px 12px}
  .principle .e{font-size:1.4rem;margin-bottom:8px}
  .principle span{font-size:.8rem;font-weight:600}

  /* Story timeline */
  .story-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:30px}
  .story-card{background:var(--card);border-radius:20px;box-shadow:var(--shadow);padding:28px;display:flex;flex-direction:column;position:relative}
  .story-card .step-head{display:flex;align-items:center;gap:10px;margin-bottom:14px}
  .story-card .step-badge{display:inline-flex;align-items:center;gap:7px;font-weight:800;font-size:.78rem;color:#fff;background:var(--gradient);padding:6px 14px;border-radius:999px;letter-spacing:.02em;box-shadow:0 6px 16px rgba(109,74,224,.28)}
  .story-card .yr{display:inline-block;font-weight:800;color:var(--purple);background:var(--violet-soft);padding:4px 12px;border-radius:999px;font-size:.82rem;margin-bottom:0}
  .story-card .step-arrow{position:absolute;top:34px;right:-12px;transform:translateX(50%);z-index:3;font-size:1.4rem;line-height:1;color:var(--purple);opacity:.55}
  .country-list{display:flex;flex-wrap:wrap;gap:7px;margin-top:8px}
  .country{display:inline-flex;align-items:center;gap:6px;background:var(--bg);border-radius:999px;padding:5px 12px;font-size:.8rem;font-weight:600;color:var(--ink)}
  .country i{font-style:normal;font-size:.95rem;line-height:1}
  .story-funder{margin-top:auto;padding-top:20px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
  .vis-disclaimer{font-size:.62rem;line-height:1.5;color:var(--muted);flex:1;min-width:180px;margin:0;hyphens:none}
  .eu-disclaimer{font-size:.62rem;line-height:1.5;color:var(--muted);flex:1;min-width:180px;margin:0}
  .story-funder img{max-height:66px;width:auto;max-width:210px;display:block}
  .story-funder img[alt^="Co-funded"]{max-height:88px;max-width:240px}
  .story-card h3{font-size:1.05rem;font-weight:700;margin-bottom:8px}
  .story-card p{font-size:.87rem;color:var(--muted);margin-bottom:10px}
  .story-card p,.story-card .partners{hyphens:none;-webkit-hyphens:none;text-align:left;overflow-wrap:break-word;word-break:normal}
  .story-card .partners{font-size:.82rem;color:var(--ink)}
  .story-card .partners b{display:block;color:var(--purple-deep);margin-bottom:4px}

  /* Contact */
  .contact-wrap{display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:start}
  .contact-form{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:32px}
  .field{margin-bottom:16px}
  .field label{display:block;font-size:.84rem;font-weight:600;margin-bottom:6px}
  .field input,.field select,.field textarea{width:100%;border:1.5px solid #E7E3F7;border-radius:12px;padding:11px 14px;font-family:inherit;font-size:.9rem;background:var(--bg);color:var(--ink)}
  .field-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
  .topics{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:24px}
  .topic-chip{background:var(--card);border-radius:14px;box-shadow:var(--shadow);padding:14px 16px;font-size:.85rem;font-weight:600;display:flex;align-items:center;gap:10px}
  .contact-side .sec-head{text-align:left;margin:0 0 20px}

  /* Justified body copy (headings, labels and buttons stay as-is) */
  .sec-head p,
  .hero p.lead,
  .aud p,
  .step8 .body p,
  .mod p,
  .split-card p,
  .split-card li,
  .score summary p,
  .si-box p,
  .si-lead,
  .story-card p,
  .mission-text p,
  .sustain-text p,
  .dl-feat small,
  .faq details p,
  .trust p,
  .trust li,
  .foot-brand p,
  .eu-disclaimer,
  .contact-side p,
  .info p{text-align:justify;text-justify:inter-word;hyphens:auto}

  /* Keep centred blocks visually centred but justify their inner prose */
  .sec-head p,.download-head p{margin-left:auto;margin-right:auto;max-width:none;text-align:center;hyphens:none}

  /* Scoring panels: never hyphenate/justify — keeps words like "published",
     "meaningfully", "Participants", "submission", "using" whole */
  .score-panel p,
  .score-panel li,
  .score-panel .si-lead,
  .score-panel .si-note,
  .score-panel .si-formula,
  .score-panel .si-box p{text-align:left;text-justify:auto;hyphens:none;-webkit-hyphens:none;overflow-wrap:break-word;word-break:normal}
  .mission-text p,.sustain-text p{margin-left:auto;margin-right:auto}

  /* Floating "Get the app" button */
  .dl-fab{position:fixed;right:22px;bottom:22px;z-index:90;display:flex;flex-direction:column;align-items:flex-end;gap:10px}
  .dl-fab-btn{display:inline-flex;align-items:center;gap:9px;background:linear-gradient(135deg,#E0A21B,#C8860B);color:#fff;border:none;font-family:inherit;font-weight:800;font-size:.92rem;padding:14px 20px;border-radius:999px;cursor:pointer;box-shadow:0 12px 30px rgba(200,134,11,.42);transition:transform .16s ease,box-shadow .16s ease}
  .dl-fab-btn:hover{transform:translateY(-3px);box-shadow:0 16px 36px rgba(200,134,11,.5)}
  .dl-fab-btn:focus-visible{outline:3px solid #F4CE7A;outline-offset:3px}
  .dl-fab-btn svg{width:20px;height:20px;flex-shrink:0}
  .dl-fab-btn[aria-expanded="true"]{transform:translateY(-2px)}
  .dl-fab-panel{order:-1;background:#fff;border:1px solid #F0ECFA;border-radius:20px;box-shadow:0 22px 50px rgba(40,30,90,.24);padding:18px;width:290px;animation:fabIn .2s ease}
  .dl-fab-panel[hidden]{display:none}
  @keyframes fabIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
  .dl-fab-title{display:block;font-size:1rem;font-weight:800;text-align:center}
  .dl-fab-sub{display:block;text-align:center;font-size:.78rem;color:var(--muted);margin-top:3px}
  .dl-fab-note{display:block;text-align:center;font-size:.72rem;font-weight:700;color:var(--purple-deep);background:var(--violet-soft);padding:6px 10px;border-radius:9px;margin-top:8px;line-height:1.35}
  .dl-fab-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}
  .dl-fab-card{display:block;text-align:center;text-decoration:none;color:inherit;background:var(--bg);border-radius:14px;padding:10px 8px;transition:transform .15s ease,background .15s ease}
  .dl-fab-card:hover{transform:translateY(-3px);background:var(--violet-soft)}
  .dl-fab-card img{width:100%;max-width:96px;border-radius:8px;display:block;margin:0 auto 7px;background:#fff}
  .dl-fab-card b{display:block;font-size:.82rem}
  .dl-fab-card small{font-size:.7rem;color:var(--muted)}
  @media (max-width:560px){
    .dl-fab{right:14px;bottom:14px}
    .dl-fab-btn{padding:12px 16px;font-size:.85rem}
    .dl-fab-panel{width:255px}
  }
  @media (prefers-reduced-motion:reduce){.dl-fab-btn,.dl-fab-card{transition:none}.dl-fab-panel{animation:none}}

  /* Platform combo — web + mobile side by side with devices in the middle */
  .platform-combo-section{padding:40px 0 20px}
  .platform-combo{position:relative;background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:38px 34px;display:grid;grid-template-columns:1fr auto 1fr;gap:30px;align-items:center;overflow:hidden}
  .platform-combo::before,.platform-combo::after{content:"";position:absolute;top:50%;transform:translateY(-50%);width:300px;height:300px;border-radius:50%;filter:blur(70px);pointer-events:none;z-index:0}
  .platform-combo::before{left:-120px;background:rgba(124,92,224,.30)}
  .platform-combo::after{right:-120px;background:rgba(245,166,35,.30)}
  .platform-combo>*{position:relative;z-index:1}
  .pc-side{min-width:0}
  .pc-left{text-align:center}
  .pc-right{text-align:center}
  .pc-side .tag2{display:inline-flex;font-size:.72rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;padding:6px 13px;border-radius:999px;background:var(--violet-soft);color:var(--purple-deep);margin-bottom:10px}
  .pc-right .tag2{background:var(--green-soft);color:var(--green)}
  .pc-side h3{font-size:1.05rem;font-weight:800;margin-bottom:8px;line-height:1.3}
  .pc-side p{font-size:.9rem;color:var(--muted);text-align:center;hyphens:none}
  .pc-devices{position:relative;display:flex;align-items:flex-end;justify-content:center;gap:0;flex-shrink:0}
  .pc-devices .mini-laptop{width:400px;margin:0}
  .pc-devices .mini-phone{position:relative;margin-left:-46px;margin-bottom:0;align-self:flex-end;transform:none}
  .pc-devices .mini-phone .mp-frame{width:112px;border-radius:19px;padding:3px}
  .pc-devices .mini-phone .mp-screen{height:196px;border-radius:17px}
  .pc-devices .mini-phone .mp-island{width:30px;height:9px;top:5px}
  .pc-devices .mini-phone .mp-head{padding:17px 8px 6px}
  .pc-devices .mini-phone .mp-head b{font-size:.56rem}
  .pc-devices .mini-phone .mp-head small{font-size:.38rem}
  .pc-devices .mini-phone .mp-tabs span{font-size:.4rem;padding:3px 0}
  .pc-devices .mini-phone .mp-podium{padding:8px 7px 5px;gap:3px}
  .pc-devices .mini-phone .pod{padding:9px 2px 4px;border-radius:6px}
  .pc-devices .mini-phone .pod b{font-size:.5rem}
  .pc-devices .mini-phone .pod small{font-size:.36rem}
  .pc-devices .mini-phone .pod em{font-size:.32rem}
  .pc-devices .mini-phone .pod .av{width:11px;height:11px;top:-6px}
  .pc-devices .mini-phone .pod .you{font-size:.3rem;padding:0 4px}
  .pc-devices .mini-phone .mp-list-title{font-size:.42rem;padding:0 8px 3px}
  .pc-devices .mini-phone .mp-row{margin:0 6px 3px;padding:3px 5px;gap:4px}
  .pc-devices .mini-phone .mp-row .rk{width:11px;height:11px;font-size:.3rem}
  .pc-devices .mini-phone .mp-row .nm{font-size:.38rem}
  .pc-devices .mini-phone .mp-row .pts{font-size:.32rem;padding:1px 4px}
  .pc-devices .mini-phone .mp-nav{padding:4px 3px 5px;font-size:.4rem;border-radius:10px 10px 15px 15px}
  .pc-devices .mini-phone .mp-nav .cup{width:14px;height:14px;font-size:.36rem}
  @media (max-width:960px){
    .platform-combo{grid-template-columns:1fr;gap:22px;padding:30px 24px;text-align:center}
    .pc-left,.pc-right{text-align:center}
    .pc-side p{text-align:center}
    .pc-devices{order:-1}
    .pc-devices .mini-laptop{width:260px}
    .pc-devices .mini-phone .mp-frame{width:88px}
    .pc-devices .mini-phone .mp-screen{height:152px}
  }
  @media (max-width:560px){
    .pc-devices .mini-laptop{width:200px}
    .pc-devices .mini-phone{margin-left:-32px}
    .pc-devices .mini-phone .mp-frame{width:72px}
    .pc-devices .mini-phone .mp-screen{height:124px}
  }

  /* Create-account dropdown */
  .acct-drop{position:relative}
  .acct-trigger{display:inline-flex;align-items:center;gap:6px;cursor:pointer;font-family:inherit}
  .acct-trigger i{font-style:normal;font-size:.85em;transition:transform .2s ease;display:inline-block}
  .acct-trigger[aria-expanded="true"] i{transform:rotate(180deg)}
  .acct-menu{position:absolute;top:calc(100% + 10px);right:0;background:#fff;border:1px solid #F0ECFA;border-radius:16px;box-shadow:0 20px 46px rgba(76,43,184,.20);padding:8px;width:320px;z-index:70;animation:acctIn .18s ease}
  .acct-menu[hidden]{display:none}
  @keyframes acctIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
  .acct-item{display:block;padding:12px 14px;border-radius:12px;text-decoration:none;color:inherit;transition:background .15s ease}
  .acct-item:hover{background:var(--violet-soft)}
  .acct-item{display:flex;align-items:center;gap:11px}
  .acct-item b{display:block;font-size:.9rem;color:var(--ink);margin-bottom:3px}
  .acct-txt{min-width:0}
  .acct-ico{width:28px;height:28px;min-width:28px;border-radius:9px;background:var(--violet-soft);display:inline-flex;align-items:center;justify-content:center;flex:0 0 28px;padding:0;margin:0;overflow:hidden;line-height:0}
  .acct-ico-green{background:var(--green-soft)}
  .acct-ico svg{width:15px;height:15px;display:block;flex:none}
  .acct-item .acct-txt > span{display:block;font-size:.78rem;color:var(--muted);line-height:1.45;hyphens:none}
  @media (max-width:560px){.acct-menu{width:270px}}

  /* Language selector */
  .lang-drop{position:relative;flex-shrink:0}
  .lang-btn{display:inline-flex;align-items:center;gap:6px;background:#fff;border:1.5px solid #E4E0F5;border-radius:999px;padding:8px 13px;font-family:inherit;font-size:.82rem;font-weight:700;color:var(--purple-deep);cursor:pointer;transition:border-color .15s ease,transform .15s ease}
  .lang-btn:hover{border-color:var(--purple);transform:translateY(-2px)}
  .lang-btn:focus-visible{outline:3px solid #B9A6F5;outline-offset:2px}
  .lang-btn svg{width:15px;height:15px}
  .lang-btn i{font-style:normal;font-size:.8em;transition:transform .2s ease}
  .lang-btn[aria-expanded="true"] i{transform:rotate(180deg)}
  .lang-menu{position:absolute;top:calc(100% + 8px);right:0;background:#fff;border:1px solid #F0ECFA;border-radius:14px;box-shadow:0 18px 40px rgba(76,43,184,.18);padding:6px;min-width:160px;z-index:80}
  .lang-menu[hidden]{display:none}
  .lang-item{display:block;width:100%;text-align:left;background:none;border:none;font-family:inherit;font-size:.85rem;font-weight:600;color:var(--ink);padding:9px 12px;border-radius:9px;cursor:pointer;transition:background .15s ease}
  .lang-item:hover{background:var(--violet-soft);color:var(--purple-deep)}
  .lang-item[aria-current="true"]{background:var(--violet-soft);color:var(--purple-deep)}
  @media (max-width:1040px){.lang-btn{padding:7px 10px;font-size:.78rem}}

  /* ---- Translated-language layout safeguards ----
     Keeps the English design intact; only relaxes sizing where other
     languages need more room (shrink text or allow an extra line). */
  html:not([lang="en"]) .nav-links{gap:12px;font-size:.78rem}
  html:not([lang="en"]) .nav-links a,
  html:not([lang="en"]) .nav-drop-trigger{white-space:normal;line-height:1.25;text-align:center}
  html:not([lang="en"]) .btn-sm{padding:8px 12px;font-size:.76rem}
  html:not([lang="en"]) .lang-btn{padding:7px 10px;font-size:.76rem}

  /* buttons: wrap instead of overflowing */
  html:not([lang="en"]) .btn{white-space:normal;text-align:center;line-height:1.3}
  html:not([lang="en"]) .hero-ctas .btn{padding:12px 20px;font-size:.9rem}

  /* task chips: allow two lines, slightly smaller */
  html:not([lang="en"]) .mtask{font-size:.5rem;padding:5px 3px;line-height:1.2;hyphens:auto}

  /* activity board tiles: wrap long names */
  html:not([lang="en"]) .act-item{white-space:normal;text-align:center;font-size:.8rem;line-height:1.3}

  /* score cards + module cards: keep headings inside the box */
  html:not([lang="en"]) .score h3{font-size:.9rem;line-height:1.3}
  html:not([lang="en"]) .score .who{font-size:.72rem;line-height:1.3}
  html:not([lang="en"]) .mod h3{font-size:.9rem;line-height:1.25}
  html:not([lang="en"]) .expand-hint{font-size:.72rem;padding:7px 12px;white-space:normal;text-align:center}

  /* dropdown menus need more width for longer labels */
  html:not([lang="en"]) .nav-drop-menu{min-width:520px}
  html:not([lang="en"]) .nav-drop-menu-mod{min-width:400px}
  html:not([lang="en"]) .nd-item{font-size:.76rem;line-height:1.3;text-align:left}
  html:not([lang="en"]) .acct-menu{width:350px}

  /* device mockups + fab: shrink label text so chrome stays put */
  html:not([lang="en"]) .dl-fab-btn{font-size:.84rem;padding:13px 17px}
  html:not([lang="en"]) .tbadge{font-size:.72rem;padding:8px 12px}
  html:not([lang="en"]) .country{font-size:.75rem}
  html:not([lang="en"]) .step-badge{font-size:.72rem}

  /* small print blocks: never let long text push the layout */
  html:not([lang="en"]) .si-table table{font-size:.72rem}
  html:not([lang="en"]) .si-table th{font-size:.62rem}
  html:not([lang="en"]) .foot-col a,
  html:not([lang="en"]) .foot-col h4{white-space:normal;line-height:1.35}

  @media (max-width:1180px){
    html:not([lang="en"]) .nav-links{font-size:.72rem;gap:9px}
  }

  .cs-lead{font-size:.95rem;color:var(--muted);line-height:1.6;margin-bottom:18px}
  .word-count{display:block;text-align:right;font-size:.76rem;color:var(--muted);margin-top:6px;font-weight:600}
  .word-count.over{color:#D6336C}

  .h1-line{display:block;white-space:nowrap}
  /* shrink long translations so each line still fits on one row */
  html:not([lang="en"]) h1{font-size:clamp(1.5rem,3.4vw,2.7rem)}
  html[lang="ka"] h1,html[lang="hy"] h1{font-size:clamp(1.35rem,3vw,2.4rem)}
  html[lang="uk"] h1,html[lang="el"] h1{font-size:clamp(1.4rem,3.1vw,2.5rem)}
  @media (max-width:760px){.h1-line{white-space:normal}}

  .contact-side{display:flex;flex-direction:column;justify-content:center;height:100%}
  .contact-wrap{align-items:stretch}
  @media (max-width:960px){.contact-side{height:auto}}

  /* narrow cards: justification opens ugly gaps, so left-align there */
  .mod p,.mod-play p,.split-card p,.aud p,.feat2 p,.door p{text-align:center;hyphens:auto}
  html:not([lang="en"]) .mod p,
  html:not([lang="en"]) .mod-play p,
  html:not([lang="en"]) .split-card p,
  html:not([lang="en"]) .feat2 p{text-align:left;text-justify:auto;hyphens:auto;word-spacing:normal}
  html:not([lang="en"]) .si-box p,
  html:not([lang="en"]) .story-card p,
  html:not([lang="en"]) .sec-head p,
  html:not([lang="en"]) .faq details p{text-align:left;text-justify:auto;word-spacing:normal}

  .dl-fab-panel .dl-fab-title,
  .dl-fab-panel .dl-fab-sub,
  .dl-fab-panel .dl-fab-note{text-align:center}

  /* ================= MOBILE ================= */
  html,body{max-width:100%;overflow-x:hidden}
  *{min-width:0}

  /* burger button — hidden on desktop */
  .nav-burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:42px;height:42px;
    background:#fff;border:1.5px solid #E4E0F5;border-radius:12px;cursor:pointer;padding:0 10px;flex-shrink:0}
  .nav-burger span{display:block;height:2.5px;background:var(--purple-deep);border-radius:2px;transition:transform .2s ease,opacity .2s ease}
  .nav-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
  .nav-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
  .nav-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

  .mobile-menu{display:none;position:sticky;top:80px;z-index:70;background:#fff;border-bottom:1px solid #ECEAF6;
    box-shadow:0 14px 30px rgba(76,43,184,.10);padding:10px 20px 16px}
  .mobile-menu a{display:block;padding:13px 8px;font-weight:700;font-size:.95rem;color:var(--ink);border-bottom:1px solid #F4F2FB}
  .mobile-menu a:last-child{border-bottom:none}
  .mobile-menu a:active{color:var(--purple)}

  @media (max-width:1040px){
    .nav-burger{display:flex}
    .mobile-menu:not([hidden]){display:block}
  }

  @media (max-width:760px){
    .nav-inner{height:68px;gap:10px}
    .mobile-menu{top:68px}
    .logo-img{height:34px}
    .btn-sm{padding:7px 11px;font-size:.74rem}
    .lang-btn{padding:6px 9px;font-size:.72rem}
    .lang-btn svg{width:13px;height:13px}

    /* hero */
    .hero{padding:34px 0 30px;gap:26px}
    h1{font-size:clamp(1.6rem,7.5vw,2.2rem)}
    html:not([lang="en"]) h1{font-size:clamp(1.35rem,6.4vw,1.9rem)}
    .hero p.lead{font-size:.98rem}
    .hero-ctas{flex-direction:column;align-items:stretch}
    .hero-ctas .btn{width:100%;justify-content:center}
    .trust-badges{flex-wrap:wrap;overflow-x:visible}
    .tbadge{white-space:normal;font-size:.74rem}

    /* device mockups must never exceed the screen */
    .hero-visual{max-width:100%;padding-bottom:24px}
    .laptop-mock{max-width:100%}
    .phone-mock{width:38%;max-width:120px;right:-2%;bottom:-14px}
    .hero-phone .screen{height:250px}
    .iqi-card{max-width:100%;margin-top:34px;padding:14px 16px;gap:12px}
    .ring{width:58px;height:58px}
    .ring::after{width:42px;height:42px}

    /* platform combo */
    .pc-devices{flex-direction:column;align-items:center;gap:14px}
    .pc-devices .mini-laptop{width:min(100%,260px)}
    .pc-devices .mini-phone{margin-left:0;align-self:center}
    .pc-devices .mini-phone .mp-frame{width:96px}
    .pc-devices .mini-phone .mp-screen{height:168px}

    /* sections */
    section{padding:44px 0}
    .wrap{padding:0 18px}
    .sec-head{padding:0 4px;margin-bottom:30px}
    h2{font-size:clamp(1.35rem,5.6vw,1.8rem)}
    .mod-grid{max-width:100%;gap:14px}
    .mod-fun{max-width:100%}
    .mtasks{grid-template-columns:1fr 1fr;gap:6px}
    .mtask{font-size:.62rem;padding:7px 5px}
    .act-item{white-space:normal;font-size:.78rem;text-align:center}
    .act-break{display:none}
    .step8{gap:12px;padding:16px 0}
    .step8 .num,.step8 .icon{width:32px;height:32px;font-size:.85rem;border-radius:10px}
    .scores{gap:16px}
    .score-tab{padding:24px 18px}
    .score-inner{padding:20px 18px 24px}
    .si-table{margin:0 -4px}
    .trust{padding:30px 20px;gap:24px}
    .trust-shot img{max-width:100%}
    .story-card{padding:20px 18px}
    .contact-form{padding:22px 18px}
    .platform-combo{padding:26px 18px}
    .mission-block{padding:26px 16px}
    .download-wrap,.download-head{padding-left:0;padding-right:0}

    /* floating app button + panels */
    .dl-fab{right:12px;bottom:12px}
    .dl-fab-btn{padding:11px 15px;font-size:.8rem}
    .dl-fab-panel{width:min(88vw,270px)}
    .acct-menu{width:min(88vw,300px);right:-6px}

    /* footer */
    .foot-top{grid-template-columns:1fr;row-gap:24px;text-align:center}
    .foot-brand{display:flex;flex-direction:column;align-items:center}
    .foot-brand .logo{display:inline-flex;justify-content:center;order:0}
    .foot-brand p{margin-left:auto;margin-right:auto}
    .foot-col a{display:inline-block}
    .story-funder{justify-content:center}
  }

  @media (max-width:400px){
    .mtasks{grid-template-columns:1fr}
    .hero-phone .screen{height:220px}
    .phone-mock{max-width:100px}
  }

  /* ============ FINAL MOBILE OVERRIDES (must stay last) ============ */
  @media (max-width:960px){
    /* every multi-column grid collapses to one column */
    .mod-grid,.mod-fun,.story-grid,.contact-wrap,.split,.aud-grid,
    .info-grid,.doors,.pillars,.feat-grid,.act-list,.nd-grid,.dl-fab-grid,
    .platform-combo,.why,.trust,.download-wrap,.foot-top,.field-row,
    .si-grid,.steps6,.principle-grid{grid-template-columns:1fr!important;max-width:100%!important}
    .mod-grid,.mod-fun{margin-left:0;margin-right:0}
    .why-values{grid-template-columns:1fr!important}
  }

  @media (max-width:760px){
    /* ---- hero: stop the mockups colliding ---- */
    .hero-visual{max-width:100%;padding-bottom:70px}
    .laptop-mock{max-width:100%;margin-top:8px}
    .phone-mock{position:static;width:132px;max-width:132px;margin:-26px auto 0;display:block}
    .hero-phone .screen{height:236px}
    .iqi-card{margin:22px auto 0}

    /* ---- mission: chips must not overlap the text ---- */
    .mission-block{flex-direction:column;padding:24px 16px;gap:14px}
    .drift-field{position:static;display:flex;flex-direction:column;gap:8px}
    .drift-row{position:static!important;flex-wrap:wrap;justify-content:center;gap:8px;padding:0}
    .drift{position:static!important;animation:none!important;white-space:normal;
      max-width:100%;font-size:.74rem;padding:7px 12px;overflow:visible;text-overflow:clip}
    .mission-text{padding:0}

    /* ---- score badges: keep the brand font from falling back to serif ---- */
    .score .badge{font-family:'Poppins',system-ui,sans-serif;font-style:normal;letter-spacing:.02em}
    .score h3{color:var(--ink)}

    /* ---- contact form: single column, full-width fields ---- */
    .field-row{grid-template-columns:1fr!important;gap:0}
    .contact-form input,.contact-form select,.contact-form textarea{width:100%;font-size:16px}
    .contact-form .btn{width:100%;justify-content:center}
    .contact-side{margin-top:22px}

    /* ---- story cards ---- */
    .story-card .step-arrow{display:none}
    .story-funder{flex-direction:column;align-items:center;text-align:center;gap:10px}
    .vis-disclaimer,.eu-disclaimer{text-align:left;min-width:0}

    /* ---- keep the floating button clear of content & tappable ---- */
    .dl-fab{right:12px;bottom:12px;z-index:120}
    .dl-fab-btn{padding:12px 16px;font-size:.82rem}
    body{padding-bottom:76px}

    /* ---- make sure the header controls stay reachable ---- */
    nav{z-index:130}
    .acct-menu{position:fixed;top:auto;right:10px;left:10px;width:auto;max-width:none}
    .lang-menu{position:fixed;right:10px;left:auto;top:auto;min-width:150px}

    /* never justify text on narrow screens */
    p,li{text-align:left!important;hyphens:auto}
    .sec-head p,.mission-text p,.download-head p{text-align:center!important}
    h1,h2,h3,.sec-head,.mod-head{text-align:center}
  }

  @media (max-width:430px){
    .wrap{padding:0 14px}
    .mtasks{grid-template-columns:1fr}
    .phone-mock{width:118px;max-width:118px}
    .hero-phone .screen{height:212px}
    .dl-fab-btn span{font-size:.78rem}
  }

  /* ===== JS-FREE CONTROLS (work in any viewer) ===== */
  details summary::-webkit-details-marker{display:none}
  details summary::marker{content:""}

  /* burger */
  .nav-burger-wrap{position:relative;display:none;flex-shrink:0}
  .nav-burger{list-style:none;display:flex;flex-direction:column;justify-content:center;gap:5px;
    width:42px;height:42px;background:#fff;border:1.5px solid #E4E0F5;border-radius:12px;
    cursor:pointer;padding:0 10px;box-sizing:border-box}
  .nav-burger span{display:block;height:2.5px;background:var(--purple-deep);border-radius:2px}
  .nav-burger-wrap .mobile-menu{position:absolute;top:calc(100% + 10px);right:0;width:min(78vw,260px);
    background:#fff;border:1px solid #ECEAF6;border-radius:16px;box-shadow:0 20px 44px rgba(76,43,184,.20);
    padding:8px 14px 12px;z-index:200;display:block}
  .mobile-menu a{display:block;padding:12px 6px;font-weight:700;font-size:.92rem;color:var(--ink);
    border-bottom:1px solid #F4F2FB}
  .mobile-menu a:last-child{border-bottom:none}
  @media (max-width:1040px){.nav-burger-wrap{display:block}}

  /* get the app */
  .dl-fab{position:fixed;right:22px;bottom:22px;z-index:140}
  .dl-fab .dl-fab-btn{list-style:none;cursor:pointer}
  .dl-fab .dl-fab-panel{position:absolute;right:0;bottom:calc(100% + 12px)}

  /* create account */
  .acct-drop{position:relative}
  .acct-drop .acct-trigger{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
  .acct-drop .acct-menu{position:absolute;top:calc(100% + 10px);right:0;z-index:200}

  /* ===== header layout: logo must never be overlapped ===== */
  .nav-inner{display:flex;align-items:center;gap:10px;flex-wrap:nowrap}
  .logo{flex:0 0 auto;min-width:auto;overflow:visible}
  .nav-cta{flex:0 0 auto;margin-left:auto}

  @media (max-width:1040px){
    .nav-inner{gap:8px}
    .lang-drop{order:3}
  }
  @media (max-width:760px){
    .nav-inner{height:64px;gap:6px}
    .logo-img{height:28px}
    .btn-sm{padding:7px 10px;font-size:.7rem}
    .lang-btn{padding:6px 8px;font-size:.68rem}
    .lang-btn svg{width:12px;height:12px}
    .nav-burger{width:36px;height:36px;padding:0 8px}
    /* Sign in is reachable from the menu, so free up space */
    .nav-cta > a.btn-ghost{display:none}
    .dl-fab{right:10px;bottom:10px}
    .dl-fab .dl-fab-panel{width:min(90vw,280px)}
    .acct-drop .acct-menu{position:fixed;right:8px;left:8px;width:auto;top:auto}
  }
  @media (max-width:400px){
    .logo-img{height:24px}
    .btn-sm{padding:6px 8px;font-size:.66rem}
  }

  /* If JavaScript never runs, reveal the panels that JS would otherwise open. */
  .nojs .faq-more[hidden]{display:block!important}
  .nojs .faq-toggle{display:none}

  /* panels must be completely hidden while their <details> is closed */

  /* the <details> wrappers themselves must be invisible containers */
  .acct-drop,.dl-fab,.nav-burger-wrap{background:none;border:none;box-shadow:none}
  .acct-drop > summary,.dl-fab > summary,.nav-burger-wrap > summary{outline:none}
  .logo-img{max-width:none;height:42px;width:auto;object-fit:contain}
  @media (max-width:760px){.logo-img{height:30px}}
  @media (max-width:400px){.logo-img{height:26px}}

  /* ---- required-field asterisk ---- */
  .req{color:#E4396A;font-weight:800}

  /* ---- score cards: list-style/marker reset + summary base look
     (full accordion layout lives in the single "SCORES" block below) ---- */
  .score-sum{list-style:none;cursor:pointer;display:flex;flex-direction:column;align-items:center;
    text-align:center;padding:30px 26px;transition:background .15s ease}
  .score-sum::-webkit-details-marker{display:none}
  .score-sum:hover{background:#FBFAFF}
  .eh-arrow{display:inline-block;transition:transform .2s ease}
  details.score[open] .eh-arrow{transform:rotate(180deg)}
  .score-body{text-align:left;animation:panelIn .2s ease}

  /* ---- header: logo · menu · language · sign in · create account ---- */
  @media (max-width:1040px){
    .nav-inner{flex-wrap:wrap;height:auto;padding:10px 0;row-gap:8px}
    .logo{order:1}
    .nav-burger-wrap{order:2;display:block}
    .lang-drop{order:3}
    .nav-cta{order:4;margin-left:auto;display:flex;gap:8px}
    .nav-cta > a.btn-ghost{display:inline-flex}
    .mobile-menu{position:absolute;top:calc(100% + 8px);right:0}
  }
  @media (max-width:760px){
    .nav-inner{gap:6px}
    .logo-img{height:26px}
    .nav-burger{width:34px;height:34px;padding:0 8px;gap:4px}
    .lang-btn{padding:5px 8px;font-size:.66rem}
    .btn-sm{padding:6px 9px;font-size:.66rem}
    details.score[open] .si-grid{grid-template-columns:1fr}
    .score-sum{padding:22px 16px}
  }
  @media (max-width:430px){
    /* second row for menu + language so nothing is squeezed */
    .nav-inner{justify-content:space-between}
    .logo{order:1;flex:1 1 auto}
    .nav-cta{order:2;margin-left:0}
    .nav-burger-wrap{order:3}
    .lang-drop{order:4}
    .logo-img{height:24px}
    .btn-sm{padding:6px 8px;font-size:.62rem}
  }

  /* ---- hero: phone tucked into the laptop's bottom-right ---- */
  @media (max-width:760px){
    .hero-visual{padding-bottom:20px;position:relative}
    .laptop-mock{position:relative;max-width:100%}
    .phone-mock{position:absolute!important;right:2%;bottom:-8px;margin:0!important;
      width:29%!important;max-width:104px!important;z-index:3}
    .hero-phone .screen{height:186px}
    .hero-phone .hp-head{padding:20px 8px 6px}
    .hero-phone .hp-head b{font-size:.66rem}
    .hero-phone .hp-head small{font-size:.44rem;line-height:1.3}
    .hero-phone .hp-tabs span{font-size:.46rem;padding:3px 0}
    .hero-phone .hp-podium{padding:8px 6px 5px;gap:3px}
    .hero-phone .hpod b{font-size:.56rem}
    .hero-phone .hpod small{font-size:.4rem}
    .hero-phone .hpod em{font-size:.36rem}
    .hero-phone .hpod .av{width:12px;height:12px;top:-6px}
    .hero-phone .hpod .you{font-size:.34rem;padding:0 4px}
    .hero-phone .hp-list-title{font-size:.46rem;padding:0 8px 3px}
    .hero-phone .hp-row{margin:0 7px 3px;padding:3px 5px;gap:4px}
    .hero-phone .hp-row .rk{width:12px;height:12px;font-size:.32rem}
    .hero-phone .hp-row .nm{font-size:.4rem}
    .hero-phone .hp-row .pts{font-size:.34rem;padding:1px 4px}
    .hero-phone .hp-nav{padding:4px 3px 5px;font-size:.42rem}
    .hero-phone .hp-nav .cup{width:15px;height:15px;font-size:.36rem}
    .iqi-card{margin-top:26px}
  }
  @media (max-width:430px){
    .phone-mock{max-width:88px!important;right:1%}
    .hero-phone .screen{height:158px}
  }

  /* ===== language selector as <details> ===== */
  .lang-drop{position:relative;flex-shrink:0}
  .lang-btn{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
  .lang-btn::-webkit-details-marker{display:none}
  .lang-menu{position:absolute;top:calc(100% + 8px);right:0;z-index:200}

  /* ===== MOBILE HEADER: row 1 = logo + sign in + create account
                          row 2 = menu + language (right aligned) ===== */
  @media (max-width:1040px){
    .nav-inner{flex-wrap:wrap;height:auto;padding:10px 0;row-gap:8px;align-items:center}
    .logo{order:1;flex:1 1 auto}
    .nav-cta{order:2;margin-left:auto;display:flex;gap:8px;flex:0 0 auto}
    .nav-cta > a.btn-ghost{display:inline-flex}
    /* force a line break so menu + language drop to row 2 */
    .nav-inner::after{content:"";order:3;flex-basis:100%;height:0}
    .nav-burger-wrap{order:4;margin-left:auto}
    .lang-drop{order:5}
    .nav-burger-wrap .mobile-menu{right:0;left:auto}
  }
  @media (max-width:760px){
    .logo-img{height:28px}
    .btn-sm{padding:7px 10px;font-size:.7rem}
    .nav-burger{width:34px;height:34px}
    .lang-btn{padding:6px 9px;font-size:.7rem}
  }
  @media (max-width:400px){
    .logo-img{height:24px}
    .btn-sm{padding:6px 8px;font-size:.64rem}
  }

  /* ===== hero devices presented like the platform card (purple + yellow glow) ===== */
  @media (max-width:1040px){
    .hero-visual{position:relative;background:var(--card);border-radius:var(--radius);
      box-shadow:var(--shadow);padding:26px 20px 30px;overflow:hidden;margin-top:6px}
    .hero-visual::before,.hero-visual::after{content:"";position:absolute;top:50%;
      transform:translateY(-50%);width:240px;height:240px;border-radius:50%;filter:blur(64px);
      pointer-events:none;z-index:0}
    .hero-visual::before{left:-110px;background:rgba(124,92,224,.32)}
    .hero-visual::after{right:-110px;background:rgba(245,166,35,.32)}
    .hero-visual > *{position:relative;z-index:1}
    .iqi-card{background:#fff}
  }

  /* ===== remove the native disclosure marker everywhere (the "+" / triangle) ===== */
  details > summary{list-style:none!important;list-style-type:none!important}
  details > summary::-webkit-details-marker{display:none!important;content:none!important}
  details > summary::marker{content:""!important;font-size:0!important}
  /* summary defaults to display:list-item, which is what draws the marker */
  .lang-btn,.dl-fab-btn,.acct-trigger,.nav-burger,.score-sum,.faq details > summary{display:flex!important}
  .lang-btn,.dl-fab-btn,.acct-trigger{align-items:center;justify-content:center}
  .nav-burger{flex-direction:column;justify-content:center}
  .score-sum{flex-direction:column;align-items:center}
  .faq details > summary{justify-content:space-between;align-items:center}

  /* ===== closed panels must be fully hidden, no stray white boxes ===== */

  /* ===== checkbox-based dropdowns: no native marker, no JS ===== */
  .tgl{position:relative}
  .tgl-input{position:absolute;opacity:0;width:0;height:0;pointer-events:none}
  .tgl-label{cursor:pointer;user-select:none}
  .tgl > .lang-menu,.tgl > .acct-menu,.tgl > .dl-fab-panel,.tgl > .mobile-menu{display:none}
  .tgl-input:checked ~ .lang-menu,
  .tgl-input:checked ~ .acct-menu,
  .tgl-input:checked ~ .dl-fab-panel,
  .tgl-input:checked ~ .mobile-menu{display:block}
  .tgl-input:checked ~ .tgl-label i{transform:rotate(180deg)}
  .tgl-input:focus-visible ~ .tgl-label{outline:3px solid #B9A6F5;outline-offset:2px}

  .lang-drop.tgl > .lang-menu{position:absolute;top:calc(100% + 8px);right:0;z-index:200}
  .acct-drop.tgl > .acct-menu{position:absolute;top:calc(100% + 10px);right:0;z-index:200}
  .dl-fab.tgl > .dl-fab-panel{position:absolute;right:0;bottom:calc(100% + 12px);z-index:200}
  .nav-burger-wrap.tgl > .mobile-menu{position:absolute;top:calc(100% + 10px);right:0;z-index:200}

  .lang-btn.tgl-label{display:inline-flex;align-items:center;gap:6px}
  .acct-trigger.tgl-label{display:inline-flex;align-items:center;gap:6px}
  .dl-fab-btn.tgl-label{display:inline-flex;align-items:center;gap:9px}
  .nav-burger.tgl-label{display:flex;flex-direction:column;justify-content:center;gap:5px}

  /* ===== hero phone: full leaderboard, nothing cut off (matches Mobile app section) ===== */
  @media (max-width:1040px){
    .hero-visual{padding-bottom:34px}
    .phone-mock{position:absolute!important;right:3%;bottom:-10px;margin:0!important;
      width:34%!important;max-width:126px!important;z-index:3}
    .hero-phone .screen{height:auto!important;min-height:0;display:flex;flex-direction:column}
    .hero-phone .hp-head{padding:18px 8px 6px}
    .hero-phone .hp-head b{font-size:.62rem;line-height:1.2}
    .hero-phone .hp-head small{font-size:.42rem;line-height:1.3}
    .hero-phone .hp-tabs{margin-top:5px}
    .hero-phone .hp-tabs span{font-size:.44rem;padding:3px 0}
    .hero-phone .hp-podium{padding:8px 5px 4px;gap:3px}
    .hero-phone .hpod{padding:9px 2px 4px;border-radius:6px}
    .hero-phone .hpod b{font-size:.54rem}
    .hero-phone .hpod small{font-size:.38rem}
    .hero-phone .hpod em{font-size:.34rem}
    .hero-phone .hpod .av{width:11px;height:11px;top:-5px;border-width:1.5px}
    .hero-phone .hpod .you{font-size:.32rem;padding:0 4px}
    .hero-phone .hp-list-title{font-size:.44rem;padding:0 7px 3px}
    .hero-phone .hp-row{margin:0 6px 3px;padding:3px 5px;gap:4px}
    .hero-phone .hp-row .rk{width:11px;height:11px;font-size:.3rem}
    .hero-phone .hp-row .nm{font-size:.38rem}
    .hero-phone .hp-row .pts{font-size:.32rem;padding:1px 4px}
    .hero-phone .hp-nav{padding:4px 3px 5px;font-size:.4rem;margin-top:4px}
    .hero-phone .hp-nav .cup{width:14px;height:14px;font-size:.34rem}
  }
  @media (max-width:430px){
    .phone-mock{max-width:110px!important;right:2%}
  }

  /* ===== FINAL: dropdown toggles + fixed app button (must stay last) ===== */
  .tgl{position:relative}
  /* the app button is a floating control, not an inline one */
  .dl-fab.tgl{position:fixed;right:22px;bottom:22px;z-index:150;
    display:flex;flex-direction:column;align-items:flex-end;gap:10px}

  .tgl > .lang-menu,
  .tgl > .acct-menu,
  .tgl > .dl-fab-panel,
  .tgl > .mobile-menu{display:none}
  .tgl > .tgl-input:checked ~ .lang-menu,
  .tgl > .tgl-input:checked ~ .acct-menu,
  .tgl > .tgl-input:checked ~ .dl-fab-panel,
  .tgl > .tgl-input:checked ~ .mobile-menu{display:block}

  .lang-drop.tgl > .lang-menu{position:absolute;top:calc(100% + 8px);right:0;z-index:210}
  .acct-drop.tgl > .acct-menu{position:absolute;top:calc(100% + 10px);right:0;z-index:210}
  .dl-fab.tgl > .dl-fab-panel{position:absolute;right:0;bottom:calc(100% + 12px);z-index:210}
  .nav-burger-wrap.tgl > .mobile-menu{position:absolute;top:calc(100% + 10px);right:0;z-index:210}

  @media (max-width:760px){
    .dl-fab.tgl{right:12px;bottom:12px}
    .dl-fab.tgl > .dl-fab-panel{width:min(90vw,282px)}
    .acct-drop.tgl > .acct-menu{position:fixed;right:8px;left:8px;width:auto;top:auto}
  }

  /* ===== click-outside backdrop (pure CSS, no JS) ===== */
  .tgl-backdrop{display:none;position:fixed;inset:0;z-index:190;background:transparent;cursor:default}
  .tgl > .tgl-input:checked ~ .tgl-backdrop{display:block}
  /* panels sit above the backdrop so their own clicks still work */
  .lang-drop.tgl > .lang-menu,
  .acct-drop.tgl > .acct-menu,
  .dl-fab.tgl > .dl-fab-panel,
  .nav-burger-wrap.tgl > .mobile-menu{z-index:200}
  .tgl > .tgl-label{position:relative;z-index:200}

  /* ===== hero phone: half size, participant list hidden ===== */
  @media (max-width:1040px){
    .phone-mock{position:absolute!important;right:4%;bottom:4px;margin:0!important;
      width:27%!important;max-width:96px!important;z-index:3}
    .hero-phone .screen{height:auto!important}
    .hero-phone .hp-list-title,
    .hero-phone .hp-row{display:none!important}
    .hero-phone .hp-head{padding:15px 7px 5px}
    .hero-phone .hp-head b{font-size:.54rem}
    .hero-phone .hp-head small{font-size:.36rem;line-height:1.25}
    .hero-phone .hp-tabs{margin-top:4px}
    .hero-phone .hp-tabs span{font-size:.38rem;padding:2px 0}
    .hero-phone .hp-podium{padding:7px 5px 6px;gap:2px}
    .hero-phone .hpod{padding:8px 2px 4px;border-radius:5px}
    .hero-phone .hpod b{font-size:.46rem}
    .hero-phone .hpod small{font-size:.34rem;margin-top:1px}
    .hero-phone .hpod em{font-size:.3rem}
    .hero-phone .hpod .av{width:9px;height:9px;top:-4px;border-width:1.5px}
    .hero-phone .hpod .you{font-size:.28rem;padding:0 3px}
    .hero-phone .hp-nav{padding:3px 2px 4px;font-size:.34rem;margin-top:2px}
    .hero-phone .hp-nav .cup{width:12px;height:12px;font-size:.3rem}
    .hero-phone .island{width:30px;height:8px;top:4px}
  }
  @media (max-width:430px){
    .phone-mock{max-width:84px!important;right:3%}
  }

  /* ===== desktop nav: centre the links between logo and controls ===== */
  @media (min-width:1041px){
    .nav-inner{display:flex;align-items:center;gap:18px;flex-wrap:nowrap;justify-content:flex-start}
    .logo{flex:0 0 auto}
    .nav-links{flex:1 1 auto;justify-content:center;display:flex}
    .nav-cta{flex:0 0 auto;margin-left:0}
    .lang-drop{flex:0 0 auto;margin-left:0}
  }

  /* ===== hero phone: real handset proportions (19.5:9), never stretched ===== */
  @media (max-width:1040px){
    .phone-mock{position:absolute!important;right:4%;bottom:6px;margin:0!important;
      width:26%!important;max-width:92px!important;z-index:3;padding:3px!important;
      border-radius:16px!important}
    .hero-phone .screen{height:auto!important;aspect-ratio:9/19.5;overflow:hidden;
      border-radius:13px!important;display:flex;flex-direction:column}
    .hero-phone .island{width:26px;height:7px;top:3px;border-radius:5px}
    .hero-phone .hp-head{padding:13px 6px 4px}
    .hero-phone .hp-head b{font-size:.5rem;line-height:1.15}
    .hero-phone .hp-head small{font-size:.32rem;line-height:1.25}
    .hero-phone .hp-tabs{margin-top:3px;padding:1.5px}
    .hero-phone .hp-tabs span{font-size:.34rem;padding:2px 0}
    .hero-phone .hp-podium{padding:6px 4px 4px;gap:2px;flex:1;align-items:flex-end}
    .hero-phone .hpod{padding:7px 2px 3px;border-radius:4px}
    .hero-phone .hpod b{font-size:.42rem}
    .hero-phone .hpod small{font-size:.3rem;margin-top:1px}
    .hero-phone .hpod em{font-size:.28rem}
    .hero-phone .hpod .av{width:8px;height:8px;top:-4px;border-width:1px}
    .hero-phone .hpod .you{font-size:.26rem;padding:0 3px}
    .hero-phone .hp-list-title,.hero-phone .hp-row{display:none!important}
    .hero-phone .hp-nav{padding:3px 2px 4px;font-size:.3rem;margin-top:auto;border-radius:8px 8px 12px 12px}
    .hero-phone .hp-nav .cup{width:11px;height:11px;font-size:.28rem}
  }
  @media (max-width:430px){
    .phone-mock{max-width:80px!important;right:3%}
  }

  /* ===== tell the user when language switching can't run ===== */
  .nojs-note{display:none;font-size:.7rem;color:var(--muted);padding:8px 10px;line-height:1.4;
    border-top:1px solid #F0ECFA;margin-top:4px}
  .nojs .nojs-note{display:block}


  /* ===== trust badges: never scroll; wrap and shrink to fit ===== */
  .trust-badges{display:flex!important;flex-wrap:wrap!important;overflow:visible!important;
    overflow-x:visible!important;gap:8px}
  .tbadge{white-space:normal;flex:0 1 auto;max-width:100%}
  html:not([lang="en"]) .tbadge{font-size:.72rem;padding:7px 12px}
  @media (max-width:760px){
    .tbadge{font-size:.7rem;padding:7px 11px}
    html:not([lang="en"]) .tbadge{font-size:.64rem;padding:6px 10px}
  }
  @media (max-width:430px){
    .tbadge{font-size:.64rem;padding:6px 9px}
    html:not([lang="en"]) .tbadge{font-size:.58rem;padding:5px 8px}
  }

  /* ===== Georgian/long-language trust badges: one line, shrink to fit ===== */
  .trust-badges{display:flex!important;flex-wrap:nowrap!important;overflow:visible!important;
    gap:6px;align-items:stretch}
  .tbadge{white-space:nowrap;flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
  html:not([lang="en"]) .tbadge{font-size:.62rem;padding:6px 9px;letter-spacing:-.01em}
  html[lang="ka"] .tbadge,html[lang="hy"] .tbadge{font-size:.56rem;padding:6px 8px}
  @media (max-width:900px){
    html:not([lang="en"]) .tbadge{font-size:.55rem;padding:5px 7px}
    html[lang="ka"] .tbadge,html[lang="hy"] .tbadge{font-size:.5rem;padding:5px 6px}
  }
  @media (max-width:600px){
    .trust-badges{flex-wrap:wrap!important}
    .tbadge{white-space:normal}
  }

  /* ============================================================
     SCORES — single authoritative accordion layout.

     Default / mobile (everything below the 1041px desktop
     breakpoint, which also covers phones whose browser falls back
     to a virtual desktop-width viewport when a page has no
     <meta name="viewport"> tag — that fallback is ~980px, safely
     under 1041): plain block flow, single column, panel expands
     in place, directly under its own card, in normal document
     flow. No position:absolute, no display:contents, no grid
     column-spanning tricks — those are what broke on real phones
     (either painting a blank box, since iOS Safari fails to
     repaint content revealed via [open] under `overflow:hidden`,
     or overlapping the next section, since an absolutely
     positioned panel doesn't push sibling content down on its
     own).

     Desktop only (>=1041px): 3-col grid, each <details> is a
     normal grid item in row 1; its opened panel breaks out into a
     full-width absolutely-positioned block underneath.
     ============================================================ */
  #scores .scores{display:flex!important;flex-direction:column;gap:16px}
  #scores details.score{display:block!important;background:var(--card);
    border-radius:var(--radius);box-shadow:var(--shadow);border:2px solid transparent;
    overflow:visible!important}
  #scores details.score[open]{border-color:var(--purple);box-shadow:0 12px 30px rgba(109,74,224,.20)}
  #scores .score-sum{background:none;box-shadow:none;border:0;height:auto}
  #scores summary::after{content:none!important;display:none!important}
  #scores .score-body{position:static;margin-top:0;border-radius:0;box-shadow:none;
    border-top:1px solid var(--bg)}
  #scores details.score[open] .score-body{display:block!important}
  #scores details.score:not([open]) .score-body{display:none!important}
  #scores details.score[open] .si-grid{grid-template-columns:1fr}

  @media (min-width:1041px){
    #scores .scores{display:grid!important;grid-template-columns:repeat(3,1fr)!important;
      gap:20px 24px!important;align-items:start!important;position:relative}
    #scores details.score{grid-row:1!important;height:100%}
    #scores details.score:nth-of-type(1){grid-column:1!important}
    #scores details.score:nth-of-type(2){grid-column:2!important}
    #scores details.score:nth-of-type(3){grid-column:3!important}
    #scores .score-sum{padding:30px 26px;height:100%}
    /* the panel breaks out of its card into a full-width row underneath */
    #scores .score-body{position:absolute;left:0;right:0;width:100%;margin-top:24px;
      border-radius:var(--radius);box-shadow:var(--shadow);border-top:none;z-index:5}
    #scores details.score[open] .si-grid{grid-template-columns:repeat(3,1fr)}
    /* keep following content clear of the absolutely-placed panel */
    #scores{padding-bottom:60px}
    .nojs #scores{padding-bottom:620px}
  }
  .nojs #scores .scores{margin-bottom:0}

  /* ===== centre the long Georgian/other intro paragraphs ===== */
  .sec-head p,.download-head p,.mission-text p,.sustain-text p,
  #about > .wrap > .sec-head p,.trust-text > p{text-align:center!important}
  html:not([lang="en"]) .sec-head p{text-align:center!important;text-justify:auto}