:root {
    --bg: #1a2f4a;
    --bg2: #172035;
    --bg3: #1e2d47;
    --bg4: #253554;

    /* New palette from reference image */
    --burnt-orange: #c4622a;
    --deep-orange: #b85525;
    --rust: #a04520;
    --copper: #d4844a;
    --gold: #d4a04a;
    --cream: #e8d5b8;

    --deep-blue: #1e3a5f;
    --navy: #162d4a;
    --steel-blue: #2c5a82;
    --slate-blue: #3a6d94;
    --ice-blue: #8ab4cc;

  }

  * { margin: 0; padding: 0; box-sizing: border-box; }

  body {
    font-family: 'DM Sans', sans-serif;
    background: var(--bg);
    color: rgba(255,255,255,0.92);
    min-height: 100vh;
    overflow-x: hidden;
    font-size: 17px;
    line-height: 1.65;
  }

  .panel {
    position: relative;
    min-height: 100vh;
    background: var(--bg);
    overflow: hidden;
  }

  /* ===== ATMOSPHERIC BG ===== */
  .atmo {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    pointer-events: none; z-index: 0;
  }
  .atmo::before {
    content: '';
    position: absolute;
    top: -20%; left: -10%;
    width: 70%; height: 70%;
    background: radial-gradient(ellipse, rgba(196,98,42,0.1) 0%, rgba(212,128,74,0.05) 40%, transparent 70%);
    animation: atmoDrift1 25s ease-in-out infinite;
  }
  .atmo::after {
    content: '';
    position: absolute;
    bottom: -10%; right: -10%;
    width: 60%; height: 60%;
    background: radial-gradient(ellipse, rgba(30,58,95,0.12) 0%, rgba(44,90,130,0.05) 40%, transparent 70%);
    animation: atmoDrift2 30s ease-in-out infinite;
  }
  @keyframes atmoDrift1 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(5%, 3%) scale(1.05); }
    66% { transform: translate(-3%, -2%) scale(0.98); }
  }
  @keyframes atmoDrift2 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(-4%, -3%) scale(1.06); }
  }

  .organic-shape {
    position: absolute; border-radius: 50%;
    pointer-events: none; filter: blur(80px);
  }
  .organic-shape.s1 {
    width: 400px; height: 400px; top: 5%; right: 15%;
    background: radial-gradient(circle, rgba(196,98,42,0.08), transparent 70%);
    animation: organicFloat 20s ease-in-out infinite;
  }
  .organic-shape.s2 {
    width: 350px; height: 350px; top: 45%; left: 5%;
    background: radial-gradient(circle, rgba(44,90,130,0.1), transparent 70%);
    animation: organicFloat 18s ease-in-out infinite reverse;
  }
  .organic-shape.s3 {
    width: 500px; height: 350px; bottom: 10%; right: 20%;
    background: radial-gradient(circle, rgba(212,160,74,0.06), transparent 70%);
    animation: organicFloat 22s ease-in-out infinite; animation-delay: -5s;
  }
  @keyframes organicFloat {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    25% { transform: translate(20px, -15px) rotate(5deg); }
    50% { transform: translate(-10px, 20px) rotate(-3deg); }
    75% { transform: translate(15px, 10px) rotate(2deg); }
  }


  
  .panel-hero {
    position: relative; z-index: 2;
    padding: 70px 48px 60px;
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 50px; align-items: start;
    max-width: 1280px; margin: 0 auto;
  }
  .hero-left { position: relative; z-index: 2; }

  .tool-meta {
    display: flex; align-items: center; gap: 16px; margin-bottom: 24px;
  }
  .tool-icon-wrap {
    width: 64px; height: 64px; border-radius: 18px;
    background: linear-gradient(135deg, var(--burnt-orange), var(--copper));
    display: flex; align-items: center; justify-content: center;
    font-size: 32px;
    box-shadow: 0 8px 32px rgba(196,98,42,0.35), 0 0 0 1px rgba(255,255,255,0.1);
    animation: iconGlow 4s ease-in-out infinite;
  }
  @keyframes iconGlow {
    0%, 100% { box-shadow: 0 8px 32px rgba(196,98,42,0.35); }
    50% { box-shadow: 0 8px 48px rgba(196,98,42,0.4), 0 0 20px rgba(212,128,74,0.15); }
  }
  .tool-badges { display: flex; gap: 10px; }
  .badge {
    padding: 5px 16px; border-radius: 20px;
    font-size: 12px; font-weight: 700;
    letter-spacing: 0.8px; text-transform: uppercase;
  }
  .badge-live {
    background: rgba(45,212,191,0.12); color: #2dd4bf;
    border: 1px solid rgba(45,212,191,0.25);
    display: flex; align-items: center; gap: 6px;
  }
  .badge-live::before {
    content: ''; width: 7px; height: 7px; border-radius: 50%;
    background: #2dd4bf; box-shadow: 0 0 6px #2dd4bf;
    animation: livePulse 2s ease-in-out infinite;
  }
  @keyframes livePulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
  .badge-coming{background:rgba(196,98,42,0.12);color:#d4844a;border:1px solid rgba(196,98,42,0.25);}
  .badge-quick {
    background: rgba(212,160,74,0.15); color: var(--gold);
    border: 1px solid rgba(212,160,74,0.3);
  }

  /* ===== CREATIVE HEADINGS ===== */
  .tool-title {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 54px; font-weight: 900;
    line-height: 1.0;
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: -0.5px;
  }
  .tool-title .line1 {
    background: linear-gradient(135deg, #fff 30%, var(--cream));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }
  .tool-title .line2 {
    background: linear-gradient(135deg, var(--burnt-orange), var(--copper), var(--gold));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  .tool-tagline {
    font-family: 'Playfair Display', serif;
    font-size: 22px;
    font-style: italic;
    color: var(--copper);
    margin-bottom: 22px;
    opacity: 0.9;
  }

  .tool-desc {
    font-size: 18px; line-height: 1.7;
    color: rgba(255,255,255,0.85);
    margin-bottom: 36px; max-width: 540px;
    white-space: pre-line;
  }

  .benefits-list {
    list-style: none;
    display: flex; flex-direction: column; gap: 16px;
    margin-bottom: 40px;
  }
  .benefit-item {
    display: flex; align-items: flex-start; gap: 14px;
    font-size: 16px; line-height: 1.55;
    color: rgba(255,255,255,0.9);
    opacity: 0;
    animation: fadeSlideIn 0.5s ease forwards;
  }
  .benefit-item:nth-child(1) { animation-delay: 0.1s; }
  .benefit-item:nth-child(2) { animation-delay: 0.2s; }
  .benefit-item:nth-child(3) { animation-delay: 0.3s; }
  .benefit-item:nth-child(4) { animation-delay: 0.4s; }
  .benefit-item:nth-child(5) { animation-delay: 0.5s; }
  @keyframes fadeSlideIn {
    from { opacity: 0; transform: translateX(-12px); }
    to { opacity: 1; transform: translateX(0); }
  }
  .benefit-icon {
    flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%;
    background: linear-gradient(135deg, rgba(45,212,191,0.25), rgba(45,212,191,0.1));
    border: 1px solid rgba(45,212,191,0.35);
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; color: #2dd4bf; margin-top: 2px;
  }

  .btn-cta {
    padding: 16px 40px; border-radius: 14px;
    font-size: 17px; font-weight: 700;
    border: none; cursor: pointer;
    transition: all 0.3s; text-decoration: none;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  }
  .btn-cta-primary {
    background: linear-gradient(135deg, var(--burnt-orange), var(--deep-orange));
    color: #fff;
    box-shadow: 0 6px 28px rgba(196,98,42,0.4);
  }
  .btn-cta-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 40px rgba(196,98,42,0.45);
  }
  .price-inline {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 32px; font-weight: 700; color: #fff;
  }
  .price-inline span {
    font-size: 16px; color: rgba(255,255,255,0.5);
    font-family: 'DM Sans', sans-serif; font-weight: 400;
  }

  /* ===== ROI — DEEP BLUE ===== */
  .hero-right { position: relative; z-index: 2; }

  .roi-card {
    background: linear-gradient(160deg, #fdf6ee 0%, #f5e8d5 100%);
    border: none;
    border-radius: 24px;
    padding: 0;
    position: relative; overflow: hidden;
    box-shadow:
      0 32px 80px rgba(0,0,0,0.45),
      0 0 0 1px rgba(196,98,42,0.1);
  }
  /* Dark navy header band for strong contrast */
  .roi-card-header {
    background: linear-gradient(135deg, var(--navy), var(--deep-blue), #1a3a5c);
    padding: 20px 28px 18px;
    border-bottom: 2px solid rgba(196,98,42,0.3);
    position: relative; overflow: hidden;
  }
  .roi-card-header::after {
    content: '';
    position: absolute; top: -30%; right: -10%;
    width: 160px; height: 160px;
    background: radial-gradient(circle, rgba(212,128,74,0.15), transparent 70%);
    border-radius: 50%; pointer-events: none;
  }
  .roi-card-body {
    padding: 28px 32px 36px;
  }
  .roi-card::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--burnt-orange), var(--copper), var(--gold), var(--ice-blue), var(--steel-blue));
    background-size: 300% 100%;
    animation: warmCoolBar 6s linear infinite;
    border-radius: 24px 24px 0 0;
  }
  @keyframes warmCoolBar {
    0% { background-position: 0% 0; }
    100% { background-position: 300% 0; }
  }
  .roi-card::after { display: none; }

  .roi-header {
    position: relative;
    display: flex; align-items: center; gap: 12px;
    margin-bottom: 0;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 20px; font-weight: 800;
    text-transform: uppercase; letter-spacing: 2px;
    background: linear-gradient(90deg, var(--copper), var(--gold));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }
  .roi-header span { font-size: 20px; -webkit-text-fill-color: initial; }

  /* Sliders panel — visually contained within ROI card */
  .calc-fields-panel {
    background: rgba(255,255,255,0.6);
    border: 1px solid rgba(196,98,42,0.15);
    border-radius: 16px;
    padding: 26px;
    margin-bottom: 0;
  }
  .calc-field { margin-bottom: 20px; position: relative; }
  .calc-field:last-child { margin-bottom: 0; }
  .calc-label {
    font-size: 14px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 1.5px;
    color: #8a6a50;
    margin-bottom: 4px;
  }
  .calc-value {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 36px; font-weight: 800;
    color: #2a1808;
    margin-bottom: 8px;
    line-height: 1;
  }

  /* Styled range slider */
  .range-slider {
    -webkit-appearance: none; appearance: none;
    width: 100%; height: 8px; border-radius: 5px;
    background: linear-gradient(90deg, rgba(196,98,42,0.2), rgba(44,90,130,0.15));
    border: 1px solid rgba(196,98,42,0.2);
    outline: none; cursor: pointer;
  }
  .range-slider::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none;
    width: 24px; height: 24px; border-radius: 50%;
    background: linear-gradient(135deg, var(--burnt-orange), var(--copper));
    box-shadow: 0 2px 12px rgba(196,98,42,0.45), 0 0 0 3px rgba(196,98,42,0.12);
    cursor: pointer; transition: transform 0.2s;
    border: 2px solid #fff;
  }
  .range-slider::-webkit-slider-thumb:hover { transform: scale(1.15); }
  /* Draggable hint: a bold white double-ended arrow baked inside the top
     slider's orange thumb so it reads as "drag me". */
  .range-slider.has-drag-hint::-webkit-slider-thumb {
    background:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cg stroke='%23ffffff' stroke-width='2.2' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='6' y1='12' x2='18' y2='12'/%3E%3Cpolyline points='9,8 5,12 9,16'/%3E%3Cpolyline points='15,8 19,12 15,16'/%3E%3C/g%3E%3C/svg%3E") center / 16px no-repeat,
      linear-gradient(135deg, var(--burnt-orange), var(--copper));
  }
  .range-slider.has-drag-hint::-moz-range-thumb {
    background:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cg stroke='%23ffffff' stroke-width='2.2' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='6' y1='12' x2='18' y2='12'/%3E%3Cpolyline points='9,8 5,12 9,16'/%3E%3Cpolyline points='15,8 19,12 15,16'/%3E%3C/g%3E%3C/svg%3E") center / 16px no-repeat,
      linear-gradient(135deg, var(--burnt-orange), var(--copper));
  }

  .roi-results {
    margin-top: 20px;
    position: relative;
  }
  .roi-results-label {
    font-size: 10px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 2px;
    color: #a0724a;
    text-align: center;
    margin-bottom: 12px;
    display: flex; align-items: center; justify-content: center; gap: 10px;
  }
  .roi-results-label::before, .roi-results-label::after {
    content: ''; flex: 1; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(196,98,42,0.25));
  }
  .roi-results-label::after {
    background: linear-gradient(90deg, rgba(196,98,42,0.25), transparent);
  }
  .result-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  }
  .result-item {
    text-align: center;
    padding: 18px 12px;
    border-radius: 12px;
    transition: all 0.3s;
  }
  /* Warm tiles: top-left (Leads) and bottom-right (Revenue) */
  .result-item.warm {
    background: linear-gradient(135deg, var(--burnt-orange), var(--rust));
    border: 1px solid rgba(255,255,255,0.12);
    box-shadow: 0 4px 20px rgba(196,98,42,0.35);
  }
  .result-item.warm:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 32px rgba(196,98,42,0.45);
  }
  .result-item.warm .result-value {
    color: var(--cream);
    -webkit-text-fill-color: var(--cream);
  }
  .result-item.warm .result-label { color: rgba(232,213,184,0.75); }
  /* Cool tiles: top-right (After-Hours) and bottom-left (Jobs) */
  .result-item.cool {
    background: linear-gradient(135deg, var(--navy), var(--deep-blue));
    border: 1px solid rgba(138,180,204,0.2);
    box-shadow: 0 4px 20px rgba(22,45,74,0.5);
  }
  .result-item.cool:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 32px rgba(22,45,74,0.6);
  }
  .result-item.cool .result-value {
    color: var(--ice-blue);
    -webkit-text-fill-color: var(--ice-blue);
  }
  .result-item.cool .result-label { color: rgba(138,180,204,0.7); }

  .result-value {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 36px; font-weight: 800;
    line-height: 1;
  }
  .result-label {
    font-size: 10px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 1.5px;
    margin-top: 5px;
  }

  /* Outcome-based sliders — two rows: spectrum labels (left/right) on the first
     row, the slider track alone on the second row. */
  .calc-spectrum-labels {
    display: flex; justify-content: space-between; align-items: flex-start;
    gap: 14px; margin-bottom: 8px;
  }
  .calc-spectrum-end {
    flex: 0 1 47%; font-size: 14px; font-weight: 800;
    color: var(--navy); line-height: 1.25;
  }
  .calc-spectrum-end.calc-spectrum-right { text-align: right; }
  .calc-field-outcome .calc-spectrum-track { width: 100%; }
  .calc-field-outcome .range-slider { width: 100%; }

  /* Outcome-based results — each tile shows its low outcome (left) and high outcome
     (right) at all times, over a colour fill that grows left→right with the slider:
     light/empty at slider minimum, dark/saturated/full at maximum. */
  .result-grid-outcome { grid-template-columns: 1fr; gap: 12px; }
  .result-item-fill {
    position: relative; overflow: hidden;
    padding: 22px 18px; min-height: 88px;
    display: flex; align-items: center; text-align: left;
  }
  .result-fill {
    position: absolute; top: 0; left: 0; bottom: 0; width: 0%;
    z-index: 0; transition: width 0.35s ease;
  }
  .result-item.warm.result-item-fill {
    background: rgba(196,98,42,0.16);
    border: 1px solid rgba(196,98,42,0.28); box-shadow: none;
  }
  .result-item.warm .result-fill { background: linear-gradient(90deg, var(--burnt-orange), var(--rust)); }
  .result-item.cool.result-item-fill {
    background: rgba(44,90,130,0.16);
    border: 1px solid rgba(44,90,130,0.30); box-shadow: none;
  }
  .result-item.cool .result-fill { background: linear-gradient(90deg, var(--navy), var(--deep-blue)); }
  .result-fill-labels {
    position: relative; z-index: 1; width: 100%;
    display: flex; justify-content: space-between; align-items: center; gap: 10px;
  }
  .result-end {
    flex: 0 1 47%;
    color: #fff;
    font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 700; line-height: 1.3;
    text-shadow: 0 1px 3px rgba(0,0,0,0.7), 0 0 2px rgba(0,0,0,0.5);
  }
  .result-end-high { text-align: right; }

  /* ===== DIVIDER ===== */
  .section-divider { max-width: 1280px; margin: 0 auto; padding: 0 48px; }
  .section-divider .line {
    height: 1px;
    background: linear-gradient(90deg, transparent 5%, rgba(196,98,42,0.2) 30%, rgba(44,90,130,0.2) 70%, transparent 95%);
  }

  /* ===== SECTION HEADERS ===== */
  .section-header { text-align: center; margin-bottom: 48px; }
  .section-label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-family: "Barlow Condensed", sans-serif;
    font-size: 22px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 3px;
    margin: 0 auto 16px;
    background: linear-gradient(135deg, #d4844a, #d4a04a);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }
  .section-label::before,
  .section-label::after {
    content: "";
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, #d4844a, transparent);
    max-width: 60px;
    -webkit-text-fill-color: initial;
  }

  .section-title { font-family: "Barlow Condensed", sans-serif; font-size: clamp(36px, 5vw, 60px); font-weight: 900; line-height: 1.05; margin-bottom: 20px; text-align: center; }
  .word-accent { background: linear-gradient(135deg, #c4622a, #d4844a, #d4a04a); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
  .section-title .warm {
    background: linear-gradient(135deg, var(--copper), var(--gold), var(--cream));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }
  .section-title .bright {
    color: #fff;
    -webkit-text-fill-color: #fff;
  }

  .section-subtitle {
    font-family: 'DM Sans', sans-serif;
    font-size: 17px;
    color: rgba(255,255,255,0.6);
    margin-top: 12px;
    font-style: italic;
  }

  /* ===== EXAMPLE OUTPUT ===== */
  .example-section {
    max-width: 1280px; margin: 0 auto;
    padding: 70px 24px;
    position: relative; z-index: 2;
  }

  .preview-tabs {
    display: flex; justify-content: center; gap: 8px;
    padding: 20px 24px 0;
  }
  .preview-tab {
    padding: 10px 28px; border-radius: 8px;
    font-family: "DM Sans", sans-serif;
    font-size: 14px; font-weight: 600; color: rgba(255,255,255,0.55);
    cursor: pointer; transition: all 0.2s;
    border: 1px solid rgba(255,255,255,0.10);
    background: rgba(255,255,255,0.05);
    display: flex; align-items: center; gap: 8px;
  }
  .preview-tab:hover {
    color: rgba(255,255,255,0.80);
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.18);
  }
  .preview-tab.active {
    background: rgba(196,98,42,0.18);
    color: #d4844a;
    border-color: rgba(196,98,42,0.45);
  }
  .preview-panel {
    display: none;
    min-height: 320px;
    padding: 32px;
    align-items: center;
    justify-content: center;
    width: 100%;
  }
  .preview-panel.active {
    display: flex;
  }
  .coming-soon-placeholder {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 16px; padding: 60px 24px;
  }
  .coming-soon-logo {
    font-size: 64px; color: rgba(196,98,42,0.20);
    line-height: 1;
  }
  .coming-soon-label {
    font-family: "Barlow Condensed", sans-serif;
    font-size: 28px; font-weight: 700;
    color: rgba(255,255,255,0.25);
    letter-spacing: 0.05em;
    margin: 0;
  }
  /* The wrapper owns the frame — its shape, its rounded corners and its clipping.
     Shape comes from the video being shown, via --video-aspect. Use the ratio the
     Loom PLAYER actually draws, measured on the live page: Loom's API reports a
     different size (1920x1080 or 1920x958 depending on the video) that does NOT
     match what is rendered, and trusting it leaves black bands. Every current
     recording draws at 1920x880, which is also the fallback.
     Loom still surrounds the picture with a few pixels of its own black, so the
     iframe is scaled up slightly and centred and the wrapper crops that away. The
     rounded corners then belong to the video itself rather than to a black box
     sitting behind it. Overscan is deliberately small — enough to swallow the
     surround, little enough to leave the player's controls usable. */
  .video-wrapper {
    width: 100%; max-width: 1120px;   /* matches .shot-carousel */
    position: relative;
    aspect-ratio: var(--video-aspect, 1920 / 880);
    border-radius: 12px;
    overflow: hidden;
  }
  .video-wrapper iframe {
    position: absolute;
    top: -1%; left: -1.6%;
    width: 103.2%; height: 102%;
    border: 0;
    display: block;
  }
  .cl-preview-block {
    display: flex; flex-direction: column; align-items: center;
    gap: 16px; width: 100%; max-width: 1120px;   /* matches .shot-carousel */
  }
  .cl-preview-note {
    font-family: "DM Sans", sans-serif;
    font-size: 14px; font-weight: 600; color: #d4844a;
    letter-spacing: 0.02em; margin: 0;
  }
  .preview-screenshot {
    max-width: 100%; border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.08);
  }
  .shot-carousel {
    display: flex; flex-direction: column; align-items: center;
    gap: 20px; width: 100%; max-width: 1120px;
  }
  .shot-viewport { width: 100%; }
  .shot-viewport .preview-screenshot { width: 100%; display: block; }
  .shot-nav { display: flex; align-items: center; justify-content: center; gap: 20px; }
  .shot-arrow {
    flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%;
    background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.2);
    color: #fff; font-size: 24px; line-height: 1;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: background 0.2s, border-color 0.2s;
  }
  .shot-arrow:hover { background: rgba(196,98,42,0.5); border-color: #c4622a; }
  .shot-dots { display: flex; gap: 9px; }
  .shot-dot {
    width: 10px; height: 10px; border-radius: 50%;
    background: rgba(255,255,255,0.25); border: none; cursor: pointer;
    padding: 0; transition: background 0.2s, transform 0.2s;
  }
  .shot-dot.active { background: #c4622a; transform: scale(1.3); }
  .svg-plug { animation: svgPlugMove 2.4s ease-in-out infinite; transform-origin: 60px 61px; }
  @keyframes svgPlugMove {
    0%, 60%, 100% { transform: translateY(0); }
    30% { transform: translateY(-6px); }
  }
  .svg-spark { animation: svgSpark 1.8s ease-in-out infinite; }
  @keyframes svgSpark {
    0%, 100% { opacity: 0.2; }
    50% { opacity: 1; stroke-dashoffset: -6; }
  }

  /* Step 2 — Settings animations */
  .svg-knob-1 { animation: svgKnob1 3s ease-in-out infinite; }
  @keyframes svgKnob1 {
    0%, 100% { cx: 64px; }
    50% { cx: 78px; }
  }
  .svg-bar-1 { animation: svgBar1 3s ease-in-out infinite; }
  @keyframes svgBar1 {
    0%, 100% { width: 38px; }
    50% { width: 52px; }
  }
  .svg-knob-2 { animation: svgKnob2 3.5s ease-in-out infinite 0.5s; }
  @keyframes svgKnob2 {
    0%, 100% { cx: 78px; }
    50% { cx: 55px; }
  }
  .svg-bar-2 { animation: svgBar2 3.5s ease-in-out infinite 0.5s; }
  @keyframes svgBar2 {
    0%, 100% { width: 52px; }
    50% { width: 29px; }
  }
  .svg-check { animation: svgCheckPop 2s ease-in-out infinite; transform-origin: 96px 18px; }
  @keyframes svgCheckPop {
    0%, 80%, 100% { transform: scale(1); opacity: 1; }
    40% { transform: scale(1.2); opacity: 0.7; }
  }

  /* Step 3 — Live animations */
  .svg-rocket { animation: svgRocketFloat 2.5s ease-in-out infinite; transform-origin: 60px 40px; }
  @keyframes svgRocketFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
  }
  .svg-flame { animation: svgFlame 0.4s ease-in-out infinite alternate; transform-origin: 60px 54px; }
  @keyframes svgFlame {
    from { transform: scaleY(1) scaleX(1); opacity: 0.9; }
    to { transform: scaleY(1.3) scaleX(0.85); opacity: 1; }
  }
  .svg-flame-inner { animation: svgFlame 0.3s ease-in-out infinite alternate 0.1s; transform-origin: 60px 55px; }
  .svg-arc-1 { animation: svgArcPulse 1.6s ease-in-out infinite; }
  .svg-arc-2 { animation: svgArcPulse 1.6s ease-in-out infinite 0.3s; }
  .svg-arc-3 { animation: svgArcPulse 1.6s ease-in-out infinite 0.6s; }
  @keyframes svgArcPulse {
    0%, 100% { opacity: 0.2; }
    50% { opacity: 1; }
  }
  /* ===== RESPONSIVE ===== */
  @media (max-width: 1100px) {
    .panel-hero { grid-template-columns: 1fr; gap: 40px; padding: 40px 28px; }
    .example-section, .pricing-footer { padding-left: 28px; padding-right: 28px; }
    .tool-title { font-size: 44px; }
    .section-title { font-size: 36px; }
  }

    /* Top bar wraps onto further rows only when its parts do not fit, so a wide screen is unchanged; the offer track stacks its lines in one grid cell to have a real width. */
    .topbar{position:sticky;top:0;z-index:100;display:flex;align-items:center;flex-wrap:wrap;row-gap:10px;padding:10px 24px;min-height:68px;background:linear-gradient(90deg, #deeef8 0%, #4A6D8C 320px, #4A6D8C 100%);box-shadow:0 4px 24px rgba(0,0,0,0.45);border-bottom:1px solid rgba(255,255,255,0.03);}
.topbar-logo{display:flex;align-items:center;gap:9px;text-decoration:none;color:#fff;flex-shrink:0;margin-right:20px;}
.topbar-logo-icon{width:30px;height:30px;background:rgba(255,255,255,0.2);border:1px solid rgba(255,255,255,0.3);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:15px;}
.topbar-logo-text{font-family:'Barlow Condensed',sans-serif;font-size:19px;font-weight:800;color:#fff;line-height:1;}
.topbar-logo-sub{font-size:8px;color:rgba(255,255,255,0.6);letter-spacing:1.5px;text-transform:uppercase;display:block;margin-top:1px;}
.topbar-nav{margin-left:64px;display:flex;align-items:center;gap:28px;margin-right:auto;}.topbar-nav a{font-family:'DM Sans',sans-serif;font-size:16px;font-weight:600;color:rgba(255,255,255,0.75);text-decoration:none;letter-spacing:0.3px;transition:color 0.2s;cursor:pointer;}

.topbar-nav a:hover{color:#fff;}
.bundle-rotator{display:flex;align-items:center;gap:8px;background:rgba(0,0,0,0.2);border:1px solid rgba(255,255,255,0.18);border-radius:20px;padding:5px 12px 5px 10px;min-width:min(320px,100% - 28px);flex-wrap:wrap;row-gap:4px;margin-right:28px;font-size:16px;line-height:normal;}.bundle-rotator-icon{font-size:13px;flex-shrink:0;}.bundle-rotator-track{position:relative;display:grid;height:19px;overflow:hidden;flex:1 0 auto;}.bundle-rotator-item{position:relative;grid-area:1/1;top:0;left:0;width:100%;font-size:12px;font-weight:600;color:rgba(255,255,255,0.9);white-space:nowrap;opacity:0;transform:translateY(100%);transition:opacity 0.5s,transform 0.5s;}.bundle-rotator-item.active{opacity:1;transform:translateY(0);}.bundle-rotator-item.exit{opacity:0;transform:translateY(-100%);}.bundle-rotator-cta{margin-left:auto;font-size:11px;font-weight:700;color:#fff;background:rgba(255,255,255,0.15);border:1px solid rgba(255,255,255,0.3);border-radius:10px;padding:3px 9px;cursor:pointer;flex-shrink:0;}
.topbar-actions{display:flex;align-items:center;gap:8px 28px;flex-wrap:wrap;min-width:0;margin-left:auto;}
.btn-signin,.btn-trial{background:none;border:none;padding:0;color:rgba(255,255,255,0.85);font-size:16px;font-weight:500;cursor:pointer;font-family:'DM Sans',sans-serif;text-decoration:none;}

/* ── HERO ── */
    .topbar-spacer { flex: 1; }



/* HIW2 — How It Works timeline */
.hiw2-section{padding:80px 40px;text-align:center}
.hiw2-label{font-family:"Barlow Condensed",sans-serif;font-size:13px;letter-spacing:3px;color:#c4622a;text-transform:uppercase;display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:16px}
.hiw2-label::before,.hiw2-label::after{content:"";display:block;width:40px;height:1px;background:#c4622a}
.hiw2-heading{font-family:"Barlow Condensed",sans-serif;font-size:48px;font-weight:700;color:#fff;text-transform:uppercase;margin:0 0 60px 0}
.hiw2-heading span{color:#c4622a}
.hiw2-track-wrap{position:relative;display:flex;align-items:flex-start;justify-content:center;max-width:1100px;margin:0 auto}
.hiw2-line{position:absolute;top:28px;left:calc(8% + 0px);right:calc(8% + 0px);height:2px;background:rgba(255,255,255,0.12);overflow:hidden}
.hiw2-line::after{content:"";position:absolute;top:-3px;left:-120px;width:120px;height:8px;border-radius:4px;background:linear-gradient(90deg,transparent 0%,#c4622a 60%,#fff 85%,transparent 100%);animation:hiw2-shoot 3s ease-in-out infinite;box-shadow:0 0 12px 3px rgba(196,98,42,0.8),0 0 24px 6px rgba(196,98,42,0.3)}
@keyframes hiw2-shoot{0%{left:-120px;animation-timing-function:ease-in}30%{left:28%;animation-timing-function:ease-out}38%{left:28%;animation-timing-function:ease-in}68%{left:56%;animation-timing-function:ease-out}76%{left:56%;animation-timing-function:ease-in}100%{left:calc(100% + 20px)}}
.hiw2-step{flex:1;display:flex;flex-direction:column;align-items:center;position:relative;z-index:1}
.hiw2-node{width:56px;height:56px;border-radius:50%;background:#172035;border:2px solid rgba(255,255,255,0.15);display:flex;align-items:center;justify-content:center;font-size:24px;margin-bottom:20px;position:relative;z-index:2}
.hiw2-step.is-live .hiw2-node{width:68px;height:68px;margin-top:-6px;background:linear-gradient(135deg,#1A5490 0%,#0d1628 100%);border:2px solid #c4622a;box-shadow:0 0 20px rgba(196,98,42,0.4);font-size:28px}
.hiw2-step-num{font-family:"Barlow Condensed",sans-serif;font-size:11px;letter-spacing:2px;color:rgba(255,255,255,0.35);text-transform:uppercase;margin-bottom:6px}
.hiw2-step-title{font-family:"Barlow Condensed",sans-serif;font-size:20px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:#fff;margin-bottom:8px}
.hiw2-step.is-live .hiw2-step-title{color:#c4622a;font-size:24px}
.hiw2-step-desc{font-size:18px;color:rgba(255,255,255,0.85);line-height:1.7;max-width:200px}
footer {
      background:#1a2f4a; padding:32px 48px 20px;
      border-top:1px solid rgba(255,255,255,0.08);
    }
    .footer-inner { max-width:1200px; margin:0 auto; }
    .footer-top { display:grid; grid-template-columns:2fr 1fr 1fr; gap:60px; margin-bottom:24px; }
    .footer-brand p { font-size:14px; font-family:'DM Sans',sans-serif; font-weight:400; color:rgba(255,255,255,0.75); line-height:1.6; margin-top:8px; max-width:300px; }
    .footer-col h4 { font-size:13px; font-family:'Barlow Condensed',sans-serif; font-weight:700; letter-spacing:3px; text-transform:uppercase; background:linear-gradient(135deg,#d4844a,#d4a04a); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; margin-bottom:10px; }
    .footer-col a { display:block; font-size:14px; font-family:'DM Sans',sans-serif; font-weight:600; color:rgba(255,255,255,0.75); text-decoration:none; margin-bottom:6px; transition:color 0.2s; }
    .footer-col a:hover { color:white; }
    .footer-bottom {
      display:flex; justify-content:space-between; align-items:center;
      padding-top:16px; border-top:1px solid rgba(255,255,255,0.08);
      font-size:13px; font-family:'DM Sans',sans-serif; font-weight:400; color:rgba(255,255,255,0.75); flex-wrap:wrap; gap:10px;
    }

    /* ── MOBILE ── */
    @media(max-width:900px) {
      nav { padding:16px 24px; }
      .nav-links { display:none; }
      .hero { padding:100px 24px 60px; }
      .hero-content { grid-template-columns:1fr; gap:50px; }
      .stats-strip { padding:40px 24px; }
      .stats-inner { justify-content:center; gap:30px; }
      .stat-divider { display:none; }
      section { padding:70px 24px; }
      .problem-grid { grid-template-columns:1fr; gap:40px; }
      .steps { flex-direction:column; gap:40px; }
      .steps::before { display:none; }
      .tools-grid { grid-template-columns:1fr 1fr; }
      .industries-grid { grid-template-columns:repeat(2,1fr); }
      .testimonials-grid { grid-template-columns:1fr; }
      .footer-top { grid-template-columns:1fr 1fr; gap:40px; }
      .footer-brand { grid-column:1/-1; }
    }
    @media(max-width:560px) {
      .tools-grid { grid-template-columns:1fr; }
      .hero-headline { font-size:48px; }
    }

    /* ── SCROLL ANIMATIONS ── */
    .fade-up { opacity:0; transform:translateY(30px); transition:opacity 0.6s ease, transform 0.6s ease; }
    .fade-up.visible { opacity:1; transform:translateY(0); }
    .fade-up:nth-child(2) { transition-delay:0.1s; }
    .fade-up:nth-child(3) { transition-delay:0.2s; }
    .fade-up:nth-child(4) { transition-delay:0.3s; }
  .atmo{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden;}

.atmo-orb{position:absolute;border-radius:50%;filter:blur(120px);}
.atmo-orb.o1{width:500px;height:500px;background:#1e3a5f;opacity:0.18;top:-200px;left:50%;transform:translateX(-50%);animation:orb1 14s ease-in-out infinite;}
.atmo-orb.o2{width:400px;height:400px;background:#2c5a82;opacity:0.13;top:40%;left:-100px;animation:orb2 16s ease-in-out infinite;}
.atmo-orb.o3{width:350px;height:350px;background:#2c5a82;opacity:0.11;bottom:-80px;right:-80px;animation:orb3 12s ease-in-out infinite;}
@keyframes orb1{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(-40px)}}
@keyframes orb2{0%,100%{transform:translateY(0)}50%{transform:translateY(-30px)}}
@keyframes orb3{0%,100%{transform:translateY(0)}50%{transform:translateY(30px)}}

/* TOPBAR */

.topbar-nav{display:flex;align-items:center;gap:24px;margin-left:64px;}.topbar-nav a{font-family:'DM Sans',sans-serif;font-size:16px;font-weight:500;color:rgba(255,255,255,0.80);text-decoration:none;letter-spacing:0.02em;transition:color 0.2s;}.topbar-nav a:hover{color:#fff;}.topbar-spacer{flex:1;}

/* ===== REVIEW BANNER ===== */
.review-banner-wrap {
  position: relative;
  overflow: hidden;
  padding: 20px 0 48px;
  width: 100%;
}
.review-track {
  display: flex;
  gap: 24px;
  padding: 8px 0 16px;
  animation: reviewStep 48s linear infinite;
  will-change: transform;
}
.review-track:hover {
  animation-play-state: paused;
}
@keyframes reviewStep {
  0%       { transform: translateX(0px); }
  13.542%  { transform: translateX(0px); }
  16.667%  { transform: translateX(-364px); }
  30.208%  { transform: translateX(-364px); }
  33.333%  { transform: translateX(-728px); }
  46.875%  { transform: translateX(-728px); }
  50%      { transform: translateX(-1092px); }
  63.542%  { transform: translateX(-1092px); }
  66.667%  { transform: translateX(-1456px); }
  80.208%  { transform: translateX(-1456px); }
  83.333%  { transform: translateX(-1820px); }
  96.875%  { transform: translateX(-1820px); }
  100%     { transform: translateX(-2184px); }
}
.review-card {
  width: 340px;
  flex-shrink: 0;
}
.review-card-inner {
  background: #c8cfd8; color: #1a2535;
  border: 1px solid rgba(0,0,0,0.08); border-radius: 12px;
  border-left: 3px solid #c4622a;
  border-radius: 12px;
  padding: 24px 22px 20px;
  height: 100%;
  box-sizing: border-box;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.review-card-inner:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.35);
}
.review-top-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}
.reviewer-avatar {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--heading-font, 'Barlow Condensed', sans-serif);
  font-size: 15px;
  font-weight: 800;
  color: #fff;
  letter-spacing: 0.04em;
  border: 2px solid rgba(26,37,53,0.15);
}
.reviewer-meta {
  flex: 1;
  min-width: 0;
}
.reviewer-tool {
  font-family: var(--body-font, 'DM Sans', sans-serif);
  font-size: 11px;
  font-weight: 700;
  color: rgba(26,37,53,0.6);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  white-space: normal;
  line-height: 1.3;
  margin-bottom: 4px;
}
.reviewer-pillar {
  font-family: var(--body-font, 'DM Sans', sans-serif);
  font-size: 13px;
  font-weight: 500;
  color: rgba(26,37,53,0.7);
}
.review-stars {
  color: #c4622a;
  font-size: 15px;
  letter-spacing: 2px;
  margin-bottom: 12px;
}
.review-text {
  font-family: var(--body-font, 'DM Sans', sans-serif);
  font-size: 15px;
  font-weight: 400;
  color: #1a2535;
  line-height: 1.65;
  margin: 0 0 16px;
}
.reviewer-id {
  font-family: var(--body-font, 'DM Sans', sans-serif);
  font-size: 13px;
  color: rgba(26,37,53,0.62);
  font-weight: 400;
}
.review-fade-left,
.review-fade-right { display:none; }
.review-fade-left { display:none; }
.review-fade-right {
  right: 0;
  background: linear-gradient(to left, var(--dark, #0d1b2a) 0%, transparent 100%);
}
@media (max-width: 768px) {
  .review-card { width: 290px; }
  .review-fade-left, .review-fade-right { width: 40px; }
}
/* ===== END REVIEW BANNER ===== */

    .footer-eyebrow { display:flex; align-items:center; gap:8px; font-size:13px; font-family:'Barlow Condensed',sans-serif; font-weight:700; letter-spacing:3px; text-transform:uppercase; background:linear-gradient(135deg,#d4844a,#d4a04a); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; margin-bottom:10px; margin-left:-28px; }
    .footer-eyebrow::before { content:''; width:20px; height:1px; background:linear-gradient(90deg,transparent,#d4844a); flex-shrink:0; }
    .footer-eyebrow::after { content:''; width:20px; height:1px; background:linear-gradient(90deg,#d4844a,transparent); flex-shrink:0; }

/* ===== TOOL CTA MODAL — pre-login dark theme ===== */
/* Signup v3.0 §4.1.2 — two-button CTA (replaces the removed three-option modal) */
.cta-buttons { display:flex; flex-direction:column; gap:6px; align-items:stretch; max-width:440px; }
.cta-buttons .btn-cta { width:100%; }
.btn-cta-secondary { background:transparent; color:#fff; border:1.5px solid rgba(255,255,255,0.45); }
.btn-cta-secondary:hover { border-color:#fff; background:rgba(255,255,255,0.06); }
/* ===== END TOOL CTA MODAL ===== */