:root {
      --ink:    #03020a;
      --ink2:   #07051a;
      --ink3:   #0d0b22;
      --rim:    rgba(255,255,255,.065);
      --rim2:   rgba(255,255,255,.13);
      --rim3:   rgba(255,255,255,.24);
      --t1:     #f0ecff;
      --t2:     #9d91c8;
      --t3:     #4e4868;
      /* Primary: electric violet-blue */
      --p:      #7c5cfc;
      --p2:     #a78bfa;
      --p3:     #c4b5fd;
      /* Secondary: warm amber */
      --a:      #f59e0b;
      --a2:     #fbbf24;
      --a3:     #fde68a;
      /* Tertiary: electric cyan */
      --cy:     #22d3ee;
      --cy2:    #67e8f9;
      /* Success green */
      --gr:     #34d399;
    }

    *,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
    html{scroll-behavior:smooth}
    body{
      font-family:'DM Sans',sans-serif;
      background:var(--ink);color:var(--t1);
      overflow-x:hidden;cursor:none;
    }

    /* ─── CURSOR ─── */
    #cd,#cr{
      position:fixed;pointer-events:none;z-index:9999;
      transform:translate(-50%,-50%);border-radius:50%;
      will-change:left,top;
    }
    #cd{width:6px;height:6px;background:var(--p2);}
    #cr{
      width:28px;height:28px;
      border:1px solid rgba(124,92,252,.45);
      transition:width .3s,height .3s,border-color .3s;
    }
    body:has(a:hover) #cr,body:has(button:hover) #cr{
      width:44px;height:44px;border-color:var(--cy);
    }

    /* ─── CANVAS ─── */
    #c{position:fixed;inset:0;z-index:0;pointer-events:none;}

    /* ─── GRAIN ─── */
    body::after{
      content:'';position:fixed;inset:0;z-index:1;pointer-events:none;
      background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.028'/%3E%3C/svg%3E");
      background-size:200px;opacity:.65;
    }

    /* ─── LAYOUT ─── */
    .wrap{position:relative;z-index:2;transition:margin-left .25s ease;}
    .delete-btn{
      border:1px solid rgba(239,68,68,.35);
      color:#fca5a5;
    }

    .delete-btn:hover{
      border-color:#ef4444;
      color:#fff;
      background:rgba(239,68,68,.15);
    }
    .empty{color:var(--t3);font-size:.85rem;padding:.5rem 0;}

    /* ─── NAV ─── */
    nav{
      position:fixed;top:0;left:0;right:0;z-index:200;
      display:flex;align-items:center;justify-content:space-between;
      padding:0 clamp(1.5rem,5vw,5rem);height:66px;
      background:rgba(3,2,10,.82);
      backdrop-filter:blur(28px) saturate(160%);
      border-bottom:1px solid var(--rim);
      animation:navDrop .9s cubic-bezier(.16,1,.3,1) both;
    }
    @keyframes navDrop{from{transform:translateY(-100%);opacity:0}to{transform:none;opacity:1}}

    .brand{
      display:flex;align-items:center;gap:.6rem;
      text-decoration:none;color:var(--t1);
      font-family:'Playfair Display',serif;
      font-size:1.05rem;font-weight:800;letter-spacing:.02em;
    }
    .brand img{height:26px;}
    .brand-spark{
      position:relative;width:8px;height:8px;
    }
    .brand-spark::before,.brand-spark::after{
      content:'';position:absolute;inset:0;border-radius:1px;
      background:linear-gradient(135deg,var(--p),var(--cy));
      transform:rotate(45deg);
      animation:sparkSpin 4s linear infinite;
    }
    .brand-spark::after{
      background:linear-gradient(135deg,var(--a),var(--p2));
      animation-delay:-2s;opacity:.6;
    }
    @keyframes sparkSpin{0%{transform:rotate(45deg) scale(1)}50%{transform:rotate(225deg) scale(1.3)}100%{transform:rotate(405deg) scale(1)}}

    .nav-links{
      display:flex;gap:2.4rem;
      position:absolute;left:50%;transform:translateX(-50%);
    }
    @media(max-width:640px){.nav-links{display:none}}
    .nl{
      font-size:.74rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;
      color:var(--t3);text-decoration:none;transition:color .2s;
    }
    .nl:hover{color:var(--t1);}
    .nav-r{display:flex;gap:.6rem;}

    /* ─── BUTTONS ─── */
    .btn{
      font-family:'DM Sans',sans-serif;
      font-size:.76rem;font-weight:600;letter-spacing:.07em;text-transform:uppercase;
      text-decoration:none;cursor:none;
      display:inline-flex;align-items:center;gap:.4rem;
      padding:.6rem 1.2rem;border-radius:8px;border:none;
      position:relative;overflow:hidden;
      transition:transform .2s,box-shadow .2s,border-color .2s,color .2s;
    }
    .btn-ol{color:var(--t2);background:transparent;border:1px solid var(--rim2);}
    .btn-ol:hover{border-color:var(--rim3);color:var(--t1);}

    /* Primary violet CTA */
    .btn-primary{
      color:#fff;
      background:linear-gradient(135deg,var(--p) 0%,var(--p2) 60%,#c084fc 100%);
      box-shadow:0 0 0 1px rgba(124,92,252,.3),0 4px 24px rgba(124,92,252,.25);
    }
    .btn-primary:hover{
      transform:translateY(-1px);
      box-shadow:0 0 0 1px rgba(124,92,252,.55),0 10px 40px rgba(124,92,252,.4);
    }
    .btn-primary::before{
      content:'';position:absolute;inset:0;
      background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent);
      transform:translateX(-130%) skewX(-20deg);
      transition:transform .65s ease;
    }
    .btn-primary:hover::before{transform:translateX(230%) skewX(-20deg);}

    /* Amber accent CTA */
    .btn-amber{
      color:#1a0e00;
      background:linear-gradient(135deg,var(--a) 0%,var(--a2) 55%,var(--a3) 100%);
      box-shadow:0 0 0 1px rgba(245,158,11,.3),0 4px 24px rgba(245,158,11,.22);
    }
    .btn-amber:hover{
      transform:translateY(-1px);
      box-shadow:0 0 0 1px rgba(245,158,11,.55),0 10px 40px rgba(245,158,11,.38);
    }
    .btn-amber::before{
      content:'';position:absolute;inset:0;
      background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);
      transform:translateX(-130%) skewX(-20deg);
      transition:transform .65s ease;
    }
    .btn-amber:hover::before{transform:translateX(230%) skewX(-20deg);}

    .btn-lg{font-size:.85rem;padding:.92rem 2.1rem;border-radius:10px;}

    /* ─── HERO ─── */
    .hero{
      min-height:100vh;
      display:flex;flex-direction:column;align-items:center;justify-content:center;
      text-align:center;
      padding:5rem clamp(1.5rem,6vw,4rem) 5rem;
      position:relative;overflow:hidden;
    }
    .hero > p {
      font-family: 'DM Sans', sans-serif;
      font-size: clamp(.9rem,1.8vw,1.05rem);
      font-weight: 300;
      color: rgba(255,255,255,.52);
      max-width: 560px;
      line-height: 1.75;
    }

    .blob{
      position:absolute;border-radius:50%;
      filter:blur(115px);pointer-events:none;
      animation:bfloat ease-in-out infinite alternate;
    }
    .b1{width:780px;height:780px;background:radial-gradient(circle,rgba(124,92,252,.16),transparent 70%);top:-22%;left:-14%;animation-duration:16s;}
    .b2{width:640px;height:640px;background:radial-gradient(circle,rgba(34,211,238,.11),transparent 70%);top:-6%;right:-10%;animation-duration:21s;animation-delay:-9s;}
    .b3{width:520px;height:520px;background:radial-gradient(circle,rgba(245,158,11,.09),transparent 70%);bottom:5%;left:38%;animation-duration:27s;animation-delay:-15s;}
    @keyframes bfloat{from{transform:translateY(0) scale(1)}to{transform:translateY(-50px) scale(1.08)}}

    /* eyebrow */
    .h-rule{
      display:flex;align-items:center;gap:.9rem;margin-bottom:2rem;
      opacity:0;animation:rise .7s .1s cubic-bezier(.16,1,.3,1) forwards;
    }
    .hrt {
      font-family: 'DM Sans', sans-serif;
      font-size: .72rem;
      font-weight: 600;
      letter-spacing: .18em;
      text-transform: uppercase;
      color: rgba(124,92,252,.9);
      padding: 0.35rem 0.6rem;
      border: 1px solid rgba(124,92,252,.3);
      border-radius: 999px;
      background: rgba(124,92,252,.08);
    }
    h1{
      font-family:'Playfair Display',serif;
      font-size:clamp(1.8rem,6vw,4.5rem);
      font-weight:700;line-height:.93;letter-spacing:-.03em;
      max-width:80%;
      margin-top: 1rem;
      opacity:0;animation:rise .95s .3s cubic-bezier(.16,1,.3,1) forwards;
    }
    .h1a{display:block;color:var(--t1);}
    .h1b{
      display:block;font-style:italic;
      background:linear-gradient(100deg,var(--p) 0%,var(--cy) 35%,var(--p2) 65%,var(--p) 100%);
      background-size:280% 100%;
      -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
      animation:shimmer 5s linear infinite,rise .95s .3s cubic-bezier(.16,1,.3,1) forwards;
    }
    @keyframes shimmer{0%{background-position:100% 0}100%{background-position:-100% 0}}

    h2{
      font-family:'Playfair Display',serif;
      font-size:clamp(1.5rem,2.5vw,3.2rem);
      font-weight:600;
      line-height:1.1;
      letter-spacing:-.02em;
      margin-bottom:1.2rem;

      background:linear-gradient(100deg,var(--p) 0%,var(--cy) 50%,var(--p2) 100%);
      background-size:250% 100%;
      -webkit-background-clip:text;
      -webkit-text-fill-color:transparent;
      background-clip:text;

      animation:shimmer 6s linear infinite,
                rise .8s .2s cubic-bezier(.16,1,.3,1) forwards;
    }

    h2 em{
      font-style:italic;
      color:var(--p2);
    }
    .hero-sub{
      margin-top:1.8rem;
      font-family:'Cormorant Garamond',serif;
      font-size:clamp(1.1rem,2vw,1.45rem);
      font-style:italic;font-weight:300;
      color:var(--t2);max-width:440px;line-height:1.85;
      opacity:0;animation:rise .8s .55s cubic-bezier(.16,1,.3,1) forwards;
    }

    .hero-cta{
      margin-top:2.6rem;margin-bottom:1.2rem;
      display:flex;align-items:center;gap:1rem;flex-wrap:wrap;justify-content:center;
      opacity:0;animation:rise .8s .75s cubic-bezier(.16,1,.3,1) forwards;
    }
    .hero-note{
      margin-top:1.6rem;font-size:.7rem;color:var(--t3);letter-spacing:.06em;
      opacity:0;animation:rise .6s .95s cubic-bezier(.16,1,.3,1) forwards;
    }
    .hero-note em{font-style:normal;color:var(--gr);}

    /* ── HERO TOOL CARDS ── */
    .hero-tools{
      margin-top:3rem;
      display:grid;
      grid-template-columns:repeat(4,1fr);
      gap:.75rem;
      width:min(860px,100%);
      opacity:0;animation:rise .7s 1.1s cubic-bezier(.16,1,.3,1) forwards;
    }
    @media(max-width:700px){.hero-tools{grid-template-columns:1fr 1fr;}}
    @media(max-width:400px){.hero-tools{grid-template-columns:1fr;}}
  
    .ht-card:hover{
      border-color:var(--rim2);
      background:rgba(255,255,255,.055);
      transform:translateY(-3px);
    }
    .ht-card::before{
      content:'';position:absolute;top:0;left:0;right:0;height:1px;
      background:var(--hc-beam,transparent);
      opacity:0;transition:opacity .3s;
    }
    .ht-card:hover::before{opacity:1;}

    .ht-web   { --hc-beam:linear-gradient(90deg,transparent,var(--p2),transparent); }
    .ht-resume{ --hc-beam:linear-gradient(90deg,transparent,var(--cy),transparent); }
    .ht-card-tool{ --hc-beam:linear-gradient(90deg,transparent,var(--a2),transparent); }
    .ht-qr    { --hc-beam:linear-gradient(90deg,transparent,var(--gr),transparent); }

    .ht-icon{font-size:1.2rem;line-height:1;flex-shrink:0;margin-top:.05rem;}
    .ht-info{flex:1;min-width:0;}
    .ht-name{
      font-size:.78rem;font-weight:600;color:var(--t1);
      white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
      margin-bottom:.2rem;
    }
    .ht-desc{font-size:.66rem;color:var(--t3);line-height:1.4;}
    .ht-badge{
      flex-shrink:0;align-self:flex-start;
      font-size:.55rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
      color:var(--p2);border:1px solid rgba(167,139,250,.3);
      background:rgba(167,139,250,.1);
      padding:.18rem .5rem;border-radius:100px;
      margin-top:.1rem;
    }



    .scroll-ind{
      position:absolute;bottom:2.5rem;left:50%;transform:translateX(-50%);
      display:flex;flex-direction:column;align-items:center;gap:.45rem;
      opacity:0;animation:rise .5s 1.5s forwards;
    }
    .scroll-ind span{font-size:.58rem;letter-spacing:.22em;text-transform:uppercase;color:var(--t3);}
    .sind{
      width:1px;height:44px;
      background:linear-gradient(to bottom,var(--p2),transparent);
      animation:sinPulse 2.4s ease-in-out infinite;
    }
    @keyframes sinPulse{0%,100%{opacity:1;transform:scaleY(1)}50%{opacity:.2;transform:scaleY(.35)}}
    @keyframes rise{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}

    /* ─── MARQUEE ─── */
    .mq-wrap{
      overflow:hidden;padding:1.4rem 0;
      border-top:1px solid var(--rim);border-bottom:1px solid var(--rim);
      background:rgba(124,92,252,.018);
    }
    .mq-track{display:flex;width:max-content;animation:mqRun 32s linear infinite;}
    .mq-track:hover{animation-play-state:paused;}
    .mi{
      display:flex;align-items:center;gap:1rem;padding:0 2.2rem;
      font-family:'Cormorant Garamond',serif;
      font-size:1.08rem;font-style:italic;font-weight:300;
      color:var(--t3);white-space:nowrap;flex-shrink:0;transition:color .25s;
    }
    .mi:hover{color:var(--t2);}
    .ms{color:var(--p2);font-style:normal;font-size:.65rem;}
    @keyframes mqRun{from{transform:translateX(0)}to{transform:translateX(-50%)}}

    /* ─── WEBSITE BUILDER SHOWCASE ─── */
    .wb-section{
      padding:clamp(2.5rem,4vw,5rem) clamp(1.5rem,5vw,5rem);
      position:relative;overflow:hidden;
    }
    /* section background glow */
    .wb-section::before{
      content:'';position:absolute;inset:0;pointer-events:none;
      background:
        radial-gradient(ellipse 70% 50% at 50% 50%,rgba(124,92,252,.07),transparent),
        radial-gradient(ellipse 40% 30% at 80% 20%,rgba(34,211,238,.05),transparent);
    }

    .wb-grid{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:4rem;align-items:center;
    }
    @media(max-width:900px){.wb-grid{grid-template-columns:1fr;gap:3rem;}}

    .sec-kicker{
      display:inline-flex;align-items:center;gap:.5rem;
      font-size:.64rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
      color:var(--cy);margin-bottom:1.2rem;
    }
    .kd{width:20px;height:1px;background:var(--cy);}

    .wb-h{
      font-family:'Playfair Display',serif;
      font-size:clamp(2rem,4vw,3.4rem);font-weight:900;
      letter-spacing:-.025em;line-height:1.05;
      margin-bottom:1.4rem;
    }
    .wb-h .accent{
      font-style:italic;
      background:linear-gradient(100deg,var(--p2),var(--cy));
      -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
    }

    .wb-desc{
      font-family:'Cormorant Garamond',serif;
      font-size:1.18rem;font-style:italic;font-weight:300;
      color:var(--t2);line-height:1.8;margin-bottom:2rem;
    }

    /* feature pills */
    .wb-features{
      display:flex;flex-direction:column;gap:.75rem;margin-bottom:2.5rem;
    }
    .wf{
      display:flex;align-items:flex-start;gap:.85rem;
      padding:.9rem 1.1rem;
      border:1px solid var(--rim);border-radius:14px;
      background:rgba(255,255,255,.025);
      transition:border-color .25s,background .25s;
    }
    .wf:hover{border-color:var(--rim2);background:rgba(124,92,252,.06);}
    .wf-icon{
      width:34px;height:34px;border-radius:10px;flex-shrink:0;
      display:flex;align-items:center;justify-content:center;
      font-size:1rem;
      background:var(--fi-bg,rgba(124,92,252,.12));
      border:1px solid var(--fi-border,rgba(124,92,252,.2));
    }
    .wf-text h4{font-size:.85rem;font-weight:600;margin-bottom:.2rem;}
    .wf-text p{font-size:.78rem;color:var(--t2);line-height:1.5;}


    /* ─── MOCK BROWSER WINDOW ─── */
    .browser-wrap{
      position:relative;
      border-radius:18px;
      padding:1px;
      background:linear-gradient(135deg,rgba(124,92,252,.4),rgba(34,211,238,.2),rgba(124,92,252,.1));
      box-shadow:
        0 0 0 1px rgba(124,92,252,.15),
        0 40px 100px rgba(124,92,252,.2),
        0 80px 160px rgba(0,0,0,.5);
      animation:floatCard 6s ease-in-out infinite alternate;
    }
    @keyframes floatCard{from{transform:translateY(0)}to{transform:translateY(-12px)}}

    .browser{
      border-radius:17px;overflow:hidden;
      background:var(--ink3);
    }
    .browser-bar{
      height:38px;background:rgba(255,255,255,.04);
      border-bottom:1px solid var(--rim);
      display:flex;align-items:center;padding:0 1rem;gap:.85rem;
    }
    .b-dots{display:flex;gap:.38rem;}
    .b-dot{width:10px;height:10px;border-radius:50%;}
    .b-dot-r{background:#ff5f57;}
    .b-dot-y{background:#febc2e;}
    .b-dot-g{background:#28c840;}
    .b-url{
      flex:1;height:22px;border-radius:6px;
      background:rgba(255,255,255,.06);border:1px solid var(--rim);
      display:flex;align-items:center;padding:0 .7rem;
      font-size:.65rem;color:var(--t3);letter-spacing:.04em;gap:.4rem;
    }
    .b-url-lock{color:var(--gr);font-size:.6rem;}

    /* animated site elements */
    .sp-nav{
      height:32px;border-radius:8px;
      background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);
      display:flex;align-items:center;padding:0 1rem;gap:.8rem;margin-bottom:1.4rem;
    }
    .sp-logo{width:50px;height:6px;border-radius:3px;background:rgba(124,92,252,.6);}
    .sp-navlinks{display:flex;gap:.5rem;margin-left:auto;}
    .sp-nl{height:5px;border-radius:3px;background:rgba(255,255,255,.15);}

    .sp-hero-area{
      display:flex;flex-direction:column;gap:.7rem;padding:0 .5rem;
    }
    .sp-h1{height:14px;border-radius:4px;width:70%;background:linear-gradient(90deg,rgba(167,139,250,.7),rgba(34,211,238,.4));}
    .sp-h2{height:9px;border-radius:3px;width:50%;background:rgba(255,255,255,.18);}
    .sp-h3{height:9px;border-radius:3px;width:40%;background:rgba(255,255,255,.12);}
    .sp-btn-row{display:flex;gap:.5rem;margin-top:.4rem;}
    .sp-btn1{
      height:22px;width:80px;border-radius:6px;
      background:linear-gradient(135deg,var(--p),var(--cy));
      animation:spBtnPulse 2.5s ease-in-out infinite;
    }
    @keyframes spBtnPulse{0%,100%{box-shadow:0 0 0 0 rgba(124,92,252,0)}50%{box-shadow:0 0 0 4px rgba(124,92,252,.2)}}
    .sp-btn2{height:22px;width:60px;border-radius:6px;background:rgba(255,255,255,.08);}

    .sp-cards{
      display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;margin-top:1rem;
    }
    .sp-card{
      height:48px;border-radius:8px;
      background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);
      position:relative;overflow:hidden;
    }
    .sp-card::after{
      content:'';position:absolute;inset:0;
      background:linear-gradient(135deg,rgba(124,92,252,.12),transparent);
    }

    /* typing cursor animation */
    .ai-prompt-bar{
      position:absolute;bottom:1.2rem;left:1.2rem;right:1.2rem;
      height:36px;border-radius:10px;
      background:rgba(255,255,255,.07);
      border:1px solid rgba(124,92,252,.35);
      display:flex;align-items:center;padding:0 .8rem;gap:.5rem;
      box-shadow:0 0 16px rgba(124,92,252,.15);
    }
    .ai-icon{font-size:.75rem;color:var(--p2);}
    .ai-typing{
      font-size:.68rem;color:var(--t2);letter-spacing:.02em;
      overflow:hidden;white-space:nowrap;
      width:0;
      animation:typeText 4s steps(40) 1s infinite;
    }
    .ai-cursor{
      width:1px;height:14px;background:var(--p2);
      animation:blinkCur .7s step-end infinite;
    }
    @keyframes typeText{
      0%{width:0;opacity:1}
      60%{width:220px;opacity:1}
      80%{width:220px;opacity:1}
      95%{width:0;opacity:0}
      100%{width:0;opacity:1}
    }
    @keyframes blinkCur{0%,100%{opacity:1}50%{opacity:0}}

    /* floating labels on browser */
    .browser-label{
      position:absolute;
      background:var(--ink3);border:1px solid var(--rim2);
      border-radius:10px;padding:.5rem .8rem;
      font-size:.65rem;font-weight:600;letter-spacing:.06em;
      display:flex;align-items:center;gap:.4rem;
      box-shadow:0 8px 24px rgba(0,0,0,.4);
      animation:floatLabel 4s ease-in-out infinite alternate;
    }
    .bl-1{top:-18px;right:12%;animation-delay:0s;}
    .bl-2{bottom:24px;left:-20px;animation-delay:-2s;}
    .bl-dot{width:6px;height:6px;border-radius:50%;}
    @keyframes floatLabel{from{transform:translateY(0)}to{transform:translateY(-8px)}}

    /* ─── BENTO — OTHER TOOLS ─── */
    .tools-section{
      padding:clamp(1rem,2vw,1.75rem) clamp(1.5rem,5vw,5rem);
      background:linear-gradient(180deg,transparent,rgba(124,92,252,.03),transparent);
    }
    .sec-tag {
      display: inline-flex;
      align-items: center;
      gap: .5rem;
      font-family: 'DM Sans', sans-serif;
      font-size: .72rem;
      font-weight: 600;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: rgba(167,139,250,.85);
      margin-bottom: .85rem;
    }
    .tdash{width:20px;height:1px;background:var(--p2);}

    .bento{
      display:grid;
      grid-template-columns:repeat(4,1fr);
      gap:1rem;
    }
    @media(max-width:560px){.bento{grid-template-columns:repeat(2,1fr)}}

    .bcard{
      border:1px solid var(--rim);border-radius:20px;
      background:var(--ink2);
      padding:1.8rem 1.8rem 2rem;
      position:relative;overflow:hidden;cursor:none;
      display:block;
      text-decoration:none;
      color:inherit;
      opacity:0;transform:translateY(22px);
      transition:opacity .75s cubic-bezier(.16,1,.3,1),
                  transform .75s cubic-bezier(.16,1,.3,1),
                  border-color .3s,box-shadow .4s;
    }
    .bcard.in{opacity:1;transform:none;}
    .bcard:hover{
      transform:translateY(-7px);
      border-color:var(--rim2);
      box-shadow:0 28px 70px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.05);
    }
    .bcard::before{
      content:'';position:absolute;top:0;left:10%;right:10%;height:1px;
      background:var(--cbeam,transparent);
      box-shadow:var(--cglow,none);
      opacity:0;transition:opacity .35s;
    }
    .bcard:hover::before{opacity:1;}
    .bcard::after{
      content:'';position:absolute;inset:0;
      background:linear-gradient(110deg,transparent 38%,rgba(255,255,255,.032) 50%,transparent 62%);
      transform:translateX(-115%);transition:transform .8s ease;
    }
    .bcard:hover::after{transform:translateX(115%);}

    .ac-violet{--cbeam:linear-gradient(90deg,transparent,var(--p2),transparent);--cglow:0 0 14px rgba(167,139,250,.35);}
    .ac-amber{--cbeam:linear-gradient(90deg,transparent,var(--a2),transparent);--cglow:0 0 14px rgba(251,191,36,.35);}
    .ac-cyan{--cbeam:linear-gradient(90deg,transparent,var(--cy),transparent);--cglow:0 0 14px rgba(34,211,238,.35);}

    .card-ey{
      font-size:.62rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
      color:var(--t3);margin-bottom:1.1rem;
      display:flex;align-items:center;gap:.5rem;
    }
    .pip{width:4px;height:4px;border-radius:50%;background:var(--pc,var(--p2));}
    .bcard h3{
      font-family:'Playfair Display',serif;
      font-size:clamp(1.15rem,2vw,1.5rem);font-weight:800;
      letter-spacing:-.015em;line-height:1.1;margin-bottom:.65rem;
    }
    .bcard>p{font-size:.86rem;color:var(--t2);line-height:1.72;}
    .ctag{
      display:inline-flex;margin-top:1.2rem;
      font-size:.64rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
      padding:.28rem .75rem;border-radius:100px;
      color:var(--tc,var(--p2));
      border:1px solid var(--tb,rgba(167,139,250,.28));
      background:var(--tg,rgba(167,139,250,.07));
      transition:background .25s,border-color .25s;
    }
    .bcard:hover .ctag{background:var(--th,rgba(167,139,250,.15));border-color:var(--tc);}
    .ac-violet .ctag{--tc:var(--p2);--tb:rgba(167,139,250,.3);--tg:rgba(167,139,250,.07);--th:rgba(167,139,250,.16);}
    .ac-amber  .ctag{--tc:var(--a2); --tb:rgba(251,191,36,.3); --tg:rgba(251,191,36,.07); --th:rgba(251,191,36,.17);}
    .ac-cyan   .ctag{--tc:var(--cy); --tb:rgba(34,211,238,.3);  --tg:rgba(34,211,238,.07); --th:rgba(34,211,238,.16);}

    /* ─── STATS ─── */
    .stats-section{
      padding:clamp(3rem,6vw,5rem) clamp(1.5rem,5vw,5rem);
      border-top:1px solid var(--rim);
    }
    .stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:2.5rem;}
    .stat{padding-left:1.3rem;position:relative;}
    .stat::before{
      content:'';position:absolute;left:0;top:.15rem;
      width:2px;height:calc(100% - .3rem);
      background:linear-gradient(to bottom,var(--p2),transparent);
    }
    .stn{
      font-family:'Playfair Display',serif;
      font-size:clamp(1.9rem,3.5vw,2.9rem);font-weight:900;letter-spacing:-.03em;
    }
    .stl{font-size:.68rem;color:var(--t3);letter-spacing:.12em;text-transform:uppercase;margin-top:.25rem;}

    /* ─── CTA ─── */
    .cta-section{padding:clamp(3.5rem,7vw,6rem) clamp(1.5rem,5vw,5rem);}
    
    @keyframes rot{to{transform:rotate(360deg)}}
    .cta-pre{font-size:.65rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--p2);margin-bottom:1rem;display:flex;align-items:center;gap:.5rem;}
    /* .cta-btns{display:flex;flex-direction:column;gap:.7rem;flex-shrink:0;}
    @media(max-width:680px){.cta-btns{flex-direction:row;flex-wrap:wrap}} */

    /* ─── FOOTER ─── */
    footer{
      border-top:1px solid var(--rim);
      padding:2rem clamp(1.5rem,5vw,5rem);
      display:flex;align-items:center;
      justify-content:space-between;flex-wrap:wrap;
      gap:1rem;
    }
    .fb{font-family:'Playfair Display',serif;font-size:.95rem;font-weight:800;color:var(--t2);}
    .fn{font-size:.7rem;color:var(--t3);letter-spacing:.04em;}

    /* ─── SCROLL REVEAL ─── */
    .sr{
      opacity:0;transform:translateY(24px);
      transition:opacity .85s cubic-bezier(.16,1,.3,1),transform .85s cubic-bezier(.16,1,.3,1);
    }
    .sr.in{opacity:1;transform:none;}
    .d1{transition-delay:.1s}.d2{transition-delay:.2s}.d3{transition-delay:.3s}.d4{transition-delay:.4s}

