:root{
    --dusty:#8697A9; --dusty-l:#AEBBC9; --dusty-d:#6E8093; --deep:#586975;
    --ink:#1F262C; --white:#FFFFFF; --r:26px;
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html{scroll-behavior:smooth;overflow-x:hidden}
  body{
    font-family:'Montserrat',system-ui,sans-serif;color:var(--ink);line-height:1.6;
    background:linear-gradient(180deg,
      #B6C2CE 0%, #9DACBC 18%, var(--dusty) 42%,
      #7E90A3 66%, var(--dusty-d) 84%, var(--deep) 100%);
  }
  .canvas{max-width:1160px;margin:0 auto;padding:0 28px}

  /* chips + pills */
  .chip{display:inline-block;border:1.2px solid rgba(255,255,255,.75);color:#fff;border-radius:999px;
        font-size:11px;letter-spacing:.18em;text-transform:uppercase;padding:7px 16px;font-weight:500}
  .chip.dark{border-color:rgba(31,38,44,.4);color:var(--ink)}
  .pill{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;cursor:pointer;text-decoration:none;
        font-family:inherit;font-weight:600;letter-spacing:.1em;text-transform:uppercase;font-size:13px;
        padding:15px 30px;transition:background-color .18s ease,color .18s ease,transform .18s ease,border-color .18s ease;border:1.5px solid transparent}
  a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #fff;outline-offset:3px}
  .pill.fill{background:#fff;color:var(--deep)}
  .pill.fill:hover{background:#EDF1F5;transform:translateY(-1px)}
  .pill.line{background:transparent;color:#fff;border-color:rgba(255,255,255,.85)}
  .pill.line:hover{background:rgba(255,255,255,.14)}

  /* nav */
  .nav{position:fixed;top:0;left:0;right:0;z-index:60;display:flex;align-items:center;justify-content:space-between;padding:16px 28px}
  .logo{font-weight:700;letter-spacing:.34em;font-size:14px;color:#fff}
  .nav .pill{padding:10px 20px;font-size:11.5px}

  /* ============ HERO ============ */
  .hero{position:relative;min-height:104svh;display:flex;flex-direction:column;justify-content:center;padding-top:70px;overflow:hidden}
  .hero h1{color:#fff;font-weight:600;line-height:1.03;font-size:clamp(42px,6vw,88px);max-width:11ch}
  @media(min-width:921px){.hero .canvas>.sub,.hero .canvas>.cta-row,.hero .canvas>.chips{max-width:calc(100% - 450px)}}
  @media(min-width:1280px){.hero .float-card{right:-20px}}
  .hero .canvas>h1,.hero .canvas>.sub,.hero .canvas>.cta-row,.hero .canvas>.chips{position:relative;z-index:2}
  .hero .sub{color:rgba(255,255,255,.94);font-size:17px;max-width:52ch;margin-top:20px}
  .hero .cta-row{margin-top:30px;display:flex;gap:14px;flex-wrap:wrap}
  .hero .chips{margin-top:26px;display:flex;gap:10px;flex-wrap:wrap}

  /* floating product mini-card, overlapping hero like Rhode inset */
  .float-card{position:absolute;right:0;top:-16px;width:460px;z-index:1;text-align:center}
  .float-card img.box{width:100%;display:block}
  .float-card .spin{filter:drop-shadow(0 26px 46px rgba(24,36,50,.42))}
  .float-card .cap{display:inline-flex;margin-top:12px;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);
        border-radius:999px;padding:9px 18px;font-size:12px;font-weight:600;color:#2A333D}

  /* ============ LINEUP: cards floating on canvas ============ */
  .lineup{position:relative;padding:70px 0 30px}
  .lineup .head{color:#fff;display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:10px;margin-bottom:26px}
  .lineup h2{font-size:clamp(28px,3.4vw,48px);font-weight:700;letter-spacing:-.01em;text-transform:lowercase}
  .lineup .head .chip{align-self:center}
  .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
  .card{background:rgba(255,255,255,.92);backdrop-filter:blur(8px);border-radius:var(--r);padding:22px;
        box-shadow:0 24px 60px rgba(31,44,58,.22);transition:transform .2s ease}
  .card:hover{transform:translateY(-5px)}
  .card .im{height:230px;border-radius:18px;overflow:hidden;display:flex;align-items:center;justify-content:center;
        color:rgba(31,38,44,.4);font-size:10px;letter-spacing:.24em;text-transform:uppercase;text-align:center}
  .c1 .im{background:#CBD5DF}.c2 .im{background:#BFCBD8}.c3 .im{background:#D5Dce4}
  .card .t{font-size:24px;font-weight:700;text-transform:lowercase;margin-top:16px}
  .card .d{font-size:13px;color:#54606b;margin-top:6px}
  .card .chip{margin-top:14px}

  /* ============ STATEMENT: text directly on canvas ============ */
  .statement{padding:120px 0 88px;text-align:center;color:#fff}
  .statement h2{font-size:clamp(34px,5.2vw,74px);font-weight:700;line-height:1.04;letter-spacing:-.01em;text-transform:lowercase}
  .statement h2 .soft{color:#DCE4EB}
  .statement p{max-width:58ch;margin:14px auto 0;color:rgba(255,255,255,.9);font-size:15.5px}
  .statement .pill{margin-top:30px}

  /* ============ TONES: editorial strip (design B7, 06.09.2026) ============ */
  .tones{position:relative;padding:0 0 40px;color:#fff}
  .tones .cap{margin:0 0 0 auto;text-align:right;color:rgba(255,255,255,.8);font-size:14px}
  .tone-strip{margin-top:0;display:flex;gap:26px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
      -webkit-mask-image:linear-gradient(90deg,#000 88%,transparent 100%);mask-image:linear-gradient(90deg,#000 88%,transparent 100%);
      --edge:max(28px, calc((100vw - 1160px) / 2 + 28px));
      padding:0 var(--edge) 64px 0;scroll-padding-left:0;scrollbar-width:none;outline:none}
  .tone-strip::-webkit-scrollbar{display:none}
  .tone-strip:focus-visible{box-shadow:inset 0 0 0 2px rgba(255,255,255,.6)}
  .tcard{flex:0 0 auto;margin:0;position:relative;height:300px;aspect-ratio:var(--r);border-radius:26px;overflow:hidden;
      scroll-snap-align:start;background:var(--deep);box-shadow:0 18px 40px rgba(31,44,58,.22)}
  .tcard img{width:100%;height:100%;object-fit:cover;display:block}
  .tone-nav{position:relative;z-index:2;max-width:none;margin-top:-24px;padding-left:var(--edge);padding-right:40px;--edge:max(28px, calc((100vw - 1160px) / 2 + 28px));display:flex;gap:10px;align-items:center;flex-wrap:wrap}
  .tarr{width:44px;height:44px;border-radius:999px;border:1px solid rgba(255,255,255,.6);background:transparent;color:#fff;
      font-size:18px;line-height:1;cursor:pointer;font-family:inherit;transition:background .18s ease}
  .tarr:hover{background:rgba(255,255,255,.14)}
  .tarr:focus-visible{outline:2px solid #fff;outline-offset:3px}
  .tones .cap sup{font-size:.7em;margin-left:2px;opacity:.85}
  .footnote{padding:0 28px 18px;text-align:center}
  .footnote p{margin:0 auto;max-width:96ch;font-size:11px;line-height:1.55;color:rgba(255,255,255,.55)}
  footer .sep{opacity:.5;margin:0 4px}
  footer > span > a{text-decoration:underline;text-underline-offset:2px;color:rgba(255,255,255,.8)}
  @media(prefers-reduced-motion:reduce){.tone-strip{scroll-behavior:auto}}

  /* ============ FOUNDER: photo card overlapping text zone ============ */
  .founder{padding:76px 0 40px;display:grid;grid-template-columns:1fr 1.15fr;gap:54px;align-items:center;color:#fff}
  .founder .photo{border-radius:var(--r);overflow:hidden;
        box-shadow:0 24px 60px rgba(31,44,58,.25)}
  .founder .photo img{width:100%;height:auto;display:block}
  .founder h2{font-size:clamp(26px,3.2vw,46px);font-weight:700;text-transform:lowercase;letter-spacing:-.01em;line-height:1.1}
  .founder p{margin-top:18px;color:rgba(255,255,255,.92);font-size:15.5px;max-width:56ch}
  .founder .chip{margin-top:18px}

  /* ============ JOIN ============ */
  .join{padding:124px 0 60px;text-align:center;color:#fff}
  .join h2{font-size:clamp(32px,4.6vw,64px);font-weight:700;line-height:1.04;text-transform:lowercase;letter-spacing:-.01em}
  .join .perks{margin-top:8px;color:rgba(255,255,255,.88);font-size:14.5px}
  .form{margin:76px auto 0;max-width:760px}
  .form-row{display:flex;background:#fff;border-radius:999px;padding:6px;box-shadow:0 24px 60px rgba(31,44,58,.28)}
  .form-row input[type="email"]{flex:1;border:0;background:transparent;padding:14px 22px;font-size:15px;font-family:inherit}
  .form-row .pill{white-space:nowrap;flex:0 0 auto}
  .form .pill{background:var(--deep);color:#fff}
  .form .pill:hover{background:#46586A}
  .join .fine{margin-top:14px;color:rgba(255,255,255,.72);font-size:12px}
  .form .segsel{flex:0 1 300px;min-width:0;max-width:300px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;border:0;background:transparent;font-family:inherit;font-size:14px;
    font-weight:600;color:var(--deep);padding:14px 34px 14px 22px;cursor:pointer;
    -webkit-appearance:none;appearance:none;border-right:1px solid rgba(31,38,44,.12);
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'><path d='M1 1l4.5 4.5L10 1' fill='none' stroke='%23586975' stroke-width='1.6' stroke-linecap='round'/></svg>");
    background-repeat:no-repeat;background-position:right 16px center}
  .form .segsel:invalid{color:rgba(88,105,117,.62);font-weight:500}
  .form .segsel:focus-visible{outline:2px solid var(--deep);outline-offset:-2px;border-radius:999px}
  .form.err .form-row{box-shadow:0 0 0 2px #FFE0D8, 0 24px 60px rgba(31,44,58,.28)}
  .consent-row{display:flex;justify-content:center;align-items:flex-start;gap:8px;max-width:760px;margin:22px auto 0;
    padding:0 12px;text-align:left;color:rgba(255,255,255,.7);font-size:11px;line-height:1.5;letter-spacing:.005em;cursor:pointer}
  .consent-row span{flex:0 1 auto}
  .consent-row input{flex:0 0 auto;appearance:none;-webkit-appearance:none;width:14px;height:14px;margin:1px 0 0;
    border:1.5px solid rgba(255,255,255,.7);border-radius:4px;background:transparent;cursor:pointer;
    transition:background .15s ease,border-color .15s ease}
  .consent-row:hover input{border-color:#fff}
  .consent-row input:checked{background:#fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M2.5 6.2l2.3 2.3 4.7-4.9' fill='none' stroke='%23586975' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/10px no-repeat;border-color:#fff}
  .consent-row input:focus-visible{outline:2px solid #fff;outline-offset:2px}

  /* ============ WORDMARK / FOOTER on deep zone ============ */
  .wordmark{padding:120px 24px 30px;text-align:center;color:#fff}
  .wordmark{padding:90px 24px 24px}
  .wordmark .wm{line-height:1}
  .wordmark .tag{font-size:10.5px;letter-spacing:.34em;text-transform:uppercase;margin-top:16px;margin-bottom:34px;color:rgba(255,255,255,.6)}
  footer{display:flex;justify-content:space-between;align-items:center;padding:24px 28px;font-size:12px;color:rgba(255,255,255,.65)}
  footer a{color:#fff;text-decoration:none}
  footer a:hover{opacity:.75}
  footer .social{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:center}
  footer .social a{display:inline-flex;align-items:center;gap:6px}
  footer .social .sep{opacity:.5}
  footer svg.ig{width:14px;height:14px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;opacity:.9}
  footer svg.ig .dot{fill:currentColor;stroke:none}
  footer a.legal{color:rgba(255,255,255,.82);border-bottom:1px solid rgba(255,255,255,.32);padding-bottom:1px}
  footer a.legal:hover{color:#fff;border-bottom-color:rgba(255,255,255,.7);opacity:1}

  /* --- privacy policy modal --- */
  .join .fine a{color:rgba(255,255,255,.9);border-bottom:1px solid rgba(255,255,255,.4);padding-bottom:1px;text-decoration:none}
  .join .fine a:hover{color:#fff;border-bottom-color:#fff}
      .form .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}
      .join .formmsg{margin-top:16px;font-size:15px;color:#fff;min-height:21px;opacity:0;transition:opacity .3s ease}
      .join .formmsg.show{opacity:1}
      .join .formmsg.err{color:#FFE0D8}
      .join .formmsg.done{margin-top:76px;font-size:clamp(17px,2vw,21px);font-weight:600}
      .form.busy .form-row{opacity:.8}
      .form .pill[disabled]{cursor:default}
  .modal .pbody strong{color:var(--ink);font-weight:600}
  .modal{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;padding:24px}
  .modal[open]{display:flex}
  .modal .veil{position:absolute;inset:0;background:rgba(24,36,50,.58);backdrop-filter:blur(3px)}
  .modal .panel{position:relative;background:#fff;color:var(--ink);border-radius:var(--r);
    width:min(720px,100%);max-height:min(84vh,860px);display:flex;flex-direction:column;
    box-shadow:0 30px 70px rgba(24,36,50,.32);animation:mIn .28s cubic-bezier(.22,.7,.3,1)}
  @keyframes mIn{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
  @media(prefers-reduced-motion:reduce){.modal .panel{animation:none}}
  .modal .phead{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
    padding:28px 30px 14px;border-bottom:1px solid rgba(31,38,44,.10)}
  .modal .phead h3{margin:0;font-size:22px;letter-spacing:-.01em;font-weight:600;color:var(--ink)}
  .modal .phead .eff{margin:6px 0 0;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
    color:rgba(31,38,44,.45)}
  .modal .x{flex:0 0 auto;width:34px;height:34px;border-radius:999px;border:1px solid rgba(31,38,44,.16);
    background:none;color:var(--ink);cursor:pointer;font-size:17px;line-height:1;display:flex;
    align-items:center;justify-content:center;transition:background-color .18s ease,border-color .18s ease}
  .modal .x:hover{background:rgba(31,38,44,.06);border-color:rgba(31,38,44,.3)}
  .modal .pbody{overflow-y:auto;padding:22px 30px 30px;-webkit-overflow-scrolling:touch}
  .modal .pbody h4{margin:22px 0 7px;font-size:12px;letter-spacing:.15em;text-transform:uppercase;
    font-weight:600;color:var(--dusty-d)}
  .modal .pbody h4:first-child{margin-top:0}
  .modal .pbody p{margin:0 0 10px;font-size:14.5px;line-height:1.62;color:rgba(31,38,44,.82)}
  .modal .pbody a{color:var(--dusty-d)}
  .modal .pbody .todo{background:rgba(134,151,169,.12);border-radius:2px;padding:1px 5px;
    color:var(--dusty-d);font-weight:600}
  @media(max-width:560px){
    .modal{padding:0}
    .modal .panel{border-radius:0;width:100%;max-height:100vh;height:100%}
    .modal .phead{padding:22px 20px 12px}
    .modal .pbody{padding:18px 20px 34px}
  }

  @media(max-width:920px){
    .cards{grid-template-columns:1fr}
    .tone-strip{gap:12px;padding-bottom:48px}
    .tone-nav{margin-top:-16px;padding-right:28px}
    .tones .cap{flex:0 0 100%;text-align:left;margin-top:10px}
    .tcard{height:clamp(200px,60vw,300px);border-radius:20px}
    .founder{grid-template-columns:1fr;gap:26px}
    .float-card{position:static;width:100%;margin-top:34px}
    .lineup{padding-top:80px}
    .form-row{border-radius:30px;flex-direction:column;padding:10px}
    .form .segsel{width:100%;max-width:none;flex-basis:auto;border-right:0;border-bottom:1px solid rgba(31,38,44,.12);
      background-position:right 20px center;text-align:left}
    .form .pill{width:100%}
    .sigrow{gap:24px;flex-wrap:wrap}
    .signature{transform:none}
    footer{flex-direction:column;gap:8px}
  }

  /* prototype animation: entrance, float, parallax */
  @keyframes boxIn{0%{opacity:0;transform:translateY(90px) rotate(-16deg) scale(.88)}
                   60%{opacity:1;transform:translateY(-10px) rotate(2.5deg) scale(1.02)}
                   82%{transform:translateY(4px) rotate(-.8deg) scale(.995)}
                   100%{opacity:1;transform:translateY(0) rotate(0deg) scale(1)}}
  @keyframes boxFloat{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-14px) rotate(1.6deg)}}
  .float-card img.box{animation:boxIn 1.5s cubic-bezier(.2,.75,.25,1) .35s backwards, boxFloat 6.5s ease-in-out 1.85s infinite}
  @keyframes riseIn{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
  .hero .canvas>h1{animation:riseIn .9s cubic-bezier(.22,.7,.3,1) .05s backwards}
  .hero .canvas>.sub{animation:riseIn .9s cubic-bezier(.22,.7,.3,1) .3s backwards}
  .hero .canvas>.cta-row{animation:riseIn .9s cubic-bezier(.22,.7,.3,1) .5s backwards}
  .float-card>div:last-child{animation:riseIn .7s ease-out 1.5s backwards}
  @media (prefers-reduced-motion: reduce){.hero .canvas>h1,.hero .canvas>.sub,.hero .canvas>.cta-row,.float-card>div:last-child{animation:none}}
  .float-card .spin{will-change:transform}
  @keyframes boxShadow{0%,100%{filter:drop-shadow(0 26px 46px rgba(24,36,50,.42))}
                       50%{filter:drop-shadow(0 34px 54px rgba(24,36,50,.32))}}
  .float-card .spin{animation:boxShadow 10s ease-in-out 1.3s infinite}
  @media (prefers-reduced-motion: reduce){.float-card .spin{animation:none}}
  @media (prefers-reduced-motion: reduce){.float-card img.box{animation:none}}

.signature{margin-top:0;text-align:left;transform:translateY(-14px)}
.sigrow{margin-top:22px;display:flex;align-items:center;justify-content:flex-start;gap:110px}
.signature .xo{width:58px;height:auto;display:block;opacity:.95;margin:0 0 0 3px}
.signature .nm{width:120px;height:auto;display:block;opacity:1}
.signature .xotext{font-size:16px;color:rgba(255,255,255,.92);margin:0 0 2px 2px;letter-spacing:.01em}
.founder .sigrow .chip{margin-top:0;opacity:.8;flex:0 0 auto;transform:translateY(6px)}