:root{
    --void:#060809;
    --panel:#0c1114;
    --panel-2:#10171a;
    --line: rgba(120,235,242,0.14);
    --line-strong: rgba(120,235,242,0.32);
    --ink:#eaf6f6;
    --ink-dim:#8fa5a8;
    --ink-faint:#5c7477;
    --cyan:#2de1ec;
    --cyan-soft:#8ff5fb;
    --cyan-deep:#0a3d44;
  }
  *{margin:0;padding:0;box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    background:var(--void);
    color:var(--ink);
    font-family:'Inter',sans-serif;
    overflow-x:hidden;
    position:relative;
  }
  ::selection{ background:var(--cyan); color:#04181a; }

  /* grain overlay */
  body::before{
    content:"";
    position:fixed;
    inset:0;
    z-index:999;
    pointer-events:none;
    opacity:0.05;
    mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }

  a{color:inherit; text-decoration:none;}

  .mono{ font-family:'IBM Plex Mono', monospace; }

  /* ---------- layout shell ---------- */
  .shell{
    max-width:1280px;
    margin:0 auto;
    padding:0 clamp(20px, 5vw, 72px);
  }

  /* ---------- gallery-directory nav (right edge) ---------- */
  .directory{
    position:fixed;
    right:clamp(10px, 2.5vw, 28px);
    top:50%;
    transform:translateY(-50%);
    z-index:100;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:26px;
  }
  .directory .rail{
    position:relative;
    width:1px;
    height:100%;
  }
  .directory-list{
    display:flex;
    flex-direction:column;
    gap:16px;
    position:relative;
    padding-left:2px;
  }
  .directory-list::before{
    content:"";
    position:absolute;
    left:-14px;
    top:0;
    bottom:0;
    width:1px;
    background:var(--line);
  }
  .dot{
    position:absolute;
    left:-17px;
    width:7px; height:7px;
    border-radius:50%;
    background:var(--cyan);
    box-shadow:0 0 10px 1px rgba(45,225,236,0.7);
    transition:top .45s cubic-bezier(.65,0,.35,1);
    top:0;
  }
  .directory-item{
    font-family:'IBM Plex Mono', monospace;
    font-size:10.5px;
    letter-spacing:0.14em;
    color:var(--ink-faint);
    writing-mode:vertical-rl;
    transform:rotate(180deg);
    cursor:pointer;
    display:flex;
    align-items:center;
    gap:8px;
    transition:color .3s ease;
    text-transform:uppercase;
    padding:2px 0;
  }
  .directory-item .num{ color:var(--ink-faint); transition:color .3s ease; }
  .directory-item:hover, .directory-item.is-active{ color:var(--cyan-soft); }
  .directory-item.is-active .num{ color:var(--cyan); }

  @media (max-width: 860px){
    .directory{ display:none; }
  }

  /* ---------- hero ---------- */
  .hero{
    display:flex;
    flex-direction:column;
    justify-content:center;
    position:relative;
    padding:70px 0 90px;
  }
  .hero-topline{
    position:fixed;
    top:0; left:0; right:0;
    z-index:200;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:18px clamp(20px, 5vw, 72px);
    background:rgba(6,8,9,0.7);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    border-bottom:1px solid var(--line);
    opacity:0;
    transform:translateY(-16px);
    pointer-events:none;
    transition:opacity .4s ease, transform .4s ease;
  }
  .hero-topline.is-visible{
    opacity:1;
    transform:translateY(0);
    pointer-events:auto;
  }
  .brandmark-small{
    font-family:'IBM Plex Mono', monospace;
    font-size:11px;
    letter-spacing:0.16em;
    color:var(--ink-dim);
    text-transform:uppercase;
  }
  .brandmark-small span{ color:var(--cyan); }
  .issue-tag{
    font-family:'IBM Plex Mono', monospace;
    font-size:11px;
    letter-spacing:0.1em;
    color:var(--ink-faint);
    border:1px solid var(--line);
    padding:5px 10px;
    border-radius:100px;
  }

  .wordmark{
    font-size:clamp(52px, 10.5vw, 148px);
    line-height:0.9;
    display:flex;
    align-items:baseline;
    flex-wrap:wrap;
    gap:0.22em;
    opacity:0;
    animation:rise 1s .1s cubic-bezier(.16,1,.3,1) forwards;
  }
  .wordmark .black{
    font-family:'Anton', sans-serif;
    font-weight:400;
    text-transform:uppercase;
    color:var(--ink);
    letter-spacing:0.001em;
  }
  .wordmark .cyan{
    font-family:'Bodoni Moda', serif;
    font-size:1.12em;
    color:var(--cyan);
    font-style:normal;
    font-weight:600;
    letter-spacing:0.005em;
  }

  /* fixed-width rotating connector */
  .connector{
    position:relative;
    display:inline-flex;
    width:2.1em;         /* fixed width slot — widest word ("and") sets this */
    height:1em;
    justify-content:center;
    align-items:center;
    vertical-align:baseline;
    top:0.04em;
    font-size:0.6em;
  }
  .connector span{
    position:absolute;
    left:0; right:0;
    text-align:center;
    font-family:'Bodoni Moda', serif;
    color:var(--cyan);
    font-style:normal;
    font-weight:600;
    letter-spacing:0.01em;
    opacity:0;
    transform:translateY(10px);
    animation:swap 8s infinite;
  }
  .connector span:nth-child(1){ animation-delay:0s; }
  .connector span:nth-child(2){ animation-delay:2s; }
  .connector span:nth-child(3){ animation-delay:4s; }
  .connector span:nth-child(4){ animation-delay:6s; }

  @keyframes swap{
    0%{ opacity:0; transform:translateY(8px); }
    4%{ opacity:1; transform:translateY(0); }
    20%{ opacity:1; transform:translateY(0); }
    25%{ opacity:0; transform:translateY(-8px); }
    100%{ opacity:0; }
  }

  .hero-sub{
    max-width:560px;
    margin-top:30px;
    font-size:17px;
    line-height:1.65;
    color:var(--ink-dim);
    opacity:0;
    animation:rise .9s .38s cubic-bezier(.16,1,.3,1) forwards;
  }
  .hero-sub b{ color:var(--ink); font-weight:500; }

  .hero-actions{
    display:flex;
    align-items:center;
    gap:28px;
    margin-top:44px;
    flex-wrap:wrap;
    opacity:0;
    animation:rise .9s .5s cubic-bezier(.16,1,.3,1) forwards;
  }
  .btn-primary{
    display:inline-flex;
    align-items:center;
    gap:10px;
    background:var(--cyan);
    color:#04181a;
    font-family:'IBM Plex Mono', monospace;
    font-size:13px;
    font-weight:500;
    letter-spacing:0.04em;
    padding:14px 22px;
    border-radius:2px;
    cursor:pointer;
    border:none;
    transition:transform .25s ease, box-shadow .25s ease;
  }
  .btn-primary:hover{ transform:translateY(-2px); box-shadow:0 10px 30px -8px rgba(45,225,236,0.5); }
  .btn-primary svg{ transition:transform .25s ease; }
  .btn-primary:hover svg{ transform:translateX(4px); }

  .hero-stat{
    font-family:'IBM Plex Mono', monospace;
    font-size:12px;
    color:var(--ink-faint);
    letter-spacing:0.04em;
  }
  .hero-stat b{ color:var(--cyan-soft); font-weight:500; }

  @keyframes rise{
    from{ opacity:0; transform:translateY(18px); }
    to{ opacity:1; transform:translateY(0); }
  }

  /* ---------- section heading ---------- */
  .section-head{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    gap:24px;
    padding-top:120px;
    padding-bottom:44px;
    border-top:1px solid var(--line);
    margin-top:20px;
  }
  .section-head .label{
    font-family:'IBM Plex Mono', monospace;
    font-size:11px;
    letter-spacing:0.18em;
    text-transform:uppercase;
    color:var(--cyan-soft);
    margin-top:22px;
  }
  .section-head h2{
    font-family:'Fraunces', serif;
    font-weight:400;
    font-size:clamp(30px, 4vw, 46px);
    line-height:1.1;
    max-width:640px;
  }
  .section-head p{
    max-width:280px;
    color:var(--ink-dim);
    font-size:14px;
    line-height:1.6;
    padding-bottom:2px;
  }

  /* ---------- bento grid ---------- */
  .bento-wrap{
    width:100%;
    padding:0 clamp(20px, 3.5vw, 56px);
    padding-bottom:130px;
  }
  .bento{
    display:grid;
    grid-template-columns:repeat(6, 1fr);
    grid-auto-rows:170px;
    grid-auto-flow:dense;
    gap:14px;
  }
  .card{
    position:relative;
    border:1px solid var(--line);
    background:var(--panel);
    border-radius:4px;
    overflow:hidden;
    padding:22px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    cursor:pointer;
    opacity:0;
    transform:translateY(24px);
    transition:transform .5s cubic-bezier(.16,1,.3,1), border-color .35s ease, background .35s ease;
  }
  .card.in-view{ opacity:1; transform:translateY(0); }
  .card:hover{
    border-color:var(--line-strong);
    background:var(--panel-2);
  }
  .card:hover .texture{ transform:scale(1.06); opacity:.9; }
  .card:hover .arrow{ transform:translate(3px,-3px); opacity:1; }

  .card .texture{
    position:absolute; inset:0;
    z-index:0;
    opacity:.7;
    transition:transform .8s cubic-bezier(.16,1,.3,1), opacity .5s ease;
  }
  .card .content{ position:relative; z-index:2; }
  .card .top-row{
    display:flex; justify-content:space-between; align-items:flex-start;
    position:relative; z-index:2;
  }
  .card .kicker{
    font-family:'IBM Plex Mono', monospace;
    font-size:10px;
    letter-spacing:0.12em;
    text-transform:uppercase;
    color:var(--ink-faint);
  }
  .card .arrow{
    opacity:0;
    transform:translate(0,0);
    transition:transform .3s ease, opacity .3s ease;
    color:var(--cyan);
  }
  .card h3{
    font-family:'Fraunces', serif;
    font-weight:400;
    font-style:italic;
    color:var(--ink);
    line-height:1.15;
  }
  .card .desc{
    font-size:12.5px;
    color:var(--ink-dim);
    margin-top:6px;
    line-height:1.5;
    max-width:32ch;
  }

  .c-1{ grid-column:span 3; grid-row:span 2; }
  .c-2{ grid-column:span 2; grid-row:span 1; }
  .c-3{ grid-column:span 1; grid-row:span 1; }
  .c-4{ grid-column:span 3; grid-row:span 1; }
  .c-5{ grid-column:span 1; grid-row:span 1; }
  .c-6{ grid-column:span 2; grid-row:span 1; }
  .c-7{ grid-column:span 2; grid-row:span 2; }
  .c-8{ grid-column:span 1; grid-row:span 1; }
  .c-9{ grid-column:1 / -1; grid-row:span 1; }

  .c-1 h3{ font-size:clamp(26px,2.6vw,38px); }
  .c-4 h3{ font-size:24px; }

  /* card texture variants */
  .tex-field{
    background:
      radial-gradient(circle at 25% 20%, rgba(45,225,236,0.35), transparent 45%),
      radial-gradient(circle at 80% 75%, rgba(45,225,236,0.18), transparent 50%),
      linear-gradient(150deg, #0a1315, #050708 70%);
  }
  .tex-halftone{
    background-image: radial-gradient(rgba(45,225,236,0.5) 1px, transparent 1.4px);
    background-size:9px 9px;
    background-position:0 0;
    -webkit-mask-image:radial-gradient(circle at 75% 25%, black, transparent 65%);
    mask-image:radial-gradient(circle at 75% 25%, black, transparent 65%);
  }
  .tex-grid{
    background-image:
      linear-gradient(var(--line) 1px, transparent 1px),
      linear-gradient(90deg, var(--line) 1px, transparent 1px);
    background-size:14px 14px;
    -webkit-mask-image:linear-gradient(to bottom, black, transparent 85%);
    mask-image:linear-gradient(to bottom, black, transparent 85%);
  }
  .tex-spectrum{
    background:linear-gradient(90deg, #0a3d44, var(--cyan) 45%, #8ff5fb 65%, #0a3d44);
    opacity:.22 !important;
  }
  .tex-scratch{
    background:
      repeating-linear-gradient(115deg, rgba(45,225,236,0.12) 0 1px, transparent 1px 9px),
      linear-gradient(180deg, #0a1315, #050708);
  }
  .tex-orbit{
    background:
      radial-gradient(circle at 50% 50%, transparent 38%, rgba(45,225,236,0.18) 39%, transparent 40%),
      radial-gradient(circle at 50% 50%, transparent 55%, rgba(45,225,236,0.1) 56%, transparent 57%),
      radial-gradient(circle at 30% 30%, rgba(45,225,236,0.25), transparent 40%),
      #050708;
  }
  .tex-void{
    background:
      radial-gradient(circle at 60% 40%, rgba(45,225,236,0.22), transparent 55%),
      #050708;
  }

  .card-submit{
    background:linear-gradient(100deg, var(--cyan-deep), #061013 65%);
    border-color:var(--line-strong);
    position:relative;
  }
  .card-submit .submit-kicker{
    position:absolute;
    top:22px; left:34px;
    z-index:2;
    display:flex;
    align-items:center;
    gap:8px;
  }
  .card-submit .submit-inner{
    position:relative;
    z-index:2;
    width:100%;
    height:100%;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
  }
  .card-submit .submit-main{ display:flex; align-items:baseline; gap:18px; flex-wrap:wrap; }
  .card-submit h3{ color:var(--cyan-soft); font-style:normal; font-weight:500; font-size:26px; }
  .card-submit .desc{ color:rgba(234,246,246,0.65); margin-top:0; max-width:46ch; }
  .submit-arrow{
    opacity:.55 !important;
    font-size:26px;
    flex-shrink:0;
  }
  .card-submit:hover .submit-arrow{ opacity:1 !important; transform:translate(4px,-4px); }
  .pulse-dot{
    width:7px; height:7px; border-radius:50%;
    background:var(--cyan);
    box-shadow:0 0 0 0 rgba(45,225,236,.6);
    animation:pulse 2s infinite;
    display:inline-block;
  }
  @keyframes pulse{
    0%{ box-shadow:0 0 0 0 rgba(45,225,236,.55); }
    70%{ box-shadow:0 0 0 9px rgba(45,225,236,0); }
    100%{ box-shadow:0 0 0 0 rgba(45,225,236,0); }
  }

  @media (min-width:861px){
    .bento-wrap{ padding-right:clamp(70px, 7vw, 110px); }
  }
  @media (max-width:900px){
    .bento{ grid-template-columns:repeat(2,1fr); grid-auto-rows:140px; }
    .c-1{ grid-column:span 2; grid-row:span 2; }
    .c-2, .c-4, .c-6, .c-7{ grid-column:span 2; }
    .c-7{ grid-row:span 2; grid-column:span 1; }
    .c-9{ grid-column:1 / -1; }
  }
  @media (max-width:560px){
    .bento{ grid-template-columns:1fr; grid-auto-rows:130px; }
    .c-1, .c-2, .c-4, .c-6, .c-7{ grid-column:span 1; }
    .c-1{ grid-row:span 2; height:auto; min-height:260px;}
    .c-7{ grid-row:span 2; }
    .c-9{ grid-column:1 / -1; height:auto; min-height:150px; }
    .card-submit .submit-inner{ flex-direction:column; align-items:flex-start; padding:34px 0 20px; gap:14px; }
    .card-submit .submit-kicker{ position:static; margin-bottom:4px; }
    .section-head{ flex-direction:column; align-items:flex-start; }
    .section-head p{ max-width:none; }
  }

  /* ---------- footer ---------- */
  footer{
    border-top:1px solid var(--line);
    padding:52px 0 40px;
  }
  .footer-grid{
    display:flex;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:30px;
  }
  .footer-brand{
    font-family:'Fraunces', serif;
    font-style:italic;
    font-size:20px;
    color:var(--ink);
  }
  .footer-brand span{ color:var(--cyan); }
  .footer-meta{
    font-family:'IBM Plex Mono', monospace;
    font-size:11px;
    color:var(--ink-faint);
    margin-top:10px;
    letter-spacing:0.04em;
  }
  .footer-links{
    display:flex;
    gap:34px;
    flex-wrap:wrap;
  }
  .footer-links .col h4{
    font-family:'IBM Plex Mono', monospace;
    font-size:10px;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--ink-faint);
    margin-bottom:12px;
  }
  .footer-links .col a{
    display:block;
    font-size:13.5px;
    color:var(--ink-dim);
    margin-bottom:9px;
    transition:color .25s ease;
  }
  .footer-links .col a:hover{ color:var(--cyan-soft); }

  .back-top{
    margin-top:46px;
    padding-top:20px;
    border-top:1px solid var(--line);
    display:flex;
    justify-content:space-between;
    align-items:center;
    font-family:'IBM Plex Mono', monospace;
    font-size:10.5px;
    color:var(--ink-faint);
    letter-spacing:0.08em;
    text-transform:uppercase;
  }
  .back-top a{ cursor:pointer; transition:color .25s ease; }
  .back-top a:hover{ color:var(--cyan-soft); }

  @media (prefers-reduced-motion: reduce){
    *{ animation:none !important; transition:none !important; }
  }:root{
    --void:#060809;
    --panel:#0c1114;
    --panel-2:#10171a;
    --line: rgba(120,235,242,0.14);
    --line-strong: rgba(120,235,242,0.32);
    --ink:#eaf6f6;
    --ink-dim:#8fa5a8;
    --ink-faint:#5c7477;
    --cyan:#2de1ec;
    --cyan-soft:#8ff5fb;
    --cyan-deep:#0a3d44;
  }
  *{margin:0;padding:0;box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    background:var(--void);
    color:var(--ink);
    font-family:'Inter',sans-serif;
    overflow-x:hidden;
    position:relative;
  }
  ::selection{ background:var(--cyan); color:#04181a; }

  /* grain overlay */
  body::before{
    content:"";
    position:fixed;
    inset:0;
    z-index:999;
    pointer-events:none;
    opacity:0.05;
    mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }

  a{color:inherit; text-decoration:none;}

  .mono{ font-family:'IBM Plex Mono', monospace; }

  /* ---------- layout shell ---------- */
  .shell{
    max-width:1280px;
    margin:0 auto;
    padding:0 clamp(20px, 5vw, 72px);
  }

  /* ---------- gallery-directory nav (right edge) ---------- */
  .directory{
    position:fixed;
    right:clamp(10px, 2.5vw, 28px);
    top:50%;
    transform:translateY(-50%);
    z-index:100;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:26px;
  }
  .directory .rail{
    position:relative;
    width:1px;
    height:100%;
  }
  .directory-list{
    display:flex;
    flex-direction:column;
    gap:16px;
    position:relative;
    padding-left:2px;
  }
  .directory-list::before{
    content:"";
    position:absolute;
    left:-14px;
    top:0;
    bottom:0;
    width:1px;
    background:var(--line);
  }
  .dot{
    position:absolute;
    left:-17px;
    width:7px; height:7px;
    border-radius:50%;
    background:var(--cyan);
    box-shadow:0 0 10px 1px rgba(45,225,236,0.7);
    transition:top .45s cubic-bezier(.65,0,.35,1);
    top:0;
  }
  .directory-item{
    font-family:'IBM Plex Mono', monospace;
    font-size:10.5px;
    letter-spacing:0.14em;
    color:var(--ink-faint);
    writing-mode:vertical-rl;
    transform:rotate(180deg);
    cursor:pointer;
    display:flex;
    align-items:center;
    gap:8px;
    transition:color .3s ease;
    text-transform:uppercase;
    padding:2px 0;
  }
  .directory-item .num{ color:var(--ink-faint); transition:color .3s ease; }
  .directory-item:hover, .directory-item.is-active{ color:var(--cyan-soft); }
  .directory-item.is-active .num{ color:var(--cyan); }

  @media (max-width: 860px){
    .directory{ display:none; }
  }

  /* ---------- hero ---------- */
  .hero{
    display:flex;
    flex-direction:column;
    justify-content:center;
    position:relative;
    padding:70px 0 90px;
  }
  .hero-topline{
    position:fixed;
    top:0; left:0; right:0;
    z-index:200;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:18px clamp(20px, 5vw, 72px);
    background:rgba(6,8,9,0.7);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    border-bottom:1px solid var(--line);
    opacity:0;
    transform:translateY(-16px);
    pointer-events:none;
    transition:opacity .4s ease, transform .4s ease;
  }
  .hero-topline.is-visible{
    opacity:1;
    transform:translateY(0);
    pointer-events:auto;
  }
  .brandmark-small{
    font-family:'IBM Plex Mono', monospace;
    font-size:11px;
    letter-spacing:0.16em;
    color:var(--ink-dim);
    text-transform:uppercase;
  }
  .brandmark-small span{ color:var(--cyan); }
  .issue-tag{
    font-family:'IBM Plex Mono', monospace;
    font-size:11px;
    letter-spacing:0.1em;
    color:var(--ink-faint);
    border:1px solid var(--line);
    padding:5px 10px;
    border-radius:100px;
  }

  .wordmark{
    font-size:clamp(52px, 10.5vw, 148px);
    line-height:0.9;
    display:flex;
    align-items:baseline;
    flex-wrap:wrap;
    gap:0.22em;
    opacity:0;
    animation:rise 1s .1s cubic-bezier(.16,1,.3,1) forwards;
  }
  .wordmark .black{
    font-family:'Anton', sans-serif;
    font-weight:400;
    text-transform:uppercase;
    color:var(--ink);
    letter-spacing:0.001em;
  }
  .wordmark .cyan{
    font-family:'Bodoni Moda', serif;
    font-size:1.12em;
    color:var(--cyan);
    font-style:normal;
    font-weight:600;
    letter-spacing:0.005em;
  }

  /* fixed-width rotating connector */
  .connector{
    position:relative;
    display:inline-flex;
    width:2.1em;         /* fixed width slot — widest word ("and") sets this */
    height:1em;
    justify-content:center;
    align-items:center;
    vertical-align:baseline;
    top:0.04em;
    font-size:0.6em;
  }
  .connector span{
    position:absolute;
    left:0; right:0;
    text-align:center;
    font-family:'Bodoni Moda', serif;
    color:var(--cyan);
    font-style:normal;
    font-weight:600;
    letter-spacing:0.01em;
    opacity:0;
    transform:translateY(10px);
    animation:swap 8s infinite;
  }
  .connector span:nth-child(1){ animation-delay:0s; }
  .connector span:nth-child(2){ animation-delay:2s; }
  .connector span:nth-child(3){ animation-delay:4s; }
  .connector span:nth-child(4){ animation-delay:6s; }

  @keyframes swap{
    0%{ opacity:0; transform:translateY(8px); }
    4%{ opacity:1; transform:translateY(0); }
    20%{ opacity:1; transform:translateY(0); }
    25%{ opacity:0; transform:translateY(-8px); }
    100%{ opacity:0; }
  }

  .hero-sub{
    max-width:560px;
    margin-top:30px;
    font-size:17px;
    line-height:1.65;
    color:var(--ink-dim);
    opacity:0;
    animation:rise .9s .38s cubic-bezier(.16,1,.3,1) forwards;
  }
  .hero-sub b{ color:var(--ink); font-weight:500; }

  .hero-actions{
    display:flex;
    align-items:center;
    gap:28px;
    margin-top:44px;
    flex-wrap:wrap;
    opacity:0;
    animation:rise .9s .5s cubic-bezier(.16,1,.3,1) forwards;
  }
  .btn-primary{
    display:inline-flex;
    align-items:center;
    gap:10px;
    background:var(--cyan);
    color:#04181a;
    font-family:'IBM Plex Mono', monospace;
    font-size:13px;
    font-weight:500;
    letter-spacing:0.04em;
    padding:14px 22px;
    border-radius:2px;
    cursor:pointer;
    border:none;
    transition:transform .25s ease, box-shadow .25s ease;
  }
  .btn-primary:hover{ transform:translateY(-2px); box-shadow:0 10px 30px -8px rgba(45,225,236,0.5); }
  .btn-primary svg{ transition:transform .25s ease; }
  .btn-primary:hover svg{ transform:translateX(4px); }

  .hero-stat{
    font-family:'IBM Plex Mono', monospace;
    font-size:12px;
    color:var(--ink-faint);
    letter-spacing:0.04em;
  }
  .hero-stat b{ color:var(--cyan-soft); font-weight:500; }

  @keyframes rise{
    from{ opacity:0; transform:translateY(18px); }
    to{ opacity:1; transform:translateY(0); }
  }

  /* ---------- section heading ---------- */
  .section-head{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    gap:24px;
    padding-top:120px;
    padding-bottom:44px;
    border-top:1px solid var(--line);
    margin-top:20px;
  }
  .section-head .label{
    font-family:'IBM Plex Mono', monospace;
    font-size:11px;
    letter-spacing:0.18em;
    text-transform:uppercase;
    color:var(--cyan-soft);
    margin-top:22px;
  }
  .section-head h2{
    font-family:'Fraunces', serif;
    font-weight:400;
    font-size:clamp(30px, 4vw, 46px);
    line-height:1.1;
    max-width:640px;
  }
  .section-head p{
    max-width:280px;
    color:var(--ink-dim);
    font-size:14px;
    line-height:1.6;
    padding-bottom:2px;
  }

  /* ---------- bento grid ---------- */
  .bento-wrap{
    width:100%;
    padding:0 clamp(20px, 3.5vw, 56px);
    padding-bottom:130px;
  }
  .bento{
    display:grid;
    grid-template-columns:repeat(6, 1fr);
    grid-auto-rows:170px;
    grid-auto-flow:dense;
    gap:14px;
  }
  .card{
    position:relative;
    border:1px solid var(--line);
    background:var(--panel);
    border-radius:4px;
    overflow:hidden;
    padding:22px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    cursor:pointer;
    opacity:0;
    transform:translateY(24px);
    transition:transform .5s cubic-bezier(.16,1,.3,1), border-color .35s ease, background .35s ease;
  }
  .card.in-view{ opacity:1; transform:translateY(0); }
  .card:hover{
    border-color:var(--line-strong);
    background:var(--panel-2);
  }
  .card:hover .texture{ transform:scale(1.06); opacity:.9; }
  .card:hover .arrow{ transform:translate(3px,-3px); opacity:1; }

  .card .texture{
    position:absolute; inset:0;
    z-index:0;
    opacity:.7;
    transition:transform .8s cubic-bezier(.16,1,.3,1), opacity .5s ease;
  }
  .card .content{ position:relative; z-index:2; }
  .card .top-row{
    display:flex; justify-content:space-between; align-items:flex-start;
    position:relative; z-index:2;
  }
  .card .kicker{
    font-family:'IBM Plex Mono', monospace;
    font-size:10px;
    letter-spacing:0.12em;
    text-transform:uppercase;
    color:var(--ink-faint);
  }
  .card .arrow{
    opacity:0;
    transform:translate(0,0);
    transition:transform .3s ease, opacity .3s ease;
    color:var(--cyan);
  }
  .card h3{
    font-family:'Fraunces', serif;
    font-weight:400;
    font-style:italic;
    color:var(--ink);
    line-height:1.15;
  }
  .card .desc{
    font-size:12.5px;
    color:var(--ink-dim);
    margin-top:6px;
    line-height:1.5;
    max-width:32ch;
  }

  .c-1{ grid-column:span 3; grid-row:span 2; }
  .c-2{ grid-column:span 2; grid-row:span 1; }
  .c-3{ grid-column:span 1; grid-row:span 1; }
  .c-4{ grid-column:span 3; grid-row:span 1; }
  .c-5{ grid-column:span 1; grid-row:span 1; }
  .c-6{ grid-column:span 2; grid-row:span 1; }
  .c-7{ grid-column:span 2; grid-row:span 2; }
  .c-8{ grid-column:span 1; grid-row:span 1; }
  .c-9{ grid-column:1 / -1; grid-row:span 1; }

  .c-1 h3{ font-size:clamp(26px,2.6vw,38px); }
  .c-4 h3{ font-size:24px; }

  /* card texture variants */
  .tex-field{
    background:
      radial-gradient(circle at 25% 20%, rgba(45,225,236,0.35), transparent 45%),
      radial-gradient(circle at 80% 75%, rgba(45,225,236,0.18), transparent 50%),
      linear-gradient(150deg, #0a1315, #050708 70%);
  }
  .tex-halftone{
    background-image: radial-gradient(rgba(45,225,236,0.5) 1px, transparent 1.4px);
    background-size:9px 9px;
    background-position:0 0;
    -webkit-mask-image:radial-gradient(circle at 75% 25%, black, transparent 65%);
    mask-image:radial-gradient(circle at 75% 25%, black, transparent 65%);
  }
  .tex-grid{
    background-image:
      linear-gradient(var(--line) 1px, transparent 1px),
      linear-gradient(90deg, var(--line) 1px, transparent 1px);
    background-size:14px 14px;
    -webkit-mask-image:linear-gradient(to bottom, black, transparent 85%);
    mask-image:linear-gradient(to bottom, black, transparent 85%);
  }
  .tex-spectrum{
    background:linear-gradient(90deg, #0a3d44, var(--cyan) 45%, #8ff5fb 65%, #0a3d44);
    opacity:.22 !important;
  }
  .tex-scratch{
    background:
      repeating-linear-gradient(115deg, rgba(45,225,236,0.12) 0 1px, transparent 1px 9px),
      linear-gradient(180deg, #0a1315, #050708);
  }
  .tex-orbit{
    background:
      radial-gradient(circle at 50% 50%, transparent 38%, rgba(45,225,236,0.18) 39%, transparent 40%),
      radial-gradient(circle at 50% 50%, transparent 55%, rgba(45,225,236,0.1) 56%, transparent 57%),
      radial-gradient(circle at 30% 30%, rgba(45,225,236,0.25), transparent 40%),
      #050708;
  }
  .tex-void{
    background:
      radial-gradient(circle at 60% 40%, rgba(45,225,236,0.22), transparent 55%),
      #050708;
  }

  .card-submit{
    background:linear-gradient(100deg, var(--cyan-deep), #061013 65%);
    border-color:var(--line-strong);
    position:relative;
  }
  .card-submit .submit-kicker{
    position:absolute;
    top:22px; left:34px;
    z-index:2;
    display:flex;
    align-items:center;
    gap:8px;
  }
  .card-submit .submit-inner{
    position:relative;
    z-index:2;
    width:100%;
    height:100%;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
  }
  .card-submit .submit-main{ display:flex; align-items:baseline; gap:18px; flex-wrap:wrap; }
  .card-submit h3{ color:var(--cyan-soft); font-style:normal; font-weight:500; font-size:26px; }
  .card-submit .desc{ color:rgba(234,246,246,0.65); margin-top:0; max-width:46ch; }
  .submit-arrow{
    opacity:.55 !important;
    font-size:26px;
    flex-shrink:0;
  }
  .card-submit:hover .submit-arrow{ opacity:1 !important; transform:translate(4px,-4px); }
  .pulse-dot{
    width:7px; height:7px; border-radius:50%;
    background:var(--cyan);
    box-shadow:0 0 0 0 rgba(45,225,236,.6);
    animation:pulse 2s infinite;
    display:inline-block;
  }
  @keyframes pulse{
    0%{ box-shadow:0 0 0 0 rgba(45,225,236,.55); }
    70%{ box-shadow:0 0 0 9px rgba(45,225,236,0); }
    100%{ box-shadow:0 0 0 0 rgba(45,225,236,0); }
  }

  @media (min-width:861px){
    .bento-wrap{ padding-right:clamp(70px, 7vw, 110px); }
  }
  @media (max-width:900px){
    .bento{ grid-template-columns:repeat(2,1fr); grid-auto-rows:140px; }
    .c-1{ grid-column:span 2; grid-row:span 2; }
    .c-2, .c-4, .c-6, .c-7{ grid-column:span 2; }
    .c-7{ grid-row:span 2; grid-column:span 1; }
    .c-9{ grid-column:1 / -1; }
  }
  @media (max-width:560px){
    .bento{ grid-template-columns:1fr; grid-auto-rows:130px; }
    .c-1, .c-2, .c-4, .c-6, .c-7{ grid-column:span 1; }
    .c-1{ grid-row:span 2; height:auto; min-height:260px;}
    .c-7{ grid-row:span 2; }
    .c-9{ grid-column:1 / -1; height:auto; min-height:150px; }
    .card-submit .submit-inner{ flex-direction:column; align-items:flex-start; padding:34px 0 20px; gap:14px; }
    .card-submit .submit-kicker{ position:static; margin-bottom:4px; }
    .section-head{ flex-direction:column; align-items:flex-start; }
    .section-head p{ max-width:none; }
  }

  /* ---------- footer ---------- */
  footer{
    border-top:1px solid var(--line);
    padding:52px 0 40px;
  }
  .footer-grid{
    display:flex;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:30px;
  }
  .footer-brand{
    font-family:'Fraunces', serif;
    font-style:italic;
    font-size:20px;
    color:var(--ink);
  }
  .footer-brand span{ color:var(--cyan); }
  .footer-meta{
    font-family:'IBM Plex Mono', monospace;
    font-size:11px;
    color:var(--ink-faint);
    margin-top:10px;
    letter-spacing:0.04em;
  }
  .footer-links{
    display:flex;
    gap:34px;
    flex-wrap:wrap;
  }
  .footer-links .col h4{
    font-family:'IBM Plex Mono', monospace;
    font-size:10px;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--ink-faint);
    margin-bottom:12px;
  }
  .footer-links .col a{
    display:block;
    font-size:13.5px;
    color:var(--ink-dim);
    margin-bottom:9px;
    transition:color .25s ease;
  }
  .footer-links .col a:hover{ color:var(--cyan-soft); }

  .back-top{
    margin-top:46px;
    padding-top:20px;
    border-top:1px solid var(--line);
    display:flex;
    justify-content:space-between;
    align-items:center;
    font-family:'IBM Plex Mono', monospace;
    font-size:10.5px;
    color:var(--ink-faint);
    letter-spacing:0.08em;
    text-transform:uppercase;
  }
  .back-top a{ cursor:pointer; transition:color .25s ease; }
  .back-top a:hover{ color:var(--cyan-soft); }

  @media (prefers-reduced-motion: reduce){
    *{ animation:none !important; transition:none !important; }
  }