/* Requested behavior updates */
.hero{align-items:flex-start;text-align:left;}
.hero-tools{margin-bottom:2.2rem;}

 /* ── PAGE SHELL ── */
.home-shell {
  position: relative;
  z-index: 2;
  padding: 82px clamp(1.4rem, 4vw, 4rem) 3rem;
  max-width: 1200px;
  margin: 0 auto;
}

/* ── GREETING ROW ── */
.greet-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: .6rem;
  opacity: 0;
  animation: riseIn .7s .05s cubic-bezier(.16,1,.3,1) forwards;
}
.greet-left {
  display: flex;
  align-items: center;
  gap: .8rem;
}
.greet-eyebrow {
  font-size: .54rem;
  font-weight: 600;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--p2);
  display: flex;
  align-items: center;
  gap: .45rem;
}
.greet-dash {
  display: inline-block;
  width: 16px; height: 1px;
  background: var(--p2);
}
.greet-sep {
  width: 1px; height: 18px;
  background: var(--rim2);
}
.greet-row h1 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.3rem, 2.2vw, 1.85rem);
  font-weight: 700;
  letter-spacing: -.025em;
  line-height: 1;
  color: var(--t1);
  margin: 0;
  opacity: 1;
  animation: none;
  transform: none;
}
.greet-row h1 em {
  font-style: italic;
  background: linear-gradient(100deg, var(--p) 0%, var(--cy) 40%, var(--p2) 70%, var(--p) 100%);
  background-size: 280% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmer 6s linear infinite;
}
.greet-note {
  font-size: .67rem;
  color: var(--t3);
  letter-spacing: .04em;
}
.greet-note strong { color: var(--t2); font-weight: 500; }

