:root{
    /* palette pulled from the Promo Lizard logo */
    --ink:#0E3A46;          /* dark teal — matches "PROMO" wordmark */
    --slate:#5C7381;        /* blue-grey — matches "STRATEGIC VISIBILITY" */
    --slate-light:#93A6AF;
    --bg:#F6F8F8;
    --card:#FFFFFF;
    --border:#E1E8EA;
    --border-soft:#EDF2F3;
    --green:#ED7220;        /* logo orange — primary accent / CTAs */
    --green-dark:#C85A12;   /* deeper orange — hover states */
    --green-light:#FDEEE3;  /* pale orange tint — pills, badges */
    --green-lighter:#FFF8F3;
    --lime:#FDA25C;         /* light orange — gradient start */
    --teal:#0E3A46;         /* dark teal — logo mark, secondary accent */
    --teal-mid:#196D77;     /* mid teal — logo mark, secondary accent */
    --danger:#DC4C3F;
    --radius-lg:22px;
    --radius-md:14px;
    --radius-sm:10px;
    --font: 'Plus Jakarta Sans', sans-serif;
    --shadow-card: 0 1px 2px rgba(20,20,20,0.03), 0 20px 40px -20px rgba(20,20,20,0.16);
  }

  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    background:var(--bg);
    color:var(--ink);
    font-family:var(--font);
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  img,svg{display:block;}
  button{font-family:inherit;cursor:pointer;}
  a{color:inherit;}

  @media (prefers-reduced-motion: reduce){
    *{animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important;}
  }
  :focus-visible{outline:3px solid var(--green-dark);outline-offset:2px;}

  .wrap{max-width:1180px;margin:0 auto;padding:0 24px;}
  .icon{width:16px;height:16px;flex:0 0 16px;color:var(--green-dark);}
  .icon path,.icon circle,.icon line,.icon polyline,.icon rect,.icon polygon{stroke:currentColor;}

  /* ---------- decorative bg blobs (page-level, subtle) ---------- */
  .bg-decor{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;}
  .bg-decor span{position:absolute;border-radius:40px;opacity:0.5;}
  .bg-decor .b1{width:120px;height:220px;background:linear-gradient(180deg,var(--lime),var(--green));top:-60px;right:8%;transform:rotate(18deg);opacity:0.35;}
  .bg-decor .b2{width:260px;height:260px;border:1px solid var(--border);border-radius:50%;top:120px;right:-80px;}
  .bg-decor .b3{width:90px;height:180px;background:linear-gradient(180deg,var(--green),var(--lime));bottom:-40px;left:4%;transform:rotate(-14deg);opacity:0.3;}
  .bg-decor .dot{width:8px;height:8px;border-radius:50%;background:var(--green);}
  .bg-decor .d1{top:70px;right:14%;}
  .bg-decor .d2{top:190px;left:6%;background:var(--slate-light);}
  @media (max-width:900px){.bg-decor{display:none;}}

  /* ---------- topbar ---------- */
  .topbar{
    position:sticky;top:0;z-index:40;
    background:rgba(255,255,255,0.9);
    backdrop-filter:blur(8px);
    border-bottom:1px solid var(--border-soft);
  }
  .topbar-inner{
    display:flex;align-items:center;justify-content:space-between;
    padding:18px 0;
  }
  .logo{
    display:flex;align-items:center;gap:10px;
    font-weight:800;
    font-size:19px;
    letter-spacing:-0.01em;
    text-decoration:none;
    color:var(--ink);
  }
  .logo-mark{
    width:36px;height:36px;border-radius:10px;
    display:flex;align-items:center;justify-content:center;
    flex:0 0 36px;
    overflow:hidden;
  }
  .logo-mark img{width:100%;height:100%;object-fit:contain;}
  .logo-word .promo{color:var(--ink);}
  .logo-word .lizard{color:var(--green);}
  .nav-links{
    display:flex;align-items:center;gap:34px;
    font-size:14.5px;font-weight:600;color:#2B3340;
  }
  .nav-links a{text-decoration:none;transition:color 0.15s ease;}
  .nav-links a:hover{color:var(--green-dark);}
  @media (max-width:820px){.nav-links{display:none;}}
  .btn-nav-cta{
    font-size:14px;font-weight:700;
    background:var(--green);
    color:#fff;
    padding:11px 20px;
    border-radius:100px;
    border:none;
    text-decoration:none;
    transition:background 0.15s ease, transform 0.15s ease;
    box-shadow:0 6px 14px -6px rgba(237,114,32,0.55);
  }
  .btn-nav-cta:hover{background:var(--green-dark);transform:translateY(-1px);}

  /* ---------- hero ---------- */
  .hero{padding:72px 0 24px;text-align:center;position:relative;}
  .hero-mascot{width:320px;max-width:70vw;margin:0 auto 20px;}
  .hero-mascot img{width:100%;height:auto;display:block;}
  .eyebrow-pill{
    display:inline-flex;align-items:center;gap:8px;
    font-size:13px;font-weight:700;
    color:var(--green-dark);
    background:var(--green-light);
    border-radius:100px;
    padding:8px 16px;
    margin-bottom:24px;
  }
  .eyebrow-pill svg{width:14px;height:14px;}
  .hero-headline{
    font-weight:800;
    font-size:clamp(32px,5.2vw,50px);
    line-height:1.08;
    letter-spacing:-0.02em;
    margin:0 auto 16px;
    max-width:16ch;
  }
  .hero-headline .accent{color:var(--green-dark);}
  .hero-sub{
    font-size:17px;
    line-height:1.6;
    color:var(--slate);
    max-width:46ch;
    margin:0 auto 12px;
  }
  .hero-meta{
    font-size:13px;
    font-weight:600;
    color:var(--slate-light);
    margin-bottom:44px;
    display:inline-flex;align-items:center;gap:8px;
  }
  .hero-meta .sep{width:3px;height:3px;border-radius:50%;background:var(--slate-light);}

  /* ---------- questionnaire section ---------- */
  .quiz-section{padding:52px 0 96px;}

  .ticket{
    position:relative;
    max-width:700px;
    margin:0 auto;
    background:var(--card);
    border:1px solid var(--border);
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow-card);
    overflow:hidden;
  }

  .ticket-header{padding:26px 32px 20px;}
  .ticket-toprow{
    display:flex;align-items:baseline;justify-content:space-between;
    gap:12px;margin-bottom:14px;
    flex-wrap:wrap;
  }
  .ticket-qlabel{
    font-size:14px;color:var(--slate);
  }
  .ticket-qlabel b{color:var(--ink);font-weight:700;}
  .ticket-pct{
    font-size:13px;font-weight:700;color:var(--green-dark);
    white-space:nowrap;
  }
  .progress-bar{
    width:100%;height:8px;border-radius:100px;
    background:var(--border-soft);
    overflow:hidden;
  }
  .progress-bar i{
    display:block;height:100%;border-radius:100px;
    background:linear-gradient(90deg, var(--lime), var(--green));
    width:0%;
    transition:width 0.45s ease;
  }

  .ticket-body{padding:6px 32px 8px;min-height:380px;}
  .step-panel{display:none;animation:fadeUp 0.35s ease both;}
  .step-panel.active{display:block;}
  @keyframes fadeUp{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}

  .step-title{
    font-size:21px;font-weight:800;
    letter-spacing:-0.01em;
    margin:8px 0 6px;
  }
  .step-note{
    font-size:14px;color:var(--slate);
    line-height:1.55;
    margin:0 0 22px;
    max-width:52ch;
  }

  .field{margin-bottom:20px;}
  .field:last-child{margin-bottom:0;}
  .field label.field-label{
    display:block;
    font-size:13.5px;font-weight:700;
    color:var(--ink);
    margin-bottom:9px;
  }
  .field .optional{color:var(--slate-light);font-weight:500;}

  input[type="text"], input[type="url"], input[type="email"], input[type="tel"], textarea, select{
    width:100%;
    font-family:var(--font);
    font-size:15px;
    color:var(--ink);
    background:#fff;
    border:1.5px solid var(--border);
    border-radius:var(--radius-sm);
    padding:12px 14px;
    transition:border-color 0.15s ease, box-shadow 0.15s ease;
  }
  select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1L7 7L13 1' stroke='%236B7280' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 15px center;padding-right:38px;}
  textarea{resize:vertical;min-height:82px;}
  input:focus, textarea:focus, select:focus{
    border-color:var(--green);
    box-shadow:0 0 0 4px var(--green-light);
    outline:none;
  }
  input.invalid, textarea.invalid, select.invalid{border-color:var(--danger);}
  .error-msg{display:none;font-size:12.5px;color:var(--danger);margin-top:7px;font-weight:600;}
  .field.has-error .error-msg{display:block;}
  .field.has-error input, .field.has-error textarea, .field.has-error select{border-color:var(--danger);}

  .option-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
  @media (max-width:520px){.option-grid{grid-template-columns:1fr;}}
  .option-grid.single-col{grid-template-columns:1fr;}

  .pill-option{position:relative;}
  .pill-option input{position:absolute;opacity:0;width:0;height:0;}
  .pill-option label{
    display:flex;align-items:center;gap:10px;
    border:1.5px solid var(--border);
    background:#fff;
    border-radius:var(--radius-sm);
    padding:12px 14px;
    font-size:14px;font-weight:600;
    color:#374151;
    cursor:pointer;
    transition:border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
  }
  .pill-option label .radio-dot{
    width:18px;height:18px;flex:0 0 18px;
    border:1.5px solid #D5D9DE;
    border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    transition:border-color 0.15s ease;
  }
  .pill-option input[type="checkbox"] + label .radio-dot{border-radius:5px;}
  .pill-option label .radio-dot .fill{
    width:9px;height:9px;border-radius:50%;background:var(--green);opacity:0;transform:scale(0.4);
    transition:opacity 0.15s ease, transform 0.15s ease;
  }
  .pill-option input[type="checkbox"] + label .radio-dot .fill{border-radius:2px;}
  .pill-option label .opt-icon{color:var(--slate);transition:color 0.15s ease;}
  .pill-option input:checked + label{
    border-color:var(--green);
    background:var(--green-lighter);
    box-shadow:0 0 0 3px var(--green-light);
    color:var(--ink);
  }
  .pill-option input:checked + label .radio-dot{border-color:var(--green);}
  .pill-option input:checked + label .radio-dot .fill{opacity:1;transform:scale(1);}
  .pill-option input:checked + label .opt-icon{color:var(--green-dark);}
  .pill-option input:focus-visible + label{outline:3px solid var(--green-dark);outline-offset:2px;}
  .pill-option label:hover{border-color:#BFC6CE;}

  .field-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
  @media (max-width:560px){.field-row{grid-template-columns:1fr;}}

  .helper-callout{
    display:flex;gap:12px;
    background:var(--green-lighter);
    border:1px solid var(--green-light);
    border-radius:var(--radius-sm);
    padding:14px 16px;
    margin-bottom:22px;
    font-size:13.5px;line-height:1.55;color:#33403A;
  }
  .helper-callout svg{flex:0 0 18px;margin-top:2px;color:var(--green-dark);}

  .ticket-footer{padding:18px 32px 30px;}
  .btn-continue{
    width:100%;
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:2px;
    background:linear-gradient(180deg, var(--green) 0%, var(--green-dark) 100%);
    color:#fff;
    border:none;border-radius:var(--radius-md);
    padding:16px 20px;
    box-shadow:0 10px 20px -10px rgba(200,90,18,0.7);
    transition:transform 0.15s ease, box-shadow 0.15s ease;
  }
  .btn-continue:hover{transform:translateY(-1px);box-shadow:0 14px 24px -10px rgba(200,90,18,0.8);}
  .btn-continue:active{transform:translateY(0);}
  .btn-continue .cta-main{font-size:15.5px;font-weight:700;display:flex;align-items:center;gap:8px;}
  .btn-continue .cta-sub{font-size:12px;font-weight:600;opacity:0.85;}

  .footer-row{
    display:flex;align-items:center;justify-content:space-between;
    gap:12px;margin-top:14px;
  }
  .btn-back{
    background:transparent;border:none;
    font-size:13.5px;font-weight:700;color:var(--slate);
    display:flex;align-items:center;gap:6px;
    padding:8px 4px;
    transition:color 0.15s ease;
  }
  .btn-back:hover{color:var(--ink);}
  .btn-back:disabled{opacity:0;pointer-events:none;}
  .btn-back svg{width:14px;height:14px;}

  .need-help{
    text-align:center;font-size:13.5px;color:var(--slate);margin-top:26px;
  }
  .need-help a{color:var(--green-dark);font-weight:700;text-decoration:none;}
  .need-help a:hover{text-decoration:underline;}

  /* ---------- results panel ---------- */
  .result-panel{display:none;text-align:center;padding:18px 4px 4px;}
  .result-panel.active{display:block;animation:fadeUp 0.5s ease both;}
  .result-icon{
    width:56px;height:56px;border-radius:50%;
    background:var(--green-light);
    display:flex;align-items:center;justify-content:center;
    margin:0 auto 18px;
  }
  .result-icon svg{width:26px;height:26px;color:var(--green-dark);}
  .result-eyebrow{font-size:12.5px;letter-spacing:0.04em;text-transform:uppercase;color:var(--green-dark);font-weight:800;margin-bottom:8px;}
  .result-title{font-size:24px;font-weight:800;margin:0 0 12px;line-height:1.15;}
  .result-cards{display:grid;gap:10px;text-align:left;margin:22px 0 6px;}
  .result-card{
    border:1px solid var(--border);
    background:#fff;
    border-radius:var(--radius-sm);
    padding:15px 16px;
    font-size:14px;line-height:1.55;color:#374151;
    display:flex;gap:12px;align-items:flex-start;
  }
  .result-card .tag{
    flex:0 0 auto;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:0.03em;
    background:var(--green-light);color:var(--green-dark);
    padding:4px 9px;border-radius:100px;margin-top:2px;
  }
  .result-disclaimer{font-size:12.5px;color:var(--slate-light);margin-top:18px;}
  .result-actions{margin-top:26px;display:flex;justify-content:center;gap:12px;flex-wrap:wrap;}
  .result-actions .btn-back{border:1.5px solid var(--border);border-radius:100px;padding:12px 20px;}
  .result-actions .btn-continue{width:auto;flex-direction:row;padding:13px 24px;}
  .result-actions .btn-continue .cta-main{font-size:14px;}

  /* ---------- final CTA ---------- */
  .final-cta{
    background:linear-gradient(135deg, #0E3A46, #196D77 55%, #ED7220);
    padding:80px 0;
    position:relative;overflow:hidden;
  }
  .final-cta::before{
    content:"";position:absolute;inset:0;
    background-image:radial-gradient(rgba(255,255,255,0.5) 1px, transparent 1.6px);
    background-size:22px 22px;
    opacity:0.15;
  }
  .final-inner{position:relative;text-align:center;max-width:600px;margin:0 auto;}
  .final-title{font-size:clamp(28px,4.4vw,42px);font-weight:800;line-height:1.1;margin:0 0 14px;color:#fff;letter-spacing:-0.01em;}
  .final-text{font-size:15.5px;line-height:1.6;color:rgba(255,255,255,0.88);margin:0 0 30px;}
  .btn-white{
    display:inline-flex;align-items:center;gap:8px;
    background:#fff;color:var(--green-dark);
    font-weight:700;font-size:15px;
    padding:15px 28px;border-radius:100px;border:none;
    box-shadow:0 10px 24px -8px rgba(0,0,0,0.25);
    transition:transform 0.15s ease;
    text-decoration:none;
  }
  .btn-white:hover{transform:translateY(-2px);}
  .final-meta{margin-top:16px;font-size:12.5px;font-weight:700;letter-spacing:0.03em;color:rgba(255,255,255,0.75);}

  /* ---------- footer ---------- */
  footer{background:#fff;padding:44px 0 32px;border-top:1px solid var(--border-soft);}
  .footer-top{
    display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:28px;
    padding-bottom:28px;border-bottom:1px solid var(--border-soft);
  }
  .footer-brand .logo{margin-bottom:10px;}
  .footer-tag{font-size:13.5px;color:var(--slate);max-width:32ch;}
  .footer-contact{font-size:13.5px;line-height:2;font-weight:600;}
  .footer-contact a{text-decoration:none;color:var(--ink);}
  .footer-contact a:hover{color:var(--green-dark);}
  .footer-bottom{
    display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;
    padding-top:22px;font-size:12.5px;color:var(--slate-light);
  }
  .footer-links{display:flex;gap:20px;}
  .footer-links a{text-decoration:none;color:var(--slate);font-weight:600;}
  .footer-links a:hover{color:var(--green-dark);}