:root{
      --bg0:#03040a;
      --bg1:#080a14;
      --bg2:#0e101c;
      --card:rgba(14,16,28,.88);
      --card-strong:rgba(8,10,20,.95);
      --card-soft:rgba(255,255,255,.04);
      --stroke:rgba(148,163,220,.09);
      --stroke-strong:rgba(167,139,250,.14);
      --text:#eef0f8;
      --muted:rgba(220,225,240,.76);
      --muted-2:rgba(146,152,176,.58);
      --brand:#3a7cff;
      --brand-2:#7aa6ff;
      --brand-3:#b3ceff;
      --gold:#ffd15c;
      --success:#59e6b4;
      --shadow:0 32px 100px rgba(0,0,0,.52);
      --shadow-soft:0 18px 48px rgba(3,10,24,.4);
      --shadow-card:0 40px 120px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.06) inset;
      --radius-xl:32px;
      --radius-lg:24px;
      --radius-md:18px;
      --container:1480px;
      --space-xs:8px;
      --space-sm:16px;
      --space-md:24px;
      --space-lg:36px;
      --space-xl:48px;
      --space-2xl:64px;
      --ease-out-expo:cubic-bezier(0.16, 1, 0.3, 1);
      --ease-spring:cubic-bezier(0.34, 1.56, 0.64, 1);
      --ease-luxe:cubic-bezier(0.25, 0.46, 0.45, 0.94);
      --dur-reveal:1.05s;
    }

    *{ box-sizing:border-box; }
    html{ scroll-behavior:smooth; }
    html,body{ min-height:100%; }
    body{
      margin:0;
      color:var(--text);
      font-family:"Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      background-color:var(--bg0);
      background-image:
        url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.038'/%3E%3C/svg%3E"),
        radial-gradient(ellipse 90% 65% at 0% -4%, rgba(37,99,235,.20), transparent 55%),
        radial-gradient(ellipse 70% 55% at 50% -8%, rgba(139,92,246,.14), transparent 52%),
        radial-gradient(ellipse 80% 60% at 100% 0%, rgba(212,175,55,.08), transparent 50%),
        radial-gradient(ellipse 55% 45% at 88% 18%, rgba(244,114,182,.07), transparent 48%),
        radial-gradient(ellipse 75% 55% at 50% 108%, rgba(20,184,166,.10), transparent 58%),
        radial-gradient(ellipse 50% 40% at 12% 85%, rgba(99,102,241,.09), transparent 52%),
        radial-gradient(ellipse 40% 35% at 75% 70%, rgba(56,189,248,.05), transparent 50%),
        linear-gradient(165deg, var(--bg0) 0%, var(--bg1) 24%, var(--bg2) 56%, #060810 100%);
      background-attachment:fixed;
      overflow-x:hidden;
      position:relative;
    }

    body::before,
    body::after{
      content:"";
      position:fixed;
      inset:auto;
      pointer-events:none;
      z-index:0;
      filter:blur(6px);
    }

    body::before{
      width:720px;
      height:720px;
      top:-280px;
      left:-160px;
      border-radius:50%;
      background:radial-gradient(circle, rgba(37,99,235,.13), rgba(139,92,246,.07) 45%, transparent 68%);
      filter:blur(72px);
      animation:floatGlow 22s ease-in-out infinite;
    }

    body::after{
      width:600px;
      height:600px;
      right:-140px;
      bottom:-200px;
      border-radius:50%;
      background:radial-gradient(circle, rgba(244,114,182,.09), rgba(20,184,166,.07) 40%, rgba(212,175,55,.04) 55%, transparent 72%);
      filter:blur(88px);
      animation:floatGlow 26s ease-in-out infinite reverse;
    }

    .ambient-grid,
    .ambient-grid::before,
    .ambient-grid::after{
      position:fixed;
      inset:0;
      pointer-events:none;
      z-index:0;
    }

    .ambient-grid{
      background-image:
        linear-gradient(rgba(99,102,241,.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(56,189,248,.02) 1px, transparent 1px);
      background-size: 52px 52px;
      mask-image: radial-gradient(ellipse 90% 80% at 50% 30%, rgba(0,0,0,.55) 0%, transparent 72%);
      -webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 30%, rgba(0,0,0,.55) 0%, transparent 72%);
      opacity:1;
    }

    .ambient-grid::before,
    .ambient-grid::after{
      content:"";
      inset:auto;
      border-radius:999px;
      background:linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.25), rgba(255,255,255,0));
      opacity:.18;
      filter:blur(1px);
    }

    .ambient-grid::before{
      width:520px;
      height:1px;
      top:18%;
      left:-10%;
      opacity:.12;
      background:linear-gradient(90deg, transparent, rgba(37,99,235,.28), rgba(167,139,250,.26), rgba(212,175,55,.18), transparent);
      animation:scanX 22s linear infinite;
    }

    .ambient-grid::after{
      width:1px;
      height:380px;
      top:10%;
      left:22%;
      opacity:.08;
      background:linear-gradient(180deg, transparent, rgba(139,92,246,.20), rgba(20,184,166,.12), transparent);
      animation:scanY 18s linear infinite;
    }

    .page{
      position:relative;
      z-index:1;
      min-height:100vh;
      padding:var(--space-xl) clamp(22px, 5vw, 48px) var(--space-2xl);
    }

    .topbar{
      max-width:var(--container);
      margin:0 auto var(--space-md);
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:18px;
      color:var(--muted);
      font-size:13px;
      letter-spacing:.08em;
      text-transform:uppercase;
    }

    .topbar-left,
    .topbar-right{
      display:flex;
      align-items:center;
      gap:12px;
      flex-wrap:wrap;
    }

    .signal-pill,
    .mini-chip{
      display:inline-flex;
      align-items:center;
      gap:10px;
      padding:10px 16px;
      border-radius:999px;
      border:1px solid rgba(255,255,255,.1);
      background:rgba(255,255,255,.045);
      backdrop-filter:blur(16px);
      box-shadow:var(--shadow-soft);
      transition:transform 0.45s var(--ease-out-expo), border-color 0.35s ease, box-shadow 0.45s ease;
    }

    html.ux-ready .signal-pill,
    html.ux-ready .mini-chip{
      animation:chipSettle 0.7s var(--ease-out-expo) backwards;
    }

    html.ux-ready .topbar-left .signal-pill{ animation-delay: 0.05s; }
    html.ux-ready .topbar-left .mini-chip{ animation-delay: 0.12s; }
    html.ux-ready .topbar-right .mini-chip:nth-of-type(1){ animation-delay: 0.18s; }
    html.ux-ready .topbar-right .mini-chip:nth-of-type(2){ animation-delay: 0.24s; }

    .signal-pill:hover,
    .mini-chip:hover{
      transform:translateY(-2px);
      border-color:rgba(255,255,255,.16);
      box-shadow:0 20px 50px rgba(3,12,28,.45);
    }

    .signal-dot{
      width:9px;
      height:9px;
      border-radius:50%;
      background:var(--success);
      box-shadow:0 0 0 6px rgba(89,230,180,.14);
      animation:pulseDot 1.8s ease-in-out infinite;
    }

    .hero-shell{
      max-width:var(--container);
      margin:0 auto;
      position:relative;
      display:flex;
      flex-direction:column;
      overflow-x:hidden;
      overflow-y:visible;
      border-radius:var(--radius-xl);
      border:1px solid rgba(129,140,248,.14);
      background:
        linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02)),
        linear-gradient(135deg, rgba(14,16,30,.94), rgba(6,8,18,.96));
      box-shadow:var(--shadow-card);
      backdrop-filter:blur(22px);
      transition:box-shadow 0.6s var(--ease-out-expo), transform 0.6s var(--ease-out-expo);
    }

    html.ux-ready .hero-shell{
      animation:heroShellReveal 1.15s var(--ease-out-expo) both;
    }

    @media (hover:hover) and (pointer:fine){
      .hero-shell:hover{
        box-shadow:
          0 40px 120px rgba(0,0,0,.48),
          0 0 0 1px rgba(129,140,248,.14) inset,
          0 0 64px rgba(37,99,235,.08);
      }
    }

    .hero-shell::before{
      content:"";
      position:absolute;
      inset:-1px;
      border-radius:inherit;
      padding:1px;
      background:linear-gradient(135deg, rgba(37,99,235,.16), rgba(255,255,255,.02), rgba(167,139,250,.2));
      -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
      -webkit-mask-composite:xor;
      mask-composite:exclude;
      pointer-events:none;
      opacity:.9;
    }

    .hero-shell::after{
      content:"";
      position:absolute;
      inset:auto -15% -35% auto;
      width:520px;
      height:520px;
      border-radius:50%;
      background:radial-gradient(circle, rgba(139,92,246,.2), rgba(37,99,235,.1) 50%, transparent 60%);
      pointer-events:none;
      z-index:0;
    }

    /* Mobile-first: single column, no absolute overlap */
    .hero-layout{
      display:grid;
      grid-template-columns:1fr;
      gap:var(--space-lg);
      align-items:start;
      padding:var(--space-lg) var(--space-md) var(--space-xl);
      position:relative;
      z-index:1;
    }

    html.ux-ready .hero-layout > .hero-copy{
      animation:colReveal var(--dur-reveal) var(--ease-luxe) 0.06s both;
    }
    html.ux-ready .hero-layout > .dashboard-preview{
      animation:colReveal var(--dur-reveal) var(--ease-luxe) 0.14s both;
    }
    html.ux-ready .hero-layout > .form-column{
      animation:colReveal var(--dur-reveal) var(--ease-luxe) 0.22s both;
    }

    .hero-copy{
      position:relative;
      padding:var(--space-sm) 0 var(--space-md);
      display:flex;
      flex-direction:column;
      justify-content:flex-start;
      min-height:0;
    }

    .eyebrow{
      display:inline-flex;
      align-items:center;
      gap:12px;
      width:max-content;
      max-width:100%;
      padding:12px 20px;
      border-radius:999px;
      border:1px solid rgba(255,255,255,.12);
      background:rgba(255,255,255,.055);
      color:#e4ecff;
      font-size:12px;
      letter-spacing:.18em;
      text-transform:uppercase;
      font-weight:700;
      box-shadow:var(--shadow-soft);
    }

    .eyebrow .spark{
      width:8px;
      height:8px;
      border-radius:50%;
      background:var(--gold);
      box-shadow:0 0 0 7px rgba(255,209,92,.1);
    }

    h1{
      margin:var(--space-md) 0 var(--space-md);
      font-family:"Plus Jakarta Sans", "Inter", sans-serif;
      font-size:clamp(38px, 4.8vw, 68px);
      line-height:1.14;
      letter-spacing:-.042em;
      font-weight:800;
      max-width:min(840px, 100%);
    }

    .gradient-text{
      background:linear-gradient(135deg, #ffffff 0%, #dbe7ff 26%, #86adff 58%, #ffffff 100%);
      -webkit-background-clip:text;
      background-clip:text;
      color:transparent;
      background-size:200% 200%;
      animation:gradientShift 18s ease-in-out infinite;
    }

    .hero-subtitle{
      max-width:min(740px, 100%);
      margin:0 0 var(--space-xl);
      color:var(--muted);
      font-size:clamp(17px, 1.35vw, 20px);
      line-height:1.75;
      letter-spacing:.01em;
      font-weight:500;
    }

    .stat-row{
      display:flex;
      flex-wrap:wrap;
      gap:18px;
      margin-bottom:var(--space-xl);
    }

    .stat-card{
      min-width:168px;
      flex:1 1 176px;
      padding:22px 22px 20px;
      border-radius:var(--radius-lg);
      background:rgba(255,255,255,.045);
      border:1px solid rgba(255,255,255,.1);
      box-shadow:var(--shadow-soft);
      position:relative;
      overflow:hidden;
      transition:transform 0.5s var(--ease-out-expo), border-color 0.35s ease, box-shadow 0.5s ease;
    }

    .stat-card:hover{
      transform:translateY(-3px);
      border-color:rgba(255,255,255,.14);
      box-shadow:0 22px 56px rgba(3,12,28,.42);
    }

    .stat-card::before{
      content:"";
      position:absolute;
      inset:0 auto 0 0;
      width:3px;
      background:linear-gradient(180deg, var(--brand-3), var(--brand));
      opacity:.9;
    }

    .stat-value{
      display:block;
      font-size:28px;
      font-weight:800;
      letter-spacing:-.04em;
      color:#fff;
    }

    .stat-label{
      display:block;
      margin-top:8px;
      color:var(--muted-2);
      font-size:12px;
      letter-spacing:.13em;
      text-transform:uppercase;
      font-weight:700;
    }

    .trust-row{
      display:flex;
      flex-wrap:wrap;
      gap:14px;
      align-items:center;
    }

    .trust-chip{
      display:inline-flex;
      align-items:center;
      gap:12px;
      padding:14px 18px;
      border-radius:18px;
      background:rgba(255,255,255,.042);
      border:1px solid rgba(255,255,255,.1);
      color:#edf3ff;
      font-size:14px;
      font-weight:600;
      letter-spacing:.015em;
      line-height:1.45;
      transition:transform 0.45s var(--ease-out-expo), border-color 0.3s ease, background 0.35s ease;
    }

    .trust-chip:hover{
      transform:translateY(-2px);
      background:rgba(255,255,255,.06);
      border-color:rgba(122,166,255,.22);
    }

    .trust-chip i{
      width:10px;
      height:10px;
      border-radius:50%;
      background:linear-gradient(135deg, #89b4ff, #2f76ff);
      box-shadow:0 0 0 6px rgba(47,118,255,.12);
      flex:0 0 auto;
    }

    .dashboard-preview{
      position:relative;
      display:flex;
      align-items:center;
      justify-content:center;
      padding:var(--space-sm) 0;
      min-height:0;
    }

    .preview-glow{
      position:absolute;
      inset:10% 12% auto;
      height:280px;
      background:radial-gradient(circle, rgba(53,113,255,.34), transparent 68%);
      filter:blur(24px);
      pointer-events:none;
      animation:floatGlow 12s ease-in-out infinite;
    }

    .preview-card{
      width:min(100%, 520px);
      position:relative;
      padding:var(--space-md);
      border-radius:28px;
      background:linear-gradient(180deg, rgba(14,26,48,.95), rgba(9,18,35,.96));
      border:1px solid rgba(255,255,255,.1);
      box-shadow:0 28px 80px rgba(0,0,0,.46);
      overflow:hidden;
      transform:perspective(1200px) rotateY(-5deg) rotateX(3deg);
      transform-style:preserve-3d;
      animation:tiltFloat 14s ease-in-out infinite;
      transition:box-shadow 0.85s var(--ease-luxe);
    }

    .preview-card:hover{
      box-shadow:0 40px 100px rgba(0,0,0,.52);
    }

    .preview-card::before{
      content:"";
      position:absolute;
      inset:0;
      background:linear-gradient(120deg, transparent 0%, rgba(255,255,255,.06) 28%, transparent 54%);
      transform:translateX(-120%);
      animation:sheen 5.8s linear infinite;
      pointer-events:none;
    }

    .preview-top{
      display:flex;
      align-items:center;
      justify-content:space-between;
      margin-bottom:18px;
    }

    .window-dots{
      display:flex;
      gap:7px;
    }

    .window-dots span{
      width:10px;
      height:10px;
      border-radius:50%;
      background:rgba(255,255,255,.2);
    }

    .window-dots span:nth-child(1){ background:#ff6f7f; }
    .window-dots span:nth-child(2){ background:#ffd36f; }
    .window-dots span:nth-child(3){ background:#62e6ae; }

    .preview-badge{
      padding:8px 12px;
      border-radius:999px;
      background:rgba(255,255,255,.05);
      border:1px solid rgba(255,255,255,.08);
      color:var(--muted);
      font-size:12px;
      letter-spacing:.12em;
      text-transform:uppercase;
      font-weight:700;
    }

    .preview-header{
      display:grid;
      grid-template-columns:1.1fr .9fr;
      gap:14px;
      margin-bottom:16px;
    }

    .preview-hero,
    .preview-panel,
    .mini-panel,
    .data-panel,
    .stack-panel,
    .activity-panel{
      border-radius:20px;
      border:1px solid rgba(255,255,255,.08);
      background:rgba(255,255,255,.04);
      position:relative;
      overflow:hidden;
    }

    .preview-hero{
      min-height:140px;
      padding:18px;
      background:
        radial-gradient(circle at 85% 15%, rgba(102,146,255,.28), transparent 38%),
        linear-gradient(135deg, rgba(42,73,144,.66), rgba(10,25,49,.82));
    }

    .preview-hero h3{
      margin:0 0 10px;
      font-size:20px;
      line-height:1.15;
      font-weight:800;
      letter-spacing:-.03em;
    }

    .preview-hero p{
      margin:0;
      color:var(--muted);
      font-size:13px;
      line-height:1.7;
    }

    .preview-panel{
      min-height:140px;
      padding:18px;
    }

    .ring-wrap{
      display:flex;
      align-items:center;
      justify-content:center;
      height:100%;
      position:relative;
    }

    .ring{
      width:108px;
      height:108px;
      border-radius:50%;
      background:conic-gradient(var(--brand-2) 0 295deg, rgba(255,255,255,.12) 295deg 360deg);
      display:grid;
      place-items:center;
      animation:ringSpin 14s linear infinite;
    }

    .ring::after{
      content:"";
      width:76px;
      height:76px;
      border-radius:50%;
      background:linear-gradient(180deg, rgba(8,17,33,.98), rgba(10,18,36,.98));
      border:1px solid rgba(255,255,255,.08);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
    }

    .ring-label{
      position:absolute;
      font-size:22px;
      font-weight:800;
      letter-spacing:-.04em;
    }

    .preview-grid{
      display:grid;
      grid-template-columns:repeat(3, 1fr);
      gap:12px;
      margin-bottom:14px;
    }

    .mini-panel{
      min-height:98px;
      padding:16px;
    }

    .mini-panel strong{
      display:block;
      font-size:24px;
      font-weight:800;
      letter-spacing:-.04em;
      margin-bottom:10px;
    }

    .mini-panel span,
    .data-panel small,
    .stack-panel small,
    .activity-panel small{
      color:var(--muted-2);
      text-transform:uppercase;
      letter-spacing:.12em;
      font-size:11px;
      font-weight:700;
    }

    .preview-bottom{
      display:grid;
      grid-template-columns:1.05fr .95fr;
      gap:12px;
    }

    .data-panel,
    .stack-panel,
    .activity-panel{
      padding:16px;
      min-height:156px;
    }

    .chart{
      display:flex;
      align-items:flex-end;
      gap:8px;
      height:82px;
      margin-top:14px;
    }

    .chart i{
      display:block;
      flex:1;
      border-radius:999px 999px 8px 8px;
      background:linear-gradient(180deg, rgba(149,184,255,.95), rgba(43,109,255,.42));
      animation:barPulse 2.8s ease-in-out infinite;
      box-shadow:0 8px 20px rgba(43,109,255,.18);
    }

    .chart i:nth-child(1){ height:48%; animation-delay:0s; }
    .chart i:nth-child(2){ height:72%; animation-delay:.2s; }
    .chart i:nth-child(3){ height:60%; animation-delay:.45s; }
    .chart i:nth-child(4){ height:88%; animation-delay:.15s; }
    .chart i:nth-child(5){ height:78%; animation-delay:.35s; }
    .chart i:nth-child(6){ height:96%; animation-delay:.5s; }

    .stack-lines,
    .activity-lines{
      margin-top:14px;
      display:grid;
      gap:10px;
    }

    .stack-lines span,
    .activity-lines span{
      display:block;
      height:12px;
      border-radius:999px;
      background:linear-gradient(90deg, rgba(255,255,255,.12), rgba(255,255,255,.04));
      position:relative;
      overflow:hidden;
    }

    .stack-lines span::after,
    .activity-lines span::after{
      content:"";
      position:absolute;
      inset:0 auto 0 0;
      border-radius:inherit;
      background:linear-gradient(90deg, rgba(105,162,255,.95), rgba(62,116,255,.34));
    }

    .stack-lines span:nth-child(1)::after{ width:84%; }
    .stack-lines span:nth-child(2)::after{ width:63%; }
    .stack-lines span:nth-child(3)::after{ width:90%; }
    .activity-lines span:nth-child(1)::after{ width:74%; }
    .activity-lines span:nth-child(2)::after{ width:88%; }
    .activity-lines span:nth-child(3)::after{ width:58%; }

    .form-column{
      position:relative;
      width:100%;
      max-width:100%;
      display:flex;
      align-items:stretch;
      justify-content:center;
      pointer-events:auto;
      padding:0;
      min-width:0;
      container-type:inline-size;
      container-name:toolpanel;
    }

    .generator-card{
      width:100%;
      max-width:640px;
      pointer-events:auto;
      position:relative;
      border-radius:calc(var(--radius-xl) - 2px);
      border:1px solid rgba(129,140,248,.13);
      background:
        linear-gradient(165deg, rgba(14,16,28,.97) 0%, rgba(6,8,18,.99) 100%);
      box-shadow:
        0 32px 100px rgba(0,0,0,.48),
        0 0 0 1px rgba(129,140,248,.05) inset;
      overflow:visible;
      min-width:0;
      transition:transform 0.65s var(--ease-luxe), box-shadow 0.65s var(--ease-luxe);
    }

    .generator-card:hover{
      transform:translateY(-2px);
      box-shadow:
        0 36px 110px rgba(0,0,0,.5),
        0 0 0 1px rgba(167,139,250,.12) inset,
        0 0 48px rgba(99,102,241,.1);
    }

    html.ux-ready .form-surface{
      animation:surfaceBloom 0.85s var(--ease-luxe) 0.4s both;
    }

    .generator-card::before{
      content:"";
      position:absolute;
      inset:0;
      background:
        radial-gradient(circle at top right, rgba(139,92,246,.12), transparent 28%),
        linear-gradient(120deg, transparent 0%, rgba(255,255,255,.04) 24%, transparent 50%);
      pointer-events:none;
    }

    .card-orbit{
      position:absolute;
      inset:18px 18px auto auto;
      width:108px;
      height:108px;
      border-radius:50%;
      border:1px solid rgba(255,255,255,.08);
      opacity:.75;
      pointer-events:none;
    }

    .card-orbit::before,
    .card-orbit::after{
      content:"";
      position:absolute;
      border-radius:50%;
    }

    .card-orbit::before{
      inset:12px;
      border:1px solid rgba(255,255,255,.07);
    }

    .card-orbit::after{
      width:12px;
      height:12px;
      top:8px;
      left:50%;
      margin-left:-6px;
      background:var(--gold);
      box-shadow:0 0 0 6px rgba(255,209,92,.12);
      animation:orbit 6s linear infinite;
      transform-origin:0 46px;
    }

    .generator-head{
      padding:var(--space-xl) var(--space-lg) var(--space-md);
      position:relative;
    }

    .generator-head h2{
      margin:0;
      font-family:"Plus Jakarta Sans", sans-serif;
      font-size:clamp(26px, 2.4vw, 34px);
      line-height:1.18;
      letter-spacing:-.035em;
      font-weight:800;
      max-width:100%;
      overflow-wrap:anywhere;
    }

    .generator-head p{
      margin:var(--space-sm) 0 0;
      max-width:100%;
      color:var(--muted);
      font-size:15px;
      line-height:1.72;
      overflow-wrap:anywhere;
    }

    .badge-row{
      display:flex;
      gap:12px;
      flex-wrap:wrap;
      margin-top:var(--space-md);
    }

    .badge-row span{
      display:inline-flex;
      align-items:center;
      gap:10px;
      padding:11px 16px;
      border-radius:999px;
      background:rgba(255,255,255,.05);
      border:1px solid rgba(255,255,255,.1);
      color:#eef4ff;
      font-size:12px;
      font-weight:700;
      letter-spacing:.1em;
      text-transform:uppercase;
      transition:transform 0.4s var(--ease-out-expo), border-color 0.3s ease;
    }

    .badge-row span:hover{
      transform:translateY(-1px);
      border-color:rgba(122,166,255,.25);
    }

    .badge-row span i{
      width:7px;
      height:7px;
      border-radius:50%;
      background:var(--success);
      box-shadow:0 0 0 5px rgba(89,230,180,.08);
    }

    .form-shell{
      padding:0 var(--space-lg) var(--space-xl);
      position:relative;
    }

    .form-surface{
      border-radius:var(--radius-lg);
      border:1px solid rgba(255,255,255,.1);
      background:rgba(255,255,255,.035);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
      padding:var(--space-lg) var(--space-lg) var(--space-xl);
      backdrop-filter:blur(18px);
      min-width:0;
    }

    .surface-top{
      display:flex;
      align-items:center;
      justify-content:space-between;
      flex-wrap:wrap;
      gap:var(--space-sm) var(--space-md);
      padding-bottom:var(--space-lg);
      margin-bottom:var(--space-lg);
      border-bottom:1px solid rgba(255,255,255,.09);
      position:relative;
    }

    .surface-top::after{
      content:"";
      position:absolute;
      left:0;
      bottom:-1px;
      width:40%;
      height:1px;
      background:linear-gradient(90deg, rgba(122,166,255,.5), transparent);
      opacity:.85;
      pointer-events:none;
    }

    .surface-top h3{
      margin:0;
      font-size:13px;
      letter-spacing:.2em;
      text-transform:uppercase;
      color:rgba(232,239,255,.82);
      font-weight:800;
    }

    .surface-meter{
      display:flex;
      align-items:center;
      gap:12px;
      color:var(--muted-2);
      font-size:12px;
      font-weight:700;
      letter-spacing:.1em;
      text-transform:uppercase;
    }

    .surface-meter b{
      color:#fff;
      font-size:13px;
      letter-spacing:.14em;
      padding:6px 12px;
      border-radius:999px;
      background:rgba(58,124,255,.18);
      border:1px solid rgba(122,166,255,.28);
    }

    form{ margin:0; min-width:0; }

    .grid{
      display:grid;
      grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);
      gap:22px 20px;
    }

    .full{ grid-column:1 / -1; }

    .field{
      position:relative;
      min-width:0;
    }

    /* Stack title + hint vertically so labels never collide with the next column */
    label:not(.ms-option){
      display:flex;
      flex-direction:column;
      align-items:flex-start;
      justify-content:flex-start;
      gap:6px;
      margin:0 0 10px;
      font-size:12px;
      letter-spacing:.12em;
      text-transform:uppercase;
      color:rgba(232,239,255,.88);
      font-weight:800;
      line-height:1.35;
      word-wrap:break-word;
      overflow-wrap:anywhere;
    }

    .field-hint{
      color:rgba(232,239,255,.58);
      font-size:10px;
      letter-spacing:.06em;
      font-weight:700;
      text-transform:uppercase;
      line-height:1.4;
      max-width:100%;
      text-wrap:pretty;
    }

    .field-group__head{
      display:flex;
      flex-direction:column;
      gap:6px;
      margin-bottom:16px;
    }

    .field-group__title{
      font-size:12px;
      font-weight:800;
      letter-spacing:.12em;
      text-transform:uppercase;
      color:rgba(232,239,255,.92);
      line-height:1.35;
    }

    .field-group__hint{
      font-size:12px;
      font-weight:500;
      letter-spacing:.02em;
      text-transform:none;
      color:rgba(232,239,255,.58);
      line-height:1.45;
      text-wrap:pretty;
      max-width:100%;
    }

    .social-links-group{
      padding:18px 18px 20px;
      border-radius:var(--radius-md);
      border:1px solid rgba(255,255,255,.1);
      background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.02));
    }

    .social-links-grid{
      display:grid;
      grid-template-columns:repeat(3, minmax(0, 1fr));
      gap:16px 14px;
    }

    @container toolpanel (max-width: 720px){
      .social-links-grid{
        grid-template-columns:minmax(0, 1fr);
        gap:14px;
      }
    }

    /* Narrow tool panel: one field per row so inputs and labels are never clipped */
    @container toolpanel (max-width: 560px){
      #generatorForm .grid{
        grid-template-columns:minmax(0, 1fr);
        gap:18px;
      }
    }

    input,
    select,
    textarea{
      width:100%;
      max-width:100%;
      min-width:0;
      height:56px;
      padding:0 18px;
      border-radius:var(--radius-md);
      border:1px solid rgba(255,255,255,.12);
      background:linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.035));
      color:var(--text);
      outline:none;
      font:600 15px/1 "Inter", sans-serif;
      letter-spacing:.01em;
      box-shadow:inset 0 1px 0 rgba(255,255,255,.07), 0 0 0 0 rgba(58,124,255,0);
      transition:transform 0.35s var(--ease-out-expo), border-color 0.3s ease, background 0.3s ease, box-shadow 0.35s ease;
      appearance:none;
      -webkit-appearance:none;
      -moz-appearance:none;
    }

    textarea{
      height:auto;
      min-height:120px;
      padding:14px 18px;
      resize:vertical;
      line-height:1.5;
    }

    input::placeholder,
    textarea::placeholder{ color:rgba(232,239,255,.34); }

    input:hover,
    select:hover,
    textarea:hover{
      border-color:rgba(255,255,255,.16);
      background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.04));
    }

    input:focus,
    select:focus,
    textarea:focus{
      border-color:rgba(122,166,255,.65);
      background:linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.05));
      box-shadow:0 0 0 4px rgba(58,124,255,.18);
      transform:translateY(-1px);
    }

    select{
      padding-right:44px;
      background-image:
        linear-gradient(45deg, transparent 50%, rgba(232,239,255,.8) 50%),
        linear-gradient(135deg, rgba(232,239,255,.8) 50%, transparent 50%);
      background-position:calc(100% - 20px) 23px, calc(100% - 14px) 23px;
      background-size:6px 6px, 6px 6px;
      background-repeat:no-repeat;
    }

    option{
      background:#0f1b33;
      color:#f5f8ff;
    }

    /* Premium multi-select dropdown (states/cities coverage scope) */
    .ms-wrap{
      position:relative;
      width:100%;
    }

    .ms-trigger{
      width:100%;
      max-width:100%;
      min-width:0;
      height:56px;
      padding:0 18px;
      border-radius:var(--radius-md);
      border:1px solid rgba(255,255,255,.12);
      background:linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.035));
      color:var(--text);
      outline:none;
      font:600 15px/1 "Inter", sans-serif;
      letter-spacing:.01em;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      cursor:pointer;
      box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
      transition:border-color .18s ease, background .18s ease, box-shadow .18s ease, transform .16s ease;
    }

    .ms-trigger:hover{
      border-color:rgba(255,255,255,.16);
      background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.04));
    }

    .ms-trigger > span:first-child{
      min-width:0;
      flex:1 1 auto;
      overflow:hidden;
      text-overflow:ellipsis;
      white-space:nowrap;
      text-align:left;
    }

    .ms-trigger:focus{
      border-color:rgba(98,148,255,.66);
      background:linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.045));
      box-shadow:0 0 0 4px rgba(43,109,255,.12);
      transform:translateY(-1px);
    }

    .ms-caret{
      width:10px;
      height:10px;
      border-right:2px solid rgba(232,239,255,.85);
      border-bottom:2px solid rgba(232,239,255,.85);
      transform:rotate(45deg);
      margin-top:-2px;
      opacity:.9;
    }

    .ms-dropdown{
      position:absolute;
      left:0;
      right:0;
      top:64px;
      z-index:60;
      display:none;
      border-radius:16px;
      border:1px solid rgba(255,255,255,.1);
      background:rgba(12,14,26,.92);
      backdrop-filter:blur(14px);
      box-shadow:0 18px 60px rgba(0,0,0,.55);
      overflow:hidden;
    }

    .ms-search-wrap{
      padding:10px 10px 0;
    }

    .ms-search{
      width:100%;
      height:44px;
      padding:0 14px 0 40px;
      border-radius:12px;
      border:1px solid rgba(255,255,255,.09);
      background:rgba(255,255,255,.04);
      color:var(--text);
      font:500 14px/1 "Inter", sans-serif;
      outline:none;
      background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2398b4e8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E");
      background-repeat:no-repeat;
      background-position:14px center;
      transition:border-color .18s ease, box-shadow .18s ease;
    }

    .ms-search:focus{
      border-color:rgba(98,148,255,.5);
      box-shadow:0 0 0 3px rgba(43,109,255,.12);
    }

    .ms-search::placeholder{
      color:rgba(232,239,255,.42);
    }

    .ms-actions{
      display:flex;
      gap:10px;
      padding:10px;
      border-bottom:1px solid rgba(255,255,255,.07);
    }

    .ms-action{
      flex:1;
      height:40px;
      border-radius:12px;
      border:1px solid rgba(255,255,255,.09);
      background:rgba(255,255,255,.04);
      color:rgba(245,248,255,.9);
      font:700 12px/1 "Plus Jakarta Sans", sans-serif;
      letter-spacing:.12em;
      text-transform:uppercase;
      cursor:pointer;
      transition:transform .16s ease, background .18s ease, border-color .18s ease;
    }

    .ms-action:hover{
      transform:translateY(-1px);
      border-color:rgba(255,255,255,.16);
      background:rgba(255,255,255,.06);
    }

    .ms-action.ms-clear{
      background:rgba(255,255,255,.03);
      border-color:rgba(255,255,255,.07);
    }

    .ms-list{
      max-height:min(280px, 42vh);
      overflow:auto;
      padding:10px;
      background:rgba(0,0,0,.1);
    }

    .ms-list input[type="checkbox"]{
      accent-color:#2b6dff;
      width:16px;
      height:16px;
    }

    .ms-list-empty{
      padding:14px 10px 6px;
      font:500 13px/1.4 "Inter", sans-serif;
      color:rgba(232,239,255,.55);
      text-align:center;
    }

    /* Primary service picker with icons */
    .svc-picker-wrap{
      position:relative;
      width:100%;
      overflow:visible;
      z-index:5;
    }

    .svc-picker-wrap:has(.svc-picker-dropdown:not([hidden])),
    .svc-picker-wrap:has(.svc-picker-trigger.is-open){
      z-index:80;
    }

    .svc-picker-native{
      position:absolute;
      width:1px;
      height:1px;
      padding:0;
      margin:-1px;
      overflow:hidden;
      clip:rect(0,0,0,0);
      white-space:nowrap;
      border:0;
    }

    .svc-picker-trigger{
      width:100%;
      min-height:56px;
      padding:0 18px;
      border-radius:var(--radius-md);
      border:1px solid rgba(255,255,255,.12);
      background:linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.035));
      color:var(--text);
      outline:none;
      font:600 15px/1 "Inter", sans-serif;
      letter-spacing:.01em;
      display:flex;
      align-items:center;
      gap:12px;
      cursor:pointer;
      box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
      transition:border-color .18s ease, background .18s ease, box-shadow .18s ease, transform .16s ease;
    }

    .svc-picker-trigger:hover{
      border-color:rgba(255,255,255,.16);
      background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.04));
    }

    .svc-picker-trigger:focus{
      border-color:rgba(98,148,255,.66);
      background:linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.045));
      box-shadow:0 0 0 4px rgba(43,109,255,.12);
      transform:translateY(-1px);
    }

    .svc-picker-trigger__label{
      flex:1 1 auto;
      min-width:0;
      overflow:hidden;
      text-overflow:ellipsis;
      white-space:nowrap;
      text-align:left;
    }

    .svc-picker-trigger.is-placeholder .svc-picker-trigger__label{
      color:rgba(232,239,255,.55);
    }

    .svc-caret{
      width:10px;
      height:10px;
      flex:0 0 auto;
      border-right:2px solid rgba(232,239,255,.85);
      border-bottom:2px solid rgba(232,239,255,.85);
      transform:rotate(45deg);
      margin-top:-2px;
      opacity:.9;
    }

    .svc-icon{
      flex:0 0 auto;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      width:34px;
      height:34px;
      border-radius:10px;
      background:linear-gradient(145deg, rgba(43,109,255,.22), rgba(43,109,255,.08));
      border:1px solid rgba(98,148,255,.28);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.12),
        0 4px 14px rgba(43,109,255,.12);
    }

    .svc-icon--sm{
      width:30px;
      height:30px;
      border-radius:9px;
    }

    .svc-icon__svg{
      width:17px;
      height:17px;
      color:#9ec0ff;
      stroke:#b8d4ff;
    }

    .svc-icon--sm .svc-icon__svg{
      width:15px;
      height:15px;
    }

    .svc-picker-dropdown{
      position:absolute;
      left:0;
      right:0;
      top:calc(100% + 8px);
      z-index:70;
      display:none;
      flex-direction:column;
      border-radius:16px;
      border:1px solid rgba(255,255,255,.1);
      background:rgba(10,12,22,.96);
      backdrop-filter:blur(14px);
      box-shadow:0 18px 60px rgba(0,0,0,.55);
      overflow:hidden;
      max-height:min(380px, 50vh);
    }

    .svc-picker-dropdown.is-up{
      top:auto;
      bottom:calc(100% + 8px);
    }

    .svc-picker-search-wrap{
      flex:0 0 auto;
      padding:10px 10px 8px;
      border-bottom:1px solid rgba(255,255,255,.06);
      background:rgba(0,0,0,.18);
    }

    .svc-picker-search{
      width:100%;
      height:44px;
      padding:0 14px 0 40px;
      border-radius:12px;
      border:1px solid rgba(255,255,255,.09);
      background:rgba(255,255,255,.04);
      color:var(--text);
      font:500 14px/1 "Inter", sans-serif;
      outline:none;
      background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2398b4e8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E");
      background-repeat:no-repeat;
      background-position:14px center;
      transition:border-color .18s ease, box-shadow .18s ease;
    }

    .svc-picker-search:focus{
      border-color:rgba(98,148,255,.5);
      box-shadow:0 0 0 3px rgba(43,109,255,.12);
    }

    .svc-picker-search::placeholder{
      color:rgba(232,239,255,.42);
    }

    .svc-picker-list{
      flex:1 1 auto;
      min-height:0;
      max-height:min(300px, 40vh);
      overflow-y:auto;
      overflow-x:hidden;
      overscroll-behavior:contain;
      padding:8px;
      scrollbar-gutter:stable;
      scrollbar-width:thin;
      scrollbar-color:rgba(129,140,248,.55) rgba(255,255,255,.04);
    }

    .svc-picker-list::-webkit-scrollbar{
      width:10px;
    }
    .svc-picker-list::-webkit-scrollbar-track{
      background:rgba(255,255,255,.04);
      border-radius:999px;
      margin:6px 0;
    }
    .svc-picker-list::-webkit-scrollbar-thumb{
      background:linear-gradient(180deg, rgba(129,140,248,.65), rgba(99,102,241,.45));
      border-radius:999px;
      border:2px solid transparent;
      background-clip:padding-box;
    }
    .svc-picker-list::-webkit-scrollbar-thumb:hover{
      background:linear-gradient(180deg, rgba(165,180,252,.85), rgba(129,140,248,.6));
      background-clip:padding-box;
    }

    .svc-picker-option{
      width:100%;
      min-height:48px;
      padding:8px 10px;
      border:0;
      border-radius:12px;
      background:transparent;
      color:rgba(245,248,255,.92);
      font:600 14px/1.25 "Inter", sans-serif;
      display:flex;
      align-items:center;
      gap:12px;
      cursor:pointer;
      text-align:left;
      transition:background .16s ease, transform .14s ease;
    }

    .svc-picker-option:hover,
    .svc-picker-option:focus-visible{
      background:rgba(255,255,255,.06);
      outline:none;
    }

    .svc-picker-option.is-selected{
      background:linear-gradient(90deg, rgba(43,109,255,.18), rgba(43,109,255,.08));
      box-shadow:inset 0 0 0 1px rgba(98,148,255,.22);
    }

    .svc-picker-option__label{
      flex:1 1 auto;
      min-width:0;
    }

    .svc-picker-empty{
      padding:18px 14px;
      text-align:center;
      color:rgba(232,239,255,.5);
      font:500 13px/1.4 "Inter", sans-serif;
    }

    .form-actions{
      display:flex;
      flex-wrap:wrap;
      align-items:center;
      gap:var(--space-lg);
      margin-top:var(--space-xl);
    }

    .generate-btn{
      flex:1 1 260px;
      min-height:60px;
      padding:0 28px;
      margin:0;
      border:0;
      border-radius:var(--radius-md);
      color:#fff;
      font-family:"Plus Jakarta Sans", sans-serif;
      font-size:15px;
      font-weight:800;
      letter-spacing:.14em;
      text-transform:uppercase;
      cursor:pointer;
      position:relative;
      overflow:hidden;
      background:linear-gradient(135deg, #2f6fff 0%, #5088ff 38%, #8eb6ff 100%);
      background-size:200% 200%;
      box-shadow:
        0 22px 48px rgba(58,124,255,.4),
        0 0 0 1px rgba(255,255,255,.12) inset,
        0 0 40px rgba(122,166,255,.15);
      transition:transform 0.45s var(--ease-spring), box-shadow 0.45s var(--ease-out-expo), filter 0.35s ease;
      animation:btnGradientDrift 14s ease-in-out infinite;
    }

    .generate-btn::before{
      content:"";
      position:absolute;
      inset:0;
      background:linear-gradient(120deg, transparent 0%, rgba(255,255,255,.28) 35%, transparent 62%);
      transform:translateX(-130%);
      transition:transform 1s var(--ease-out-expo);
    }

    .generate-btn::after{
      content:"";
      position:absolute;
      inset:-40%;
      background:radial-gradient(circle at 30% 50%, rgba(255,255,255,.15), transparent 55%);
      opacity:0;
      transition:opacity 0.5s ease;
      pointer-events:none;
    }

    .generate-btn:hover{
      transform:translateY(-3px) scale(1.01);
      filter:brightness(1.06);
      box-shadow:
        0 28px 64px rgba(58,124,255,.48),
        0 0 0 1px rgba(255,255,255,.16) inset,
        0 0 56px rgba(122,166,255,.22);
    }

    .generate-btn:hover::before{
      transform:translateX(130%);
    }

    .generate-btn:hover::after{
      opacity:1;
    }

    .generate-btn:active{
      transform:translateY(-1px) scale(1.005);
    }
    .generate-btn:disabled{
      opacity:0.72;
      cursor:not-allowed;
      animation:none;
      transform:none;
    }

    .form-status{
      display:inline-flex;
      align-items:center;
      gap:12px;
      padding:12px 18px;
      border-radius:999px;
      border:1px solid rgba(255,255,255,.1);
      background:rgba(255,255,255,.04);
      color:rgba(232,239,255,.85);
      font-size:13px;
      font-weight:600;
      letter-spacing:.04em;
    }

    .form-status__pulse{
      width:10px;
      height:10px;
      border-radius:50%;
      background:var(--success);
      box-shadow:0 0 0 0 rgba(89,230,180,.45);
      animation:statusPulse 2.2s ease-in-out infinite;
    }

    .info-callout{
      margin-top:var(--space-lg);
      border-radius:var(--radius-md);
      border:1px solid rgba(122,166,255,.15);
      background:linear-gradient(165deg, rgba(58,124,255,.08), rgba(8,14,28,.55));
      overflow:hidden;
      transition:border-color 0.4s ease, box-shadow 0.45s ease;
    }

    .info-callout:hover{
      border-color:rgba(122,166,255,.28);
      box-shadow:0 12px 40px rgba(0,0,0,.25);
    }

    .info-callout__summary{
      list-style:none;
      display:flex;
      outline:none;
      align-items:center;
      gap:14px;
      padding:16px 20px;
      cursor:pointer;
      font-size:13px;
      font-weight:700;
      letter-spacing:.12em;
      text-transform:uppercase;
      color:rgba(232,239,255,.9);
      user-select:none;
      transition:background 0.3s ease;
    }

    .info-callout__summary::-webkit-details-marker{
      display:none;
    }

    .info-callout__summary::after{
      content:"";
      margin-left:auto;
      width:8px;
      height:8px;
      border-right:2px solid rgba(232,239,255,.55);
      border-bottom:2px solid rgba(232,239,255,.55);
      transform:rotate(45deg);
      transition:transform 0.4s var(--ease-out-expo);
    }

    .info-callout[open] .info-callout__summary::after{
      transform:rotate(225deg);
    }

    .info-callout__summary:hover{
      background:rgba(255,255,255,.04);
    }

    .info-callout__icon{
      width:36px;
      height:36px;
      border-radius:12px;
      flex-shrink:0;
      background:linear-gradient(135deg, rgba(122,166,255,.35), rgba(58,124,255,.15));
      border:1px solid rgba(255,255,255,.1);
      position:relative;
    }

    .info-callout__icon::before{
      content:"";
      position:absolute;
      inset:10px;
      border-radius:6px;
      border:2px solid rgba(255,255,255,.35);
      border-top-color:transparent;
      opacity:0.9;
    }

    .info-callout__body{
      padding:0 20px 20px 70px;
      border-top:1px solid rgba(255,255,255,.06);
    }

    .info-callout__lead{
      margin:0 0 14px;
      font-size:15px;
      line-height:1.65;
      color:rgba(232,239,255,.88);
      font-weight:500;
    }

    .info-callout__list{
      margin:0;
      padding:0 0 0 20px;
      color:rgba(232,239,255,.72);
      font-size:14px;
      line-height:1.75;
    }

    .info-callout__list li{
      margin-bottom:10px;
    }

    .info-callout__list li:last-child{
      margin-bottom:0;
    }

    .info-callout code{
      font-family:ui-monospace, "Cascadia Code", "Segoe UI Mono", monospace;
      font-size:12.5px;
      padding:3px 8px;
      border-radius:8px;
      background:rgba(0,0,0,.35);
      border:1px solid rgba(255,255,255,.1);
      color:#c8d9ff;
    }

    .powered-wrap{
      max-width:var(--container);
      margin:var(--space-lg) auto 0;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:16px;
      flex-wrap:wrap;
    }

    .powered,
    .foot-note{
      display:inline-flex;
      align-items:center;
      gap:10px;
      padding:11px 16px;
      border-radius:999px;
      border:1px solid rgba(255,255,255,.08);
      background:rgba(255,255,255,.035);
      color:rgba(232,239,255,.76);
      font-size:12px;
      letter-spacing:.16em;
      text-transform:uppercase;
      font-weight:700;
      backdrop-filter:blur(14px);
    }

    .powered i,
    .foot-note i{
      width:8px;
      height:8px;
      border-radius:50%;
      background:linear-gradient(135deg, #8ab3ff, #2f76ff);
      box-shadow:0 0 0 5px rgba(47,118,255,.1);
    }

    /* World clocks + metrics: same hero-shell frame (footer band), not a second card */
    .hero-shell .studio-deck{
      width:100%;
      max-width:none;
      margin:0;
      flex-shrink:0;
      padding:var(--space-lg) clamp(20px, 4vw, 48px) var(--space-xl);
      border:0;
      border-top:1px solid rgba(255,255,255,.1);
      border-radius:0;
      background:
        linear-gradient(180deg, rgba(4,10,22,.42) 0%, rgba(6,14,28,.55) 100%);
      box-shadow:none;
      position:relative;
      z-index:1;
      overflow:hidden;
    }

    .hero-shell .studio-deck::before{
      content:"";
      position:absolute;
      inset:0;
      background:linear-gradient(90deg, rgba(122,166,255,.08), transparent 42%, rgba(0,168,255,.05));
      opacity:.55;
      pointer-events:none;
    }

    .deck-inner{
      position:relative;
      z-index:1;
    }

    .deck-head{
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:var(--space-md);
      flex-wrap:wrap;
      margin-bottom:var(--space-lg);
    }

    .deck-eyebrow{
      display:inline-flex;
      align-items:center;
      gap:10px;
      font-size:11px;
      font-weight:800;
      letter-spacing:.2em;
      text-transform:uppercase;
      color:rgba(122,166,255,.95);
      margin:0 0 10px;
    }

    .deck-live-dot{
      width:7px;
      height:7px;
      border-radius:50%;
      background:var(--success);
      box-shadow:0 0 0 6px rgba(89,230,180,.12);
      animation:statusPulse 2.4s ease-in-out infinite;
    }

    .deck-title{
      margin:0;
      font-family:"Plus Jakarta Sans", sans-serif;
      font-size:clamp(22px, 2.2vw, 30px);
      font-weight:800;
      letter-spacing:-.03em;
      line-height:1.2;
      color:var(--text);
    }

    .deck-sub{
      margin:8px 0 0;
      max-width:520px;
      font-size:14px;
      line-height:1.65;
      color:var(--muted-2);
    }

    .deck-controls{
      display:flex;
      flex-wrap:wrap;
      gap:10px;
      align-items:center;
    }

    .deck-chip{
      appearance:none;
      border:1px solid rgba(255,255,255,.14);
      background:rgba(255,255,255,.06);
      color:#e8efff;
      font-size:11px;
      font-weight:800;
      letter-spacing:.12em;
      text-transform:uppercase;
      padding:10px 16px;
      border-radius:999px;
      cursor:pointer;
      transition:
        transform 0.35s var(--ease-out-expo),
        border-color 0.25s ease,
        background 0.25s ease,
        box-shadow 0.35s ease;
    }

    .deck-chip:hover{
      transform:translateY(-2px);
      border-color:rgba(122,166,255,.35);
      background:rgba(58,124,255,.14);
      box-shadow:0 12px 32px rgba(0,0,0,.25);
    }

    .deck-chip:focus-visible{
      outline:2px solid rgba(122,166,255,.65);
      outline-offset:3px;
    }

    .deck-chip[aria-pressed="true"]{
      border-color:rgba(122,166,255,.45);
      background:rgba(58,124,255,.2);
    }

    .clock-grid{
      display:grid;
      grid-template-columns:repeat(auto-fill, minmax(168px, 1fr));
      gap:14px;
    }

    .clock-card{
      position:relative;
      padding:16px 16px 44px;
      border-radius:var(--radius-md);
      border:1px solid rgba(255,255,255,.1);
      background:rgba(255,255,255,.04);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
      transition:
        transform 0.45s var(--ease-out-expo),
        border-color 0.3s ease,
        box-shadow 0.45s ease;
      min-width:0;
    }

    .clock-card:hover{
      transform:translateY(-3px);
      border-color:rgba(122,166,255,.28);
      box-shadow:
        0 18px 40px rgba(0,0,0,.28),
        inset 0 1px 0 rgba(255,255,255,.08);
    }

    .clock-card__head{
      display:flex;
      align-items:baseline;
      justify-content:space-between;
      gap:8px;
      margin-bottom:10px;
    }

    .clock-card__city{
      font-size:12px;
      font-weight:800;
      letter-spacing:.1em;
      text-transform:uppercase;
      color:rgba(232,239,255,.9);
    }

    .clock-card__abbr{
      font-size:10px;
      font-weight:700;
      letter-spacing:.08em;
      color:rgba(122,166,255,.95);
      white-space:nowrap;
    }

    .clock-card__time{
      display:block;
      font-family:ui-monospace, "Cascadia Code", "Segoe UI Mono", monospace;
      font-size:clamp(20px, 2.4vw, 26px);
      font-weight:700;
      font-variant-numeric:tabular-nums;
      letter-spacing:.04em;
      color:#fff;
      line-height:1.15;
    }

    .clock-card__date{
      margin-top:6px;
      font-size:12px;
      color:var(--muted-2);
      font-weight:600;
    }

    .clock-card__copy{
      position:absolute;
      right:12px;
      bottom:12px;
      appearance:none;
      border:1px solid rgba(255,255,255,.12);
      background:rgba(0,0,0,.2);
      color:rgba(232,239,255,.82);
      font-size:10px;
      font-weight:800;
      letter-spacing:.1em;
      text-transform:uppercase;
      padding:6px 10px;
      border-radius:999px;
      cursor:pointer;
      transition:border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
    }

    .clock-card__copy:hover{
      border-color:rgba(122,166,255,.4);
      background:rgba(58,124,255,.18);
      color:#fff;
    }

    .clock-card__copy:focus-visible{
      outline:2px solid rgba(122,166,255,.6);
      outline-offset:2px;
    }

    .deck-metrics{
      display:grid;
      grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
      gap:14px;
      margin-top:var(--space-lg);
    }

    .metric-tile{
      padding:18px 20px;
      border-radius:var(--radius-md);
      border:1px solid rgba(255,255,255,.09);
      background:rgba(255,255,255,.035);
      min-width:0;
      transition:transform 0.4s var(--ease-out-expo), border-color 0.3s ease;
    }

    .metric-tile:hover{
      transform:translateY(-2px);
      border-color:rgba(255,255,255,.14);
    }

    .metric-tile__label{
      display:flex;
      align-items:center;
      gap:10px;
      font-size:11px;
      font-weight:800;
      letter-spacing:.14em;
      text-transform:uppercase;
      color:rgba(232,239,255,.62);
      margin:0 0 10px;
    }

    .metric-tile__label i{
      width:7px;
      height:7px;
      border-radius:50%;
      background:var(--gold);
      box-shadow:0 0 0 5px rgba(255,209,92,.1);
    }

    .metric-tile__value{
      font-family:ui-monospace, "Cascadia Code", "Segoe UI Mono", monospace;
      font-size:clamp(17px, 1.8vw, 22px);
      font-weight:700;
      font-variant-numeric:tabular-nums;
      color:#fff;
      line-height:1.25;
      word-break:break-word;
    }

    .metric-tile--tip .metric-tile__value{
      font-family:"Inter", system-ui, sans-serif;
      font-size:14px;
      font-weight:600;
      line-height:1.55;
      color:rgba(232,239,255,.86);
    }

    .metric-tile__actions{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      flex-wrap:wrap;
      margin-top:12px;
    }

    .tip-next{
      appearance:none;
      border:0;
      background:transparent;
      color:rgba(122,166,255,.95);
      font-size:12px;
      font-weight:700;
      letter-spacing:.06em;
      text-decoration:underline;
      text-underline-offset:4px;
      cursor:pointer;
      padding:4px 0;
    }

    .tip-next:hover{
      color:#c8d9ff;
    }

    .tip-next:focus-visible{
      outline:2px solid rgba(122,166,255,.55);
      outline-offset:3px;
      border-radius:4px;
    }

    html.ux-ready .hero-shell .studio-deck .clock-card{
      animation:fieldEase 0.55s var(--ease-luxe) backwards;
    }

    html.ux-ready .hero-shell .studio-deck .clock-card:nth-child(1){ animation-delay:0.04s; }
    html.ux-ready .hero-shell .studio-deck .clock-card:nth-child(2){ animation-delay:0.08s; }
    html.ux-ready .hero-shell .studio-deck .clock-card:nth-child(3){ animation-delay:0.12s; }
    html.ux-ready .hero-shell .studio-deck .clock-card:nth-child(4){ animation-delay:0.16s; }
    html.ux-ready .hero-shell .studio-deck .clock-card:nth-child(5){ animation-delay:0.2s; }
    html.ux-ready .hero-shell .studio-deck .clock-card:nth-child(6){ animation-delay:0.24s; }

    html.ux-ready .hero-shell .studio-deck .metric-tile{
      animation:fieldEase 0.55s var(--ease-luxe) 0.28s backwards;
    }

    .loadingOverlay{
      position:fixed;
      inset:0;
      display:flex;
      align-items:center;
      justify-content:center;
      padding:24px;
      background:
        radial-gradient(900px 520px at 70% 18%, rgba(45,107,255,.18), transparent 60%),
        radial-gradient(700px 460px at 22% 78%, rgba(26,75,255,.14), transparent 60%),
        rgba(4, 10, 22, .86);
      backdrop-filter:blur(14px);
      -webkit-backdrop-filter:blur(14px);
      opacity:0;
      visibility:hidden;
      pointer-events:none;
      transition:opacity .28s ease, visibility .28s ease;
      z-index:9999;
    }

    .loadingOverlay.is-active{
      opacity:1;
      visibility:visible;
      pointer-events:auto;
    }

    .loadingPanel{
      width:min(560px, 100%);
      padding:34px 30px 28px;
      border-radius:26px;
      border:1px solid rgba(255,255,255,.12);
      background:linear-gradient(180deg, rgba(15,27,51,.96), rgba(10,18,36,.96));
      box-shadow:0 24px 70px rgba(0,0,0,.45);
      text-align:center;
      position:relative;
      overflow:hidden;
    }

    .loadingPanel::before{
      content:"";
      position:absolute;
      inset:0;
      background:linear-gradient(120deg, transparent 0%, rgba(255,255,255,.05) 22%, transparent 48%);
      transform:translateX(-120%);
      animation:loadingSweep 2.4s linear infinite;
      pointer-events:none;
    }

    .loadingSpinner{
      width:72px;
      height:72px;
      margin:0 auto 20px;
      border-radius:50%;
      border:4px solid rgba(255,255,255,.12);
      border-top-color:#4f80ff;
      border-right-color:#8bb2ff;
      animation:spin 1s linear infinite;
      box-shadow:0 0 0 10px rgba(79,128,255,.08);
    }

    .loadingTitle{
      margin:0;
      font-size:clamp(24px, 4vw, 32px);
      font-weight:800;
      letter-spacing:.02em;
      font-family:"Plus Jakarta Sans", sans-serif;
    }

    .loadingText{
      margin:12px auto 0;
      max-width:420px;
      font-size:15px;
      line-height:1.8;
      color:rgba(234,241,255,.78);
    }

    .loadingMeta{
      display:grid;
      grid-template-columns:repeat(3, minmax(0, 1fr));
      gap:12px;
      margin-top:22px;
    }

    .loadingMetaCard{
      padding:14px 12px;
      border-radius:16px;
      border:1px solid rgba(255,255,255,.08);
      background:rgba(255,255,255,.04);
    }

    .loadingMetaLabel{
      display:block;
      font-size:11px;
      letter-spacing:.14em;
      text-transform:uppercase;
      color:rgba(234,241,255,.55);
      margin-bottom:8px;
    }

    .loadingMetaValue{
      display:block;
      font-size:18px;
      font-weight:700;
      color:#fff;
    }

    .loadingBar{
      position:relative;
      height:10px;
      margin-top:22px;
      border-radius:999px;
      overflow:hidden;
      background:rgba(255,255,255,.08);
      border:1px solid rgba(255,255,255,.08);
    }

    .loadingBarFill{
      display:block;
      height:100%;
      border-radius:inherit;
      background:linear-gradient(90deg, #2d6bff, #85abff, #2d6bff);
      background-size:220% 100%;
      width:0%;
      max-width:100%;
      transition:width .35s ease;
    }

    .loadingBar.indeterminate .loadingBarFill{
      width:38%;
      animation:loadingPulse 1.8s ease-in-out infinite;
    }

    .loadingCityGrid{
      display:grid;
      grid-template-columns:repeat(4, minmax(0, 1fr));
      gap:12px;
      margin-top:18px;
    }

    .loadingCityGrid .loadingMetaCard{
      min-height:76px;
    }

    .loadingCityHint{
      margin:10px 0 0;
      font-size:12px;
      line-height:1.5;
      color:rgba(234,241,255,.55);
      text-align:center;
    }

    .loadingSteps{
      margin-top:18px;
      display:flex;
      align-items:center;
      justify-content:center;
      gap:8px;
      color:rgba(234,241,255,.74);
      font-size:13px;
      letter-spacing:.04em;
      flex-wrap:wrap;
    }

    .loadingDots{
      display:inline-flex;
      gap:6px;
      align-items:center;
    }

    .loadingDots i{
      width:8px;
      height:8px;
      border-radius:50%;
      background:rgba(255,255,255,.35);
      animation:dotBlink 1.2s ease-in-out infinite;
    }

    .loadingDots i:nth-child(2){ animation-delay:.15s; }
    .loadingDots i:nth-child(3){ animation-delay:.3s; }

    @keyframes gradientShift {
      0%,100%{ background-position:0% 50%; }
      50%{ background-position:100% 50%; }
    }

    @keyframes floatGlow {
      0%,100%{ transform:translate3d(0,0,0) scale(1); }
      50%{ transform:translate3d(14px,-18px,0) scale(1.04); }
    }

    @keyframes pulseDot {
      0%,100%{ transform:scale(1); opacity:.95; }
      50%{ transform:scale(1.12); opacity:1; }
    }

    @keyframes scanX {
      from{ transform:translateX(-10%); }
      to{ transform:translateX(140vw); }
    }

    @keyframes scanY {
      from{ transform:translateY(-15%); }
      to{ transform:translateY(110vh); }
    }

    @keyframes tiltFloat {
      0%,100%{ transform:perspective(1200px) rotateY(-5deg) rotateX(3deg) translateY(0); }
      50%{ transform:perspective(1200px) rotateY(-3.5deg) rotateX(2deg) translateY(-6px); }
    }

    @keyframes sheen {
      to{ transform:translateX(140%); }
    }

    @keyframes ringSpin {
      to{ transform:rotate(360deg); }
    }

    @keyframes barPulse {
      0%,100%{ transform:scaleY(1); filter:saturate(1); }
      50%{ transform:scaleY(1.08); filter:saturate(1.2); }
    }

    @keyframes orbit {
      from{ transform:rotate(0deg) translateY(0); }
      to{ transform:rotate(360deg) translateY(0); }
    }

    @keyframes spin { to{ transform:rotate(360deg); } }
    @keyframes loadingSweep { to{ transform:translateX(140%); } }
    @keyframes loadingPulse {
      0% { transform: translateX(-10%); background-position: 0% 50%; }
      50% { transform: translateX(120%); background-position: 100% 50%; }
      100% { transform: translateX(-10%); background-position: 0% 50%; }
    }
    @keyframes dotBlink {
      0%, 100% { transform: translateY(0); opacity: .35; }
      50% { transform: translateY(-2px); opacity: 1; }
    }

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

    @keyframes heroShellReveal {
      from{
        opacity:0.92;
        transform:translateY(10px) scale(0.996);
        filter:blur(2px);
      }
      to{
        opacity:1;
        transform:translateY(0) scale(1);
        filter:blur(0);
      }
    }

    @keyframes colReveal {
      from{
        opacity:0.92;
        transform:translateY(14px);
      }
      to{
        opacity:1;
        transform:translateY(0);
      }
    }

    @keyframes surfaceBloom {
      from{
        opacity:0.9;
        transform:translateY(10px);
      }
      to{
        opacity:1;
        transform:translateY(0);
      }
    }

    @keyframes btnGradientDrift {
      0%, 100%{ background-position:0% 50%; }
      50%{ background-position:100% 50%; }
    }

    html.ux-ready .grid > .field{
      animation:fieldEase 0.55s var(--ease-luxe) backwards;
    }
    html.ux-ready .grid > .field:nth-child(1){ animation-delay:0.36s; }
    html.ux-ready .grid > .field:nth-child(2){ animation-delay:0.39s; }
    html.ux-ready .grid > .field:nth-child(3){ animation-delay:0.42s; }
    html.ux-ready .grid > .field:nth-child(4){ animation-delay:0.45s; }
    html.ux-ready .grid > .field:nth-child(5){ animation-delay:0.48s; }
    html.ux-ready .grid > .field:nth-child(6){ animation-delay:0.51s; }
    html.ux-ready .grid > .field:nth-child(7){ animation-delay:0.54s; }
    html.ux-ready .grid > .field:nth-child(8){ animation-delay:0.57s; }
    html.ux-ready .grid > .field:nth-child(9){ animation-delay:0.6s; }
    html.ux-ready .grid > .field:nth-child(10){ animation-delay:0.63s; }

    @keyframes fieldEase {
      from{
        opacity:0.88;
        transform:translateY(6px);
      }
      to{
        opacity:1;
        transform:translateY(0);
      }
    }

    @keyframes statusPulse {
      0%, 100%{ box-shadow:0 0 0 0 rgba(89,230,180,.45); }
      55%{ box-shadow:0 0 0 10px rgba(89,230,180,0); }
    }

    @media (prefers-reduced-motion: reduce){
      html.ux-ready .hero-shell,
      html.ux-ready .hero-layout > .hero-copy,
      html.ux-ready .hero-layout > .dashboard-preview,
      html.ux-ready .hero-layout > .form-column,
      html.ux-ready .form-surface,
      html.ux-ready .signal-pill,
      html.ux-ready .mini-chip{
        animation:none !important;
      }
      .preview-card{
        transform:none !important;
        animation:none !important;
      }
      .preview-card:hover{
        transform:none !important;
      }
      .generate-btn{
        animation:none !important;
        background-size:100% 100% !important;
      }
      .form-status__pulse{
        animation:none !important;
        box-shadow:none !important;
      }
      html.ux-ready .grid > .field{
        animation:none !important;
      }
      html.ux-ready .hero-shell .studio-deck .clock-card,
      html.ux-ready .hero-shell .studio-deck .metric-tile{
        animation:none !important;
      }
      .deck-live-dot{
        animation:none !important;
      }
      .hero-shell,
      .generator-card,
      .stat-card,
      .trust-chip,
      .signal-pill,
      .mini-chip,
      .badge-row span,
      input,
      select,
      textarea,
      .ms-trigger,
      .generate-btn,
      .clock-card,
      .metric-tile,
      .deck-chip{
        transition-duration:0.01ms !important;
      }
    }

    @media (max-width: 1079px){
      .hero-layout{
        gap:var(--space-md);
        padding:var(--space-md) var(--space-sm) var(--space-lg);
      }
      .hero-copy{ padding:var(--space-xs) 0; }
      .dashboard-preview{ padding:var(--space-xs) 0; }
      .preview-card{
        transform:none;
        animation:none;
        margin:0 auto;
      }
      .preview-card:hover{
        transform:none;
        box-shadow:0 28px 80px rgba(0,0,0,.46);
      }
      .form-column{ padding:var(--space-sm) 0 0; }
      .generator-card{ margin:0 auto; }
    }

    /*
      Portrait & mid-width: horizontal band (story | preview) + full-width form.
      Avoids three skinny “phone” columns that read as a tall portrait strip.
    */
    @media (min-width: 1080px) and (max-width: 1199px){
      .hero-layout{
        grid-template-columns:1fr 1fr;
        grid-template-rows:auto auto;
        gap:var(--space-xl) clamp(36px, 4.5vw, 56px);
        padding:var(--space-xl) clamp(32px, 4vw, 48px) var(--space-2xl);
        align-items:start;
      }
      .hero-copy{
        grid-column:1;
        grid-row:1;
        padding:var(--space-sm) var(--space-sm) 0 0;
      }
      .dashboard-preview{
        grid-column:2;
        grid-row:1;
        padding:var(--space-sm) 0 0 var(--space-sm);
      }
      .form-column{
        grid-column:1 / -1;
        grid-row:2;
        padding:var(--space-lg) 0 0;
        margin-top:var(--space-sm);
        border-top:1px solid rgba(255,255,255,.08);
        border-left:0;
      }
      .generator-card{
        max-width:800px;
        margin:0 auto;
      }
    }

    /* 1080–1199 landscape: three columns with room for the preview (no portrait-style stack) */
    @media (min-width: 1080px) and (max-width: 1199px) and (orientation: landscape){
      .hero-layout{
        grid-template-columns:minmax(220px, 1fr) minmax(320px, 1.15fr) minmax(300px, 1fr);
        grid-template-rows:auto;
        gap:clamp(28px, 3.5vw, 44px);
        padding:clamp(28px, 3.5vw, 40px) clamp(24px, 3.5vw, 40px);
        align-items:start;
      }
      .hero-copy{
        grid-column:1;
        grid-row:1;
        padding:var(--space-xs) var(--space-sm) 0 0;
        margin:0;
        border:0;
      }
      .dashboard-preview{
        grid-column:2;
        grid-row:1;
        padding:var(--space-sm) 0 0 clamp(16px, 2vw, 28px);
        border-left:1px solid rgba(255,255,255,.07);
        margin:0;
        border-top:0;
      }
      .form-column{
        grid-column:3;
        grid-row:1;
        padding:var(--space-xs) 0 0 clamp(16px, 2vw, 28px);
        border-left:1px solid rgba(255,255,255,.09);
        border-top:0;
        margin:0;
      }
      .generator-card{
        max-width:none;
        width:100%;
        margin:0;
      }
      .preview-card{
        width:min(100%, 520px);
      }
      .hero-copy h1{
        font-size:clamp(28px, 2.8vw, 44px);
      }
    }

    @media (min-width: 1200px) and (orientation: portrait){
      .hero-layout{
        grid-template-columns:minmax(0, 1.12fr) minmax(0, 1fr);
        grid-template-rows:auto auto;
        gap:var(--space-xl) clamp(40px, 4.5vw, 60px);
        padding:var(--space-xl) clamp(36px, 4.5vw, 56px) var(--space-2xl);
        align-items:start;
      }
      .hero-copy{
        grid-column:1;
        grid-row:1;
        padding:var(--space-sm) var(--space-md) 0 0;
      }
      .dashboard-preview{
        grid-column:2;
        grid-row:1;
        padding:var(--space-sm) 0 0 var(--space-md);
        border-left:1px solid rgba(255,255,255,.07);
        justify-content:center;
      }
      .form-column{
        grid-column:1 / -1;
        grid-row:2;
        padding:var(--space-lg) 0 0;
        margin-top:var(--space-md);
        border-top:1px solid rgba(255,255,255,.09);
        border-left:0;
      }
      .generator-card{
        max-width:820px;
        margin:0 auto;
      }
      .preview-card{
        width:min(100%, 560px);
      }
    }

    /*
      Landscape ≥1200px: true wide composition — marketing | generous preview | form.
      Center column gets more width so the mockup is not “phone squeezed”.
    */
    @media (min-width: 1200px) and (orientation: landscape){
      .hero-layout{
        grid-template-columns:minmax(260px, 1fr) minmax(360px, 1.12fr) minmax(420px, 1.15fr);
        grid-template-rows:auto;
        gap:clamp(48px, 5vw, 88px);
        padding:clamp(36px, 3.8vw, 52px) clamp(44px, 5.5vw, 88px);
        align-items:start;
      }
      .hero-copy{
        grid-column:1;
        grid-row:1;
        padding:var(--space-sm) var(--space-md) var(--space-lg) 0;
        max-width:100%;
      }
      .hero-copy h1{
        font-size:clamp(34px, 2.85vw, 58px);
        line-height:1.12;
      }
      .hero-subtitle{
        font-size:clamp(16px, 1.15vw, 18px);
        margin-bottom:var(--space-lg);
      }
      .dashboard-preview{
        grid-column:2;
        grid-row:1;
        padding:var(--space-md) 0 var(--space-lg) clamp(28px, 3.2vw, 48px);
        border-left:1px solid rgba(255,255,255,.08);
        justify-content:center;
      }
      .form-column{
        grid-column:3;
        grid-row:1;
        padding:var(--space-sm) 0 var(--space-lg) clamp(28px, 3.2vw, 48px);
        border-left:1px solid rgba(255,255,255,.1);
        justify-content:flex-start;
        align-self:start;
      }
      .generator-card{
        max-width:none;
        width:100%;
      }
      .preview-card{
        width:min(100%, 600px);
        padding:clamp(22px, 2vw, 28px);
      }
    }

    @media (max-width: 860px){
      .page{ padding:20px 14px 34px; }
      .topbar{ font-size:11px; gap:10px; }
      h1{ font-size:clamp(36px, 12vw, 56px); }
      .hero-subtitle{ font-size:16px; }
      .preview-header,
      .preview-bottom,
      .grid{ grid-template-columns:1fr; }
      .preview-grid{ grid-template-columns:1fr 1fr; }
      .generator-head,
      .form-shell,
      .hero-layout{ padding-left:20px; padding-right:20px; }
      .surface-top,
      .form-actions,
      .powered-wrap{ flex-direction:column; align-items:stretch; }
      .form-actions .generate-btn{ flex:1 1 auto; width:100%; }
      .stat-card{ min-width:unset; }
      .hero-shell .studio-deck{
        padding:var(--space-md) 18px var(--space-lg);
      }
      .deck-controls{ width:100%; justify-content:flex-start; }
    }

    @media (max-width: 560px){
      .hero-shell{ border-radius:26px; }
      .preview-grid{ grid-template-columns:1fr; }
      .generator-card{ border-radius:22px; }
      .form-surface{ padding:16px; }
      input,select,.ms-trigger,.svc-picker-trigger{ height:52px; }
      .generate-btn{ min-height:52px; padding:0 20px; font-size:14px; }
      .loadingPanel{ padding:28px 20px 24px; }
      .loadingMeta{ grid-template-columns:1fr; }
      .loadingCityGrid{ grid-template-columns:1fr 1fr; }
    }

    /* Short-height viewports: compress vertical rhythm without reintroducing overlap */
    @media (max-height: 820px){
      .page{ padding-top:var(--space-md); padding-bottom:var(--space-xl); }
      h1{ margin:var(--space-sm) 0; font-size:clamp(28px, 4vw, 52px); }
      .hero-subtitle{ margin-bottom:var(--space-md); font-size:16px; }
      .stat-row{ margin-bottom:var(--space-md); }
    }

    /* Laptop / short landscape: trim chrome + form rhythm so the tool fits the viewport */
    @media (min-width: 1080px) and (max-width: 1199px) and (orientation: landscape) and (max-height: 900px){
      .hero-layout{
        gap:clamp(20px, 2.6vw, 34px);
        padding:clamp(18px, 2.5vw, 32px) clamp(18px, 3vw, 34px);
      }
    }

    @media (min-width: 1200px) and (orientation: landscape) and (max-height: 900px){
      .hero-layout{
        gap:clamp(24px, 3.2vw, 44px);
        padding:clamp(22px, 2.8vw, 40px) clamp(28px, 4vw, 56px);
      }
      .hero-copy h1{
        font-size:clamp(28px, 2.5vw, 48px);
      }
      .hero-subtitle{
        margin-bottom:var(--space-md);
      }
    }

    @media (min-width: 1080px) and (orientation: landscape) and (max-height: 900px){
      .page{
        padding-top:clamp(16px, 2.2vh, 28px);
        padding-bottom:clamp(20px, 2.8vh, 36px);
      }
      .topbar{
        margin-bottom:10px;
      }
      .generator-head{
        padding:var(--space-lg) var(--space-md) 12px;
      }
      .generator-head h2{
        font-size:clamp(22px, 2.1vw, 30px);
      }
      .generator-head p{
        font-size:14px;
        line-height:1.55;
        margin-top:8px;
      }
      .badge-row{
        margin-top:10px;
        gap:8px;
      }
      .badge-row span{
        padding:8px 14px;
        font-size:11px;
      }
      .form-shell{
        padding:0 var(--space-md) var(--space-lg);
      }
      .form-surface{
        padding:var(--space-md) var(--space-md) var(--space-lg);
      }
      .surface-top{
        padding-bottom:var(--space-md);
        margin-bottom:var(--space-md);
      }
      .surface-top h3{
        font-size:12px;
      }
      #generatorForm .grid{
        gap:14px 16px;
      }
      label:not(.ms-option){
        margin-bottom:8px;
        gap:4px;
        font-size:11px;
      }
      .field-hint{
        font-size:9px;
      }
      input,
      select,
      textarea,
      .ms-trigger{
        height:52px;
        font-size:14px;
      }
      textarea{
        height:auto;
        min-height:100px;
      }
      .generate-btn{
        min-height:52px;
        margin-top:12px;
        font-size:14px;
      }
      .form-actions{
        margin-top:var(--space-lg);
        gap:var(--space-md);
      }
      .powered-wrap{
        margin-top:12px;
      }
    }

    /* Landscape phones / small tablets: roomier form, readable type */
    @media (orientation: landscape) and (max-height: 520px){
      .page{ padding:14px 14px 24px; }
      .topbar{ margin-bottom:10px; font-size:11px; }
      .hero-shell{ border-radius:22px; }
      .hero-layout{ padding:14px 16px; gap:14px; }
      .generator-head{ padding:18px 20px 12px; }
      .generator-head h2{ font-size:22px; }
      .generator-head p{ font-size:13px; margin-top:8px; }
      .form-shell{ padding:0 20px 18px; }
      .form-surface{ padding:16px; }
      .grid{ gap:12px; }
      label{ font-size:11px; margin-bottom:6px; }
      input,select,.ms-trigger,.svc-picker-trigger{ height:48px; font-size:14px; }
      .generate-btn{ height:50px; margin-top:14px; font-size:13px; }
      .powered-wrap{ margin-top:12px; }
    }

    .checkbox-row{
      display:flex;
      align-items:flex-start;
      gap:10px;
      cursor:pointer;
      font-weight:500;
      line-height:1.45;
    }

    .checkbox-row input[type="checkbox"]{
      width:18px;
      height:18px;
      margin-top:2px;
      flex:0 0 auto;
      accent-color:var(--brand, #1a4bff);
    }