@keyframes shimmer { 0%{background-position:100% 0} 100%{background-position:-100% 0} }
@keyframes riseIn  { from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:none} }

/* ── DIVIDER ── */
.home-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(124,92,252,.2) 30%, rgba(34,211,238,.15) 70%, transparent);
  margin-bottom: 1.4rem;
  opacity: 0;
  animation: riseIn .5s .18s forwards;
}

/* ── SECTION LABEL ── */
.home-sec-label {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .56rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--t3);
  margin-bottom: .85rem;
  opacity: 0;
  animation: riseIn .5s .26s forwards;
}
.home-sec-label span {
  display: inline-block;
  width: 14px; height: 1px;
  background: var(--t3);
}

/* ── BENTO ── */
.bento {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .8rem;
  margin-bottom: 1.2rem;
}
@media (max-width: 860px) { .bento { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .bento { grid-template-columns: 1fr; } }

/* ── CARD ── */
.bcard {
  position: relative;
  overflow: hidden;
  border-radius: 17px;
  padding: 1.35rem 1.3rem 1.2rem;
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--rim);
  background: var(--ink2);
  display: flex;
  flex-direction: column;
  cursor: none;
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity .6s cubic-bezier(.16,1,.3,1),
    transform .6s cubic-bezier(.16,1,.3,1),
    border-color .25s,
    box-shadow .3s,
    background .25s;
}
.bcard.in { opacity: 1; transform: none; }

.bcard::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(110deg,transparent 38%,rgba(255,255,255,.03) 50%,transparent 62%);
  transform: translateX(-120%);
  transition: transform .8s ease;
  pointer-events: none;
}
.bcard:hover::after { transform: translateX(120%); }

.bcard::before {
  content: '';
  position: absolute; top: 0; left: 10%; right: 10%; height: 1px;
  background: var(--cbeam, transparent);
  box-shadow: var(--cglow, none);
  opacity: 0;
  transition: opacity .3s;
  pointer-events: none;
}
.bcard:hover::before { opacity: 1; }

.bcard:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0 20px 50px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.05);
}

.bcard:nth-child(1) { transition-delay: .07s; }
.bcard:nth-child(2) { transition-delay: .14s; }
.bcard:nth-child(3) { transition-delay: .21s; }
.bcard:nth-child(4) { transition-delay: .28s; }

.ac-violet {
  --cbeam: linear-gradient(90deg,transparent,var(--p2),transparent);
  --cglow: 0 0 10px rgba(167,139,250,.3);
}
.ac-violet:hover { border-color: rgba(167,139,250,.24); background: rgba(124,92,252,.04); }

.ac-amber {
  --cbeam: linear-gradient(90deg,transparent,var(--a2),transparent);
  --cglow: 0 0 10px rgba(251,191,36,.28);
}
.ac-amber:hover { border-color: rgba(251,191,36,.22); background: rgba(245,158,11,.03); }

.ac-cyan {
  --cbeam: linear-gradient(90deg,transparent,var(--cy),transparent);
  --cglow: 0 0 10px rgba(34,211,238,.28);
}
.ac-cyan:hover { border-color: rgba(34,211,238,.2); background: rgba(34,211,238,.025); }

/* card internals */
.app-tile-icon {
  width: 28px; height: 28px;
  border-radius: 8px; object-fit: cover;
  border: 1px solid rgba(255,255,255,.1);
  margin-bottom: .65rem;
  flex-shrink: 0;
}
.card-ey {
  display: flex; align-items: center; gap: .38rem;
  font-size: .54rem; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase;
  margin-bottom: .38rem;
}
.ac-violet .card-ey { color: rgba(167,139,250,.65); }
.ac-amber  .card-ey { color: rgba(251,191,36,.65);  }
.ac-cyan   .card-ey { color: rgba(34,211,238,.6);   }

.pip {
  width: 4px; height: 4px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

.bcard h3 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1rem, 1.5vw, 1.3rem);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -.015em;
  color: var(--t1);
  margin-bottom: .3rem;
}

.bcard > p {
  font-size: .78rem;
  line-height: 1.62;
  color: var(--t2);
  flex: 1;
}

.ctag {
  display: inline-flex; align-items: center; gap: .28rem;
  margin-top: .8rem;
  font-size: .56rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  padding: .25rem .65rem; border-radius: 999px;
  width: fit-content;
  transition: background .2s, border-color .2s;
}
.ac-violet .ctag { color: var(--p2);  border: 1px solid rgba(167,139,250,.26); background: rgba(167,139,250,.07); }
.ac-violet:hover .ctag { background: rgba(167,139,250,.14); border-color: var(--p2); }
.ac-amber  .ctag { color: var(--a2);  border: 1px solid rgba(251,191,36,.25);   background: rgba(251,191,36,.07); }
.ac-amber:hover  .ctag { background: rgba(251,191,36,.14);  border-color: var(--a2); }
.ac-cyan   .ctag { color: var(--cy);  border: 1px solid rgba(34,211,238,.24);   background: rgba(34,211,238,.06); }
.ac-cyan:hover   .ctag { background: rgba(34,211,238,.13);  border-color: var(--cy); }

.bcard-num {
  position: absolute; bottom: 10px; right: 13px;
  font-family: 'Playfair Display', serif;
  font-size: 2.8rem; font-weight: 900; line-height: 1;
  pointer-events: none; user-select: none;
  opacity: .038;
  transition: opacity .3s;
}
.bcard:hover .bcard-num { opacity: .08; }

/* ── ANNOUNCEMENT ── */
.dev-announcement {
  border: 1px solid rgba(124,92,252,.2);
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(124,92,252,.065) 0%, rgba(34,211,238,.035) 100%);
  padding: 1.1rem 1.4rem;
  position: relative; overflow: hidden;
  opacity: 0;
  animation: riseIn .55s .48s forwards;
}
.dev-announcement::before {
  content: '';
  position: absolute; top: 0; left: 8%; right: 8%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(124,92,252,.45), transparent);
}

.dev-inner {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
}
.dev-pulse {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--p2); flex-shrink: 0;
  box-shadow: 0 0 0 0 rgba(167,139,250,.6);
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(167,139,250,.6); }
  60%  { box-shadow: 0 0 0 7px rgba(167,139,250,0); }
  100% { box-shadow: 0 0 0 0 rgba(167,139,250,0); }
}

.dev-body { flex: 1; min-width: 0; }
.dev-label {
  font-size: .52rem; font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--p2); margin-bottom: .2rem;
}
.dev-announcement h2 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(.88rem, 1.3vw, 1.1rem);
  font-weight: 700; line-height: 1.15;
  letter-spacing: -.015em;
  color: var(--t1);
  margin-bottom: .15rem;
  background: none;
  -webkit-text-fill-color: var(--t1);
  animation: none; opacity: 1; transform: none;
}
.dev-announcement p {
  font-size: .75rem; color: var(--t3); line-height: 1.55;
}
.dev-badge {
  flex-shrink: 0;
  padding: .26rem .75rem; border-radius: 999px;
  font-size: .56rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--p2);
  border: 1px solid rgba(167,139,250,.26);
  background: rgba(167,139,250,.07);
  white-space: nowrap;
}

/* ── BASE TOKENS ── */
  :root {
    --ink:    #03020a;
    --ink2:   #07051a;
    --ink3:   #0d0b22;
    --rim:    rgba(255,255,255,.065);
    --rim2:   rgba(255,255,255,.13);
    --rim3:   rgba(255,255,255,.24);
    --t1:     #f0ecff;
    --t2:     #9d91c8;
    --t3:     #4e4868;
    --p:      #7c5cfc;
    --p2:     #a78bfa;
    --p3:     #c4b5fd;
    --a:      #f59e0b;
    --a2:     #fbbf24;
    --a3:     #fde68a;
    --cy:     #22d3ee;
    --cy2:    #67e8f9;
    --gr:     #34d399;
    /* Wedding gold palette layered in */
    --gold:   #e2c576;
    --gold2:  #c9a84c;
    --gold3:  rgba(226,197,118,0.15);
  }

  *,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
  html { scroll-behavior:smooth; }
  body {
    font-family:'DM Sans',sans-serif;
    background:var(--ink);
    color:var(--t1);
    overflow-x:hidden;
    cursor:none;
  }

  /* ── CURSOR ── */
  #cd,#cr {
    position:fixed; pointer-events:none; z-index:9999;
    transform:translate(-50%,-50%); border-radius:50%;
    will-change:left,top;
  }
  #cd { width:6px; height:6px; background:var(--gold); }
  #cr {
    width:28px; height:28px;
    border:1px solid rgba(226,197,118,.4);
    transition:width .3s,height .3s,border-color .3s;
  }
  body:has(a:hover) #cr, body:has(button:hover) #cr {
    width:44px; height:44px; border-color:var(--gold);
  }

  /* ── CANVAS (particle bg) ── */
  #c { position:fixed; inset:0; z-index:0; pointer-events:none; }

  /* ── GRAIN ── */
  body::after {
    content:''; position:fixed; inset:0; z-index:1; pointer-events:none;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.028'/%3E%3C/svg%3E");
    background-size:200px; opacity:.65;
  }

  /* ── LAYOUT ── */
  .wrap { position:relative; z-index:2; }

  /* ── NAV ── */
  nav {
    position:fixed; top:0; left:0; right:0; z-index:200;
    display:flex; align-items:center; justify-content:space-between;
    padding:0 clamp(1.5rem,5vw,5rem); height:66px;
    background:rgba(3,2,10,.85);
    backdrop-filter:blur(28px) saturate(160%);
    border-bottom:1px solid var(--rim);
    animation:navDrop .9s cubic-bezier(.16,1,.3,1) both;
  }
  @keyframes navDrop { from{transform:translateY(-100%);opacity:0} to{transform:none;opacity:1} }

  .brand {
    display:flex; align-items:center; gap:.7rem;
    text-decoration:none; color:var(--t1);
  }
  .brand-logo {
    width:34px; height:34px; border-radius:8px; object-fit:cover;
    border:1px solid rgba(226,197,118,.25);
    box-shadow:0 0 0 1px rgba(255,255,255,.06);
    flex-shrink:0;
  }
  .brand-wordmark {
    display:flex; flex-direction:column; line-height:1;
  }
  .brand-top {
    font-family:'Cinzel Decorative',cursive;
    font-size:10px; font-weight:400;
    letter-spacing:5px; color:var(--gold2);
    text-transform:uppercase;
  }
  .brand-main {
    font-family:'Cormorant Garamond',serif;
    font-size:22px; font-weight:300;
    font-style:italic; color:var(--t1);
    letter-spacing:1px;
  }


  .nav-links {
    display:flex; gap:2.4rem;
    position:absolute; left:50%; transform:translateX(-50%);
    list-style:none;
  }
  @media(max-width:640px){ .nav-links{display:none} }
  .nl {
    font-size:.74rem; font-weight:500; letter-spacing:.1em; text-transform:uppercase;
    color:var(--t3); text-decoration:none; transition:color .2s;
  }
  .nl:hover { color:var(--t1); }
  .nav-r { display:flex; gap:.6rem; }

  /* ── BUTTONS ── */
  .btn {
    font-family:'DM Sans',sans-serif;
    font-size:.76rem; font-weight:600; letter-spacing:.07em; text-transform:uppercase;
    text-decoration:none; cursor:none;
    display:inline-flex; align-items:center; gap:.4rem;
    padding:.6rem 1.2rem; border-radius:8px; border:none;
    position:relative; overflow:hidden;
    transition:transform .2s,box-shadow .2s,border-color .2s,color .2s;
  }
  .btn-ol { color:var(--t2); background:transparent; border:1px solid var(--rim2); }
  .btn-ol:hover { border-color:var(--rim3); color:var(--t1); }

  .btn-gold {
    color:#0d0b22;
    background:linear-gradient(135deg,var(--gold2) 0%,var(--gold) 55%,#f5d88a 100%);
    box-shadow:0 0 0 1px rgba(226,197,118,.3),0 4px 24px rgba(226,197,118,.22);
  }
  .btn-gold:hover {
    transform:translateY(-1px);
    box-shadow:0 0 0 1px rgba(226,197,118,.6),0 10px 40px rgba(226,197,118,.38);
  }
  .btn-gold::before {
    content:''; position:absolute; inset:0;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);
    transform:translateX(-130%) skewX(-20deg);
    transition:transform .65s ease;
  }
  .btn-gold:hover::before { transform:translateX(230%) skewX(-20deg); }

  .btn-violet {
    color:#fff;
    background:linear-gradient(135deg,var(--p) 0%,var(--p2) 60%,#c084fc 100%);
    box-shadow:0 0 0 1px rgba(124,92,252,.3),0 4px 24px rgba(124,92,252,.25);
  }
  .btn-violet:hover {
    transform:translateY(-1px);
    box-shadow:0 0 0 1px rgba(124,92,252,.55),0 10px 40px rgba(124,92,252,.4);
  }
  .btn-violet::before {
    content:''; position:absolute; inset:0;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent);
    transform:translateX(-130%) skewX(-20deg);
    transition:transform .65s ease;
  }
  .btn-violet:hover::before { transform:translateX(230%) skewX(-20deg); }
  .btn-lg { font-size:.85rem; padding:.92rem 2.1rem; border-radius:10px; }

  /* ── BLOBS ── */
  .blob {
    position:absolute; border-radius:50%;
    filter:blur(115px); pointer-events:none;
    animation:bfloat ease-in-out infinite alternate;
  }
  .b1 { width:780px;height:780px;background:radial-gradient(circle,rgba(226,197,118,.1),transparent 70%);top:-22%;left:-14%;animation-duration:16s; }
  .b2 { width:640px;height:640px;background:radial-gradient(circle,rgba(124,92,252,.1),transparent 70%);top:-6%;right:-10%;animation-duration:21s;animation-delay:-9s; }
  .b3 { width:520px;height:520px;background:radial-gradient(circle,rgba(34,211,238,.07),transparent 70%);bottom:5%;left:38%;animation-duration:27s;animation-delay:-15s; }
  @keyframes bfloat { from{transform:translateY(0) scale(1)} to{transform:translateY(-50px) scale(1.08)} }

  /* ── HERO ── */
  .hero {
    min-height:100vh;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    text-align:center;
    padding:7rem clamp(1.5rem,6vw,4rem) 5rem;
    position:relative; overflow:hidden;
  }

  .h-rule {
    display:flex; align-items:center; gap:.9rem; margin-bottom:2rem;
    opacity:0; animation:rise .7s .1s cubic-bezier(.16,1,.3,1) forwards;
  }
  .hrl { width:40px; height:1px; background:linear-gradient(90deg,transparent,var(--gold)); }
  .hrl.r { background:linear-gradient(90deg,var(--gold),transparent); }
  .hrt {
    font-family:'Cinzel Decorative',cursive;
    font-size:.62rem; font-weight:400; letter-spacing:.22em;
    text-transform:uppercase; color:var(--gold2);
    padding:.35rem .9rem;
    border:1px solid rgba(226,197,118,.3);
    border-radius:999px;
    background:rgba(226,197,118,.07);
  }

  h1 {
    font-family:'Cormorant Garamond',serif;
    font-size:clamp(2.8rem,7vw,6.5rem);
    font-weight:300; line-height:.95; letter-spacing:-.02em;
    max-width:900px;
    opacity:0; animation:rise .95s .3s cubic-bezier(.16,1,.3,1) forwards;
  }
  .h1a { display:block; color:var(--t1); font-weight:300; }
  .h1b {
    display:block; font-style:italic; font-weight:300;
    background:linear-gradient(100deg,var(--gold2) 0%,var(--gold) 35%,#f5d88a 65%,var(--gold2) 100%);
    background-size:280% 100%;
    -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
    animation:goldShimmer 5s linear infinite, rise .95s .3s cubic-bezier(.16,1,.3,1) forwards;
  }
  @keyframes goldShimmer { 0%{background-position:100% 0} 100%{background-position:-100% 0} }

  .hero-sub {
    margin-top:1.8rem;
    font-family:'Cormorant Garamond',serif;
    font-size:clamp(1.1rem,2vw,1.45rem);
    font-style:italic; font-weight:300;
    color:var(--t2); max-width:480px; line-height:1.85;
    opacity:0; animation:rise .8s .55s cubic-bezier(.16,1,.3,1) forwards;
  }

  .hero-cta {
    margin-top:2.8rem;
    display:flex; gap:1rem; flex-wrap:wrap; justify-content:center;
    opacity:0; animation:rise .8s .75s cubic-bezier(.16,1,.3,1) forwards;
  }
  .hero-note {
    margin-top:1.4rem; font-size:.68rem; color:var(--t3); letter-spacing:.06em;
    opacity:0; animation:rise .6s .95s cubic-bezier(.16,1,.3,1) forwards;
  }
  .hero-note em { font-style:normal; color:var(--gold); }

  /* scroll indicator */
  .scroll-ind {
    position:absolute; bottom:2.5rem; left:50%; transform:translateX(-50%);
    display:flex; flex-direction:column; align-items:center; gap:.45rem;
    opacity:0; animation:rise .5s 1.5s forwards;
  }
  .scroll-ind span { font-size:.55rem; letter-spacing:.22em; text-transform:uppercase; color:var(--t3); }
  .sind {
    width:1px; height:44px;
    background:linear-gradient(to bottom,var(--gold),transparent);
    animation:sinPulse 2.4s ease-in-out infinite;
  }
  @keyframes sinPulse { 0%,100%{opacity:1;transform:scaleY(1)} 50%{opacity:.2;transform:scaleY(.35)} }
  @keyframes rise { from{opacity:0;transform:translateY(30px)} to{opacity:1;transform:none} }

  /* ── MARQUEE ── */
  .mq-wrap {
    overflow:hidden; padding:1.4rem 0;
    border-top:1px solid var(--rim); border-bottom:1px solid var(--rim);
    background:rgba(226,197,118,.018);
  }
  .mq-track { display:flex; width:max-content; animation:mqRun 36s linear infinite; }
  .mq-track:hover { animation-play-state:paused; }
  .mi {
    display:flex; align-items:center; gap:1rem; padding:0 2.4rem;
    font-family:'Cormorant Garamond',serif;
    font-size:1.08rem; font-style:italic; font-weight:300;
    color:var(--t3); white-space:nowrap; flex-shrink:0; transition:color .25s;
  }
  .mi:hover { color:var(--t2); }
  .ms { color:var(--gold); font-style:normal; font-size:.6rem; }
  @keyframes mqRun { from{transform:translateX(0)} to{transform:translateX(-50%)} }

  /* ── APPS SECTION ── */
  .apps-section {
    padding:clamp(3rem,6vw,6rem) clamp(1.5rem,5vw,5rem);
    position:relative; overflow:hidden;
  }
  .apps-section::before {
    content:''; position:absolute; inset:0; pointer-events:none;
    background:radial-gradient(ellipse 60% 50% at 50% 50%,rgba(226,197,118,.05),transparent);
  }

  .sec-hd { text-align:center; margin-bottom:4rem; }
  .sec-kicker {
    display:inline-flex; align-items:center; gap:.5rem;
    font-family:'Cinzel Decorative',cursive;
    font-size:.6rem; font-weight:400; letter-spacing:.2em; text-transform:uppercase;
    color:var(--gold2); margin-bottom:1rem;
  }
  .kd { width:20px; height:1px; background:var(--gold2); }

  .sec-h {
    font-family:'Cormorant Garamond',serif;
    font-size:clamp(2rem,4vw,3.6rem); font-weight:300;
    letter-spacing:-.015em; line-height:1.1;
    color:var(--t1);
  }
  .sec-h em { font-style:italic; color:var(--gold); }
  .sec-desc {
    font-family:'Cormorant Garamond',serif;
    font-size:1.15rem; font-style:italic; color:var(--t2);
    max-width:480px; margin:1rem auto 0;
    line-height:1.8;
  }

  /* App cards */
  .apps-grid {
    display:grid; grid-template-columns:1fr 1fr;
    gap:1.5rem; max-width:960px; margin:0 auto;
  }
  @media(max-width:760px){ .apps-grid{grid-template-columns:1fr;} }

  .app-card {
    border:1px solid var(--rim); border-radius:24px;
    text-decoration:none; color:inherit;
    background:var(--ink2);
    padding:2.8rem 2.4rem 2.4rem;
    position:relative; overflow:hidden; cursor:none;
    opacity:0; transform:translateY(22px);
    transition:opacity .75s cubic-bezier(.16,1,.3,1),transform .75s cubic-bezier(.16,1,.3,1),
                border-color .3s,box-shadow .4s;
  }
  .app-card.in { opacity:1; transform:none; }
  .app-card:hover {
    transform:translateY(-7px);
    border-color:rgba(226,197,118,.25);
    box-shadow:0 28px 70px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.05);
  }
  .app-card::before {
    content:''; position:absolute; top:0; left:10%; right:10%; height:1px;
    background:linear-gradient(90deg,transparent,var(--gold),transparent);
    box-shadow:0 0 14px rgba(226,197,118,.35);
    opacity:0; transition:opacity .35s;
  }
  .app-card:hover::before { opacity:1; }
  .app-card::after {
    content:''; position:absolute; inset:0;
    background:linear-gradient(110deg,transparent 38%,rgba(255,255,255,.028) 50%,transparent 62%);
    transform:translateX(-115%); transition:transform .8s ease;
  }
  .app-card:hover::after { transform:translateX(115%); }

  .app-num {
    font-family:'Cormorant Garamond',serif;
    font-size:80px; font-weight:300;
    color:rgba(226,197,118,.09);
    position:absolute; top:10px; right:20px; line-height:1;
    pointer-events:none;
  }
  .app-ey {
    font-family:'Cinzel Decorative',cursive;
    font-size:.58rem; letter-spacing:.2em;
    color:var(--gold2); text-transform:uppercase;
    margin-bottom:1.1rem;
    display:flex; align-items:center; gap:.5rem;
  }
  .pip { width:4px; height:4px; border-radius:50%; background:var(--gold); }

  .app-icon { font-size:2rem; display:block; margin-bottom:1rem; line-height:1; }
  .app-icon-img {
    width:34px; height:34px; border-radius:8px; object-fit:cover;
    display:block; margin-bottom:1rem;
    border:1px solid rgba(226,197,118,.3);
  }

  .app-card h3 {
    font-family:'Cormorant Garamond',serif;
    font-size:clamp(1.6rem,2.5vw,2.2rem); font-weight:300;
    letter-spacing:-.01em; line-height:1.1; margin-bottom:.7rem;
    color:var(--t1);
  }
  .app-card h3 em { font-style:italic; color:var(--gold); }

  .app-card > p {
    font-size:.9rem; color:var(--t2); line-height:1.72; margin-bottom:1.6rem;
  }

  .app-features {
    list-style:none; margin-bottom:2rem;
  }
  .app-features li {
    font-size:.84rem; color:var(--t2);
    padding:.5rem 0; padding-left:1.1rem;
    position:relative;
    border-bottom:1px solid var(--rim);
  }
  .app-features li:last-child { border-bottom:none; }
  .app-features li::before {
    content:''; position:absolute; left:0; top:50%;
    transform:translateY(-50%);
    width:4px; height:4px; border-radius:50%; background:var(--gold);
  }

  .app-cta {
    display:inline-flex; align-items:center; gap:.5rem;
    font-size:.64rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
    padding:.38rem .85rem; border-radius:100px;
    color:var(--gold); border:1px solid rgba(226,197,118,.3);
    background:rgba(226,197,118,.07);
    transition:background .25s,border-color .25s;
    cursor:none;
  }
  .app-card:hover .app-cta { background:rgba(226,197,118,.15); border-color:var(--gold); }

  /* ── GALLERY SECTION ── */
  .showcase-section {
    padding:clamp(3rem,6vw,6rem) clamp(1.5rem,5vw,5rem);
    background:linear-gradient(180deg,transparent,rgba(226,197,118,.025),transparent);
    border-top:1px solid var(--rim);
  }
  .gallery-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
    gap:1.35rem;
    max-width:1400px;
    margin:0 auto;
  }
  .gallery-deck{
    border:1px solid var(--rim);
    border-radius:16px;
    background:var(--ink2);
    padding:1.1rem 1rem 1.3rem;
    transition:transform .28s ease, opacity .28s ease, box-shadow .28s ease, border-color .28s ease;
  }
  .gallery-help{
    text-align:center;
    margin-top:.55rem;
    margin-bottom:1.6rem;
    font-size:.72rem;
    color:var(--gold2);
    letter-spacing:.08em;
    text-transform:uppercase;
  }
  .gallery-title{
    text-align:center;
    font-size:.62rem;
    letter-spacing:.16em;
    text-transform:uppercase;
    color:var(--gold2);
    margin-bottom:1rem;
  }
  .deck-stage{ width:260px; height:350px; margin:50px auto 1rem; position:relative; transition:transform .28s ease; cursor:pointer; }
  .deck-stage-landscape{ width:350px; height:260px; }
  .deck-stage:hover { transform: translateY(-5px); }
  .deck-card{
    position:absolute; inset:0;
    border-radius:12px; overflow:hidden;
    border:1px solid rgba(255,255,255,.08);
    background:#fff;
    transform-origin:bottom center;
    transition:transform .28s ease, box-shadow .28s ease;
  }
  .deck-card img{
    width:100%; height:100%;
    object-fit:cover;
    display:block;
    pointer-events:none;
  }
  .deck-card-0{z-index:5; box-shadow:0 18px 44px rgba(226,197,118,.28),0 5px 12px rgba(0,0,0,.5);}
  .deck-card-1{z-index:4; transform:translate(6px,-6px) rotate(-4deg);}
  .deck-card-2{z-index:3; transform:translate(-8px,-12px) rotate(3deg);}
  .gallery-deck:hover .deck-card-0{transform:translateY(-4px);}
  .deck-meta{text-align:center;font-size:.78rem;color:var(--t2);}



  .gallery-deck.is-expanded{
    grid-column:1 / -1;
    border-color:rgba(226,197,118,.65);
    box-shadow:0 22px 42px rgba(0,0,0,.4);
  }
  .gallery-deck.is-minimized{
    transform:scale(.93);
    opacity:.45;
  }
  .gallery-deck.is-expanded .deck-stage{
    width:100%;
    max-width:min(980px,92vw);
    height:auto;
    min-height:220px;
    margin:1rem auto;
    display:flex;
    gap:1rem;
    overflow-x:auto;
    padding:.4rem .2rem .6rem;
    transform:none;
    scrollbar-width:thin;
  }
  .gallery-deck.is-expanded .deck-stage-landscape{
    min-height:200px;
  }
  .gallery-deck.is-expanded .deck-card{
    position:relative;
    inset:auto;
    transform:none !important;
    flex:0 0 clamp(180px,26vw,260px);
    height:clamp(240px,34vw,340px);
  }
  .gallery-deck.is-expanded .deck-stage-landscape .deck-card{
    flex-basis:clamp(240px,34vw,330px);
    height:clamp(180px,24vw,240px);
  }
  .gallery-deck.is-expanded .deck-card-0,
  .gallery-deck.is-expanded .deck-card-1,
  .gallery-deck.is-expanded .deck-card-2{
    z-index:auto;
  }

  @media (max-width:700px){
    .gallery-deck.is-minimized{
      transform:none;
      opacity:.7;
    }
    .gallery-deck.is-expanded .deck-stage{
      max-width:100%;
    }
  }


  /* ── TOOLS SECTION ── */
  .tools-section {
    padding:clamp(2rem,4vw,4rem) clamp(1.5rem,5vw,5rem);
    border-top:1px solid var(--rim);
  }
  .tools-row {
    display:flex; gap:1rem; justify-content:center; flex-wrap:wrap;
    margin-top:2.8rem;
  }
  .tool-card {
    border:1px solid var(--rim); border-radius:16px;
    background:var(--ink2);
    padding:1.6rem 2rem;
    display:flex; align-items:center; gap:1.1rem;
    min-width:240px; cursor:none;
    transition:border-color .25s,background .25s,transform .25s;
    position:relative; overflow:hidden;
  }
  .tool-card::before {
    content:''; position:absolute; top:0; left:10%; right:10%; height:1px;
    background:linear-gradient(90deg,transparent,var(--gold),transparent);
    opacity:0; transition:opacity .3s;
  }
  .tool-card:hover { border-color:rgba(226,197,118,.25); background:rgba(226,197,118,.04); transform:translateY(-4px); }
  .tool-card:hover::before { opacity:1; }
  .tool-icon { font-size:1.6rem; line-height:1; flex-shrink:0; }
  .tool-name {
    font-family:'Cinzel Decorative',cursive;
    font-size:.6rem; letter-spacing:.2em; color:var(--gold2);
    text-transform:uppercase; margin-bottom:.25rem;
  }
  .tool-desc { font-size:.82rem; font-style:italic; color:var(--t2); font-family:'Cormorant Garamond',serif; }

  /* ── CTA BANNER ── */
  .cta-section {
    padding:clamp(4rem,8vw,7rem) clamp(1.5rem,5vw,5rem);
    text-align:center; position:relative; overflow:hidden;
    border-top:1px solid var(--rim);
  }
  .cta-section::before {
    content:''; position:absolute; inset:0;
    background:radial-gradient(ellipse 70% 60% at 50% 50%,rgba(226,197,118,.07),transparent);
    pointer-events:none;
  }
  .cta-pre {
    font-family:'Cinzel Decorative',cursive;
    font-size:.6rem; letter-spacing:.22em; color:var(--gold2);
    text-transform:uppercase; margin-bottom:1.4rem;
    display:flex; align-items:center; justify-content:center; gap:.6rem;
  }
  .cta-section h2 {
    font-family:'Cormorant Garamond',serif;
    font-size:clamp(2.4rem,5vw,4.5rem); font-weight:300;
    font-style:italic; line-height:1.05; letter-spacing:-.02em;
    color:var(--t1); margin-bottom:1.4rem;
    background:none; -webkit-text-fill-color:var(--t1); animation:none;
  }
  .cta-section h2 em {
    font-style:italic;
    background:linear-gradient(100deg,var(--gold2),var(--gold),#f5d88a);
    -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  }
  .cta-sub {
    font-family:'Cormorant Garamond',serif;
    font-size:1.2rem; font-style:italic; color:var(--t2);
    max-width:440px; margin:0 auto 2.8rem; line-height:1.8;
  }
  .cta-btns { display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }

  /* ── FOOTER ── */
  footer {
    border-top:1px solid var(--rim);
    padding:2rem clamp(1.5rem,5vw,5rem);
    display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1rem;
    background:rgba(3,2,10,.5);
  }
  .foot-brand {
    font-family:'Cormorant Garamond',serif;
    font-size:1.4rem; font-weight:300; font-style:italic; color:var(--t2);
  }
  .foot-links { display:flex; gap:1.8rem; list-style:none; flex-wrap:wrap; }
  .foot-links a {
    font-size:.7rem; letter-spacing:.08em; color:var(--t3);
    text-decoration:none; text-transform:uppercase; transition:color .2s;
  }
  .foot-links a:hover { color:var(--gold); }
  .foot-copy { font-size:.66rem; color:var(--t3); letter-spacing:.04em; }

  /* ── SCROLL REVEAL ── */
  .sr {
    opacity:0; transform:translateY(24px);
    transition:opacity .85s cubic-bezier(.16,1,.3,1), transform .85s cubic-bezier(.16,1,.3,1);
  }
  .sr.in { opacity:1; transform:none; }
  .d1{transition-delay:.1s} .d2{transition-delay:.2s} .d3{transition-delay:.3s} .d4{transition-delay:.4s}


.tools-section {
  padding: clamp(3rem,6vw,6rem) clamp(1.5rem,5vw,5rem);
  border-top: 1px solid var(--rim);
  position: relative;
  overflow: hidden;
}
.tools-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 50% at 50% 100%, rgba(226,197,118,.05), transparent);
  pointer-events: none;
}
 
.tools-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  max-width: 860px;
  margin: 2.8rem auto 0;
}
@media (max-width: 600px) {
  .tools-grid { grid-template-columns: 1fr; }
}
 
.tool-card {
  position: relative;
  border: 1px solid var(--rim);
  border-radius: 20px;
  background: var(--ink2);
  padding: 2.2rem 2rem;
  overflow: hidden;
  cursor: none;
  text-decoration: none;
  color: inherit;
  display: flex;
  gap: 1.4rem;
  align-items: flex-start;
  transition: border-color .3s, transform .3s, box-shadow .3s;
}
.tool-card:hover {
  border-color: rgba(226,197,118,.3);
  transform: translateY(-5px);
  box-shadow: 0 24px 60px rgba(0,0,0,.6);
}
.tool-card::before {
  content: '';
  position: absolute;
  top: 0; left: 10%; right: 10%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: 0;
  transition: opacity .3s;
}
.tool-card:hover::before { opacity: 1; }
.tool-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg,transparent 38%,rgba(255,255,255,.025) 50%,transparent 62%);
  transform: translateX(-115%);
  transition: transform .8s ease;
}
.tool-card:hover::after { transform: translateX(115%); }
 
.tool-icon-wrap {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  border: 1px solid rgba(226,197,118,.2);
  background: rgba(226,197,118,.06);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 1.4rem;
  transition: background .3s, border-color .3s;
}
.tool-card:hover .tool-icon-wrap {
  background: rgba(226,197,118,.12);
  border-color: rgba(226,197,118,.35);
}
 
.tool-body { flex: 1; }
 
.tool-tag {
  font-family: 'Cinzel Decorative', cursive;
  font-size: .52rem;
  letter-spacing: .18em;
  color: var(--gold2);
  text-transform: uppercase;
  margin-bottom: .4rem;
  display: flex;
  align-items: center;
  gap: .4rem;
}
.tool-tag-dot {
  width: 3px; height: 3px;
  border-radius: 50%;
  background: var(--gold);
}
 
.tool-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.45rem;
  font-weight: 300;
  color: var(--t1);
  line-height: 1.1;
  margin-bottom: .5rem;
}
 
.tool-desc {
  font-size: .84rem;
  color: var(--t2);
  line-height: 1.65;
}
 
.tool-pill {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  margin-top: .9rem;
  font-size: .55rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold);
  border: 1px solid rgba(226,197,118,.28);
  background: rgba(226,197,118,.06);
  padding: .22rem .7rem;
  border-radius: 100px;
  transition: background .2s, border-color .2s;
}
.tool-card:hover .tool-pill {
  background: rgba(226,197,118,.14);
  border-color: var(--gold);
}
 
.tool-num {
  position: absolute;
  bottom: 12px; right: 18px;
  font-family: 'Cormorant Garamond', serif;
  font-size: 3.2rem;
  font-weight: 300;
  color: rgba(226,197,118,.07);
  line-height: 1;
  pointer-events: none;
  transition: color .3s;
}
.tool-card:hover .tool-num { color: rgba(226,197,118,.12); }
 
 
/* ── DEVELOPER / CTA SECTION ── */
 
.cta-section {
  padding: clamp(4rem,8vw,7rem) clamp(1.5rem,5vw,5rem);
  border-top: 1px solid var(--rim);
  position: relative;
  overflow: hidden;
}
.cta-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 60% at 50% 50%, rgba(124,92,252,.06), transparent);
  pointer-events: none;
}
.cta-section::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(226,197,118,.25) 35%, rgba(124,92,252,.25) 65%, transparent);
}
 
.dev-grid {
  max-width: 900px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4rem;
  align-items: center;
}
@media (max-width: 700px) {
  .dev-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
    text-align: center;
  }
  .dev-photo-wrap { margin: 0 auto; }
  .dev-links { align-items: center; }
  .dev-badges { justify-content: center; }
  .dev-eyebrow { justify-content: center; }
  .dev-stats { justify-content: center; }
  .dev-tagline { border-left: none; border-top: 2px solid rgba(226,197,118,.3); padding: .8rem 0 0; }
}
 
.dev-photo-wrap {
  position: relative;
  width: 200px;
  flex-shrink: 0;
  padding-bottom: 14px;
}
.dev-photo-frame {
  position: relative;
  width: 200px;
  height: 200px;
}
.dev-photo-frame::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 26px;
  background: linear-gradient(135deg, rgba(226,197,118,.5), rgba(124,92,252,.3), rgba(34,211,238,.2));
  z-index: 0;
}
.dev-photo-frame::after {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 32px;
  border: 1px solid rgba(226,197,118,.12);
  z-index: 0;
}
.dev-photo {
  position: relative;
  z-index: 1;
  width: 200px;
  height: 200px;
  object-fit: cover;
  border-radius: 24px;
  display: block;
  border: none;
  box-shadow: none;
}
.dev-role-chip {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  background: var(--ink2);
  border: 1px solid rgba(226,197,118,.3);
  border-radius: 100px;
  padding: .28rem .85rem;
  font-size: .58rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold);
  z-index: 2;
  font-family: 'DM Sans', sans-serif;
}
 
.dev-eyebrow {
  font-family: 'Cinzel Decorative', cursive;
  font-size: .58rem;
  letter-spacing: .22em;
  color: var(--gold2);
  text-transform: uppercase;
  margin-bottom: .8rem;
  display: flex;
  align-items: center;
  gap: .5rem;
}
.dev-eyebrow-line { width: 18px; height: 1px; background: var(--gold2); }
 
.dev-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 300;
  line-height: 1;
  color: var(--t1);
  margin-bottom: .6rem;
  letter-spacing: -.01em;
}
.dev-name em {
  font-style: italic;
  background: linear-gradient(100deg, var(--gold2), var(--gold), #f5d88a);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
 
.dev-tagline {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.1rem;
  font-style: italic;
  color: var(--t2);
  line-height: 1.75;
  margin-bottom: 1.6rem;
  max-width: 460px;
  border-left: 2px solid rgba(226,197,118,.3);
  padding-left: 1rem;
}
 
.dev-badges {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: 1.8rem;
}
.dev-badge {
  font-size: .62rem;
  font-weight: 500;
  letter-spacing: .06em;
  color: var(--t2);
  border: 1px solid var(--rim2);
  background: rgba(255,255,255,.03);
  padding: .3rem .8rem;
  border-radius: 100px;
}
 
.dev-links {
  display: flex;
  flex-direction: column;
  gap: .6rem;
}
.dev-link-row {
  display: flex;
  align-items: center;
  gap: .85rem;
}
.dev-link-icon {
  width: 32px; height: 32px;
  border-radius: 9px;
  border: 1px solid var(--rim);
  background: rgba(255,255,255,.03);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .85rem;
  flex-shrink: 0;
  transition: border-color .2s, background .2s;
}
.dev-link-row:hover .dev-link-icon {
  border-color: rgba(226,197,118,.3);
  background: rgba(226,197,118,.05);
}
.dev-link-text {
  font-size: .82rem;
  color: var(--t2);
  transition: color .2s;
}
.dev-link-text a {
  color: inherit;
  text-decoration: none;
  transition: color .2s;
}
.dev-link-row:hover .dev-link-text a { color: var(--gold); }
 
.dev-stats {
  display: flex;
  gap: 2rem;
  margin-top: 2rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--rim);
  flex-wrap: wrap;
}
.dev-stat-num {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.8rem;
  font-weight: 300;
  color: var(--gold);
  line-height: 1;
}
.dev-stat-label {
  font-size: .62rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--t3);
  margin-top: .25rem;
}
 
 
/* ── SEO SECTION ── */
 
.seo-section {
  padding: 4rem clamp(1.5rem,5vw,5rem) 5rem;
  max-width: 1000px;
  margin: 0 auto;
  position: relative;
}
.seo-section::before {
  content: '';
  display: block;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(226,197,118,.18) 30%, rgba(124,92,252,.15) 70%, transparent);
  margin-bottom: 3.5rem;
}
 
.seo-eyebrow {
  text-align: center;
  font-family: 'Cinzel Decorative', cursive;
  font-size: .54rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--t3);
  margin-bottom: 2.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
}
.seo-eyebrow-line { width: 28px; height: 1px; background: var(--t3); }
 
.seo-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--rim);
  border: 1px solid var(--rim);
  border-radius: 18px;
  overflow: hidden;
}
@media (max-width: 640px) {
  .seo-grid { grid-template-columns: 1fr; }
}
 
.seo-cell {
  background: var(--ink2);
  padding: 2rem 1.8rem 2.2rem;
  position: relative;
  overflow: hidden;
  transition: background .25s;
}
.seo-cell:hover { background: rgba(226,197,118,.025); }
.seo-cell::before {
  content: '';
  position: absolute;
  top: 0; left: 15%; right: 15%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold2), transparent);
  opacity: 0;
  transition: opacity .3s;
}
.seo-cell:hover::before { opacity: 1; }
 
.seo-num {
  font-family: 'Cormorant Garamond', serif;
  font-size: 4rem;
  font-weight: 300;
  color: rgba(226,197,118,.055);
  line-height: 1;
  position: absolute;
  bottom: 10px; right: 16px;
  pointer-events: none;
  transition: color .3s;
}
.seo-cell:hover .seo-num { color: rgba(226,197,118,.1); }
 
.seo-icon {
  font-size: .95rem;
  margin-bottom: .9rem;
  display: block;
  line-height: 1;
}
.seo-cell h2 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.2rem;
  font-weight: 300;
  font-style: italic;
  color: var(--gold);
  line-height: 1.25;
  margin-bottom: .65rem;
  letter-spacing: -.01em;
}
.seo-cell p {
  font-size: .82rem;
  color: var(--t3);
  line-height: 1.75;
  position: relative;
  z-index: 1;
}
 
.seo-note {
  text-align: center;
  margin-top: 2rem;
  font-size: .64rem;
  letter-spacing: .1em;
  color: rgba(78,72,104,.5);
  text-transform: uppercase;
}