:root{
    --amber: #d9a44c;
    --amber-dark: #c28d38;
    --ice: #bcdcf0;

    --font-display: "Poppins", -apple-system, sans-serif;
    --font-body: "Inter", -apple-system, sans-serif;
    --font-mono: "IBM Plex Mono", monospace;

    --radius-organic: 62% 38% 55% 45% / 45% 52% 48% 55%;
    --container: 1180px;

    --glass-shine: linear-gradient(115deg, transparent 20%, rgba(255,255,255,0.55) 34%, rgba(255,255,255,0.08) 42%, transparent 55%);
  }

  *{ box-sizing: border-box; margin:0; padding:0; }
  html{ scroll-behavior: smooth; }
  body{ font-family: var(--font-body); line-height: 1.6; overflow-x: hidden; background:#081226; }
  img{ max-width: 100%; display:block; }
  a{ color: inherit; text-decoration: none; }
  .wrap{ max-width: var(--container); margin: 0 auto; padding: 0 24px; position:relative; z-index:1; }
  h1,h2,h3{ font-family: var(--font-display); font-weight: 600; letter-spacing: -0.02em; }
  h1{ font-weight: 700; }

  /* ---------- Theming: cada <section> recebe um bg-* e on-dark/on-light ---------- */
  .bg-navy{ background:#081226; }
  .bg-petrol{ background:#0d1c38; }
  .bg-black{ background:#050d1c; }
  .bg-ice{ background:#f7f9fc; }
  .bg-gray{ background:#f2f4f7; }

  .on-dark{
    --t-text:#eef3fa; --t-muted:#90a5c4; --t-faint:#5c7096;
    --t-card:rgba(160,200,235,0.06); --t-border:rgba(190,216,240,0.16);
    --t-accent:#d9a44c; --t-line:rgba(140,178,224,0.18);
    color: var(--t-text);
  }
  .on-light{
    --t-text:#1b2430; --t-muted:#6b7280; --t-faint:#8a93a3;
    --t-card:#ffffff; --t-border:rgba(27,36,48,0.09);
    --t-accent:#b9812e; --t-line:rgba(27,36,48,0.09);
    color: var(--t-text);
  }

  section{ position: relative; padding: 88px 0; overflow: hidden; }
  .on-dark::before{
    content:"";
    position:absolute; inset:0; z-index:0; pointer-events:none;
    background: radial-gradient(ellipse 900px 500px at 90% -10%, rgba(30,63,120,0.28), transparent 60%);
  }
  section > .wrap{ position:relative; z-index:1; }

  .eyebrow{ font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--t-accent); }
  .section-head{ max-width: 640px; margin-bottom: 48px; }
  .section-head h2{ font-size: clamp(1.6rem, 3.2vw, 2.3rem); margin-top: 14px; }
  .section-head p{ color: var(--t-muted); margin-top: 14px; }

  /* ---------- Botões ---------- */
  .btn{
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    padding: 15px 28px; border-radius: 10px; font-weight: 600; font-size: 0.98rem;
    cursor:pointer; border: 1px solid transparent;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    font-family: var(--font-body);
  }
  .btn:focus-visible{ outline: 2px solid var(--ice); outline-offset: 3px; }
  .btn-primary{
    background: linear-gradient(135deg, var(--amber), var(--amber-dark));
    color: #1a1204;
    box-shadow: 0 10px 30px -8px rgba(217,164,76,0.45);
  }
  .btn-primary:hover{ transform: translateY(-2px); box-shadow: 0 14px 34px -8px rgba(217,164,76,0.6); }
  .btn-ghost{
    background: var(--t-card); border-color: var(--t-border); color: var(--t-text);
    backdrop-filter: blur(10px);
  }
  .btn-ghost:hover{ background: var(--t-border); }
  .btn-block{ width:100%; }
  .btn[disabled]{ opacity:0.4; cursor:not-allowed; transform:none !important; box-shadow:none !important; }
  .nav-cta .btn-primary{
    padding: 11px 22px; font-size:0.85rem; border-radius: 9px;
    box-shadow: 0 6px 18px -9px rgba(217,164,76,0.55);
  }
  .nav-cta .btn-primary:hover{ box-shadow: 0 8px 20px -8px rgba(217,164,76,0.65); }

  /* ---------- Header ---------- */
  header{
    position: sticky; top:0; z-index: 60;
    background: rgba(8,18,38,0.7); backdrop-filter: blur(16px) saturate(140%);
    border-bottom: 1px solid rgba(140,178,224,0.14);
    transition: padding 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
  }
  header.scrolled{
    background: rgba(6,14,30,0.86);
    box-shadow: 0 12px 30px -18px rgba(0,0,0,0.55);
  }
  .nav{ display:flex; align-items:center; justify-content:space-between; padding: 14px 4px; transition: padding 0.25s ease; }
  header.scrolled .nav{ padding: 9px 4px; }
  .brand{ display:flex; align-items:center; gap:11px; color:#eef3fa; min-width:0; margin-left:8px; }
  .brand-logo-frame{
    flex:0 0 auto; width:38px; height:38px; border-radius:10px; padding:6px;
    background: rgba(217,164,76,0.08); border:1px solid rgba(190,216,240,0.16);
    display:flex; align-items:center; justify-content:center; transition: width 0.25s ease, height 0.25s ease;
  }
  header.scrolled .brand-logo-frame{ width:32px; height:32px; }
  .brand img{ height:100%; width:auto; display:block; }
  .brand-text{ display:flex; flex-direction:column; line-height:1.15; min-width:0; }
  .brand-name{
    font-family: var(--font-display); font-size:0.94rem; font-weight:600; letter-spacing:-0.01em;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  .brand-name .full{ color:#eef3fa; font-weight:500; }
  .brand-name .accent{
    font-weight:700;
    background: linear-gradient(120deg, var(--amber) 10%, #f3d9a0 45%, var(--amber-dark) 85%);
    -webkit-background-clip: text; background-clip:text; color:transparent;
  }
  .brand-tagline{ font-family: var(--font-mono); font-size:0.56rem; color:#5c7096; letter-spacing:0.08em; margin-top:1px; }
  .nav-links{ display:none; align-items:center; gap:28px; }
  .nav-links a{ font-size:0.86rem; color:#90a5c4; font-weight:500; }
  .nav-links a:hover{ color:#eef3fa; }
  .nav-phone{ font-family: var(--font-mono); font-size:0.78rem; color: var(--ice); }
  /* CTA de orçamento sempre visível no header, inclusive no celular */
  .nav-cta{ display:flex; align-items:center; gap:10px; margin-right:4px; flex:0 0 auto; }
  .nav-phone{ display:none; }
  .nav-cta .btn-primary{ padding: 10px 14px; font-size:0.82rem; }
  .cta-label-full{ display:none; }
  .cta-label-short{ display:inline; }
  @media(min-width: 860px){
    .nav-links{ display:flex; }
    .nav-phone{ display:inline; }
    .nav-cta{ gap:16px; margin-right:8px; }
    .nav-cta .btn-primary{ padding: 11px 22px; font-size:0.85rem; }
    .cta-label-full{ display:inline; }
    .cta-label-short{ display:none; }
  }
  @media(max-width: 480px){ .brand-tagline{ display:none; } }
  @media(max-width: 360px){ .brand-text{ display:none; } }

  /* ---------- Hero ---------- */
  .hero{ padding: 40px 0 52px; }
  .hero-grid{ display:grid; grid-template-columns: 1fr; gap:40px; align-items:center; }
  @media(min-width: 940px){ .hero-grid{ grid-template-columns: 1.05fr 0.95fr; } }
  .hero-copy h1{ font-size: clamp(1.9rem, 3.6vw, 2.7rem); line-height:1.12; margin: 14px 0 16px; }
  .hero-copy h1 em{ font-style:normal; color: var(--ice); }
  .hero-copy p{ color: var(--t-muted); font-size:1.02rem; max-width:46ch; margin-bottom:16px; }
  .hero-microbarrier{
    font-size: 0.84rem; color: var(--t-faint); margin-bottom: 16px;
    border-left: 2px solid var(--t-accent); padding-left: 12px;
  }
  .hero-actions{ display:flex; flex-wrap:wrap; gap:14px; margin-bottom:20px; }
  .hero-trust{ display:flex; flex-wrap:wrap; gap:22px; font-size:0.86rem; color: var(--t-muted); }
  .hero-trust span{ display:flex; align-items:center; gap:7px; }
  .stars{ color: var(--amber); letter-spacing:1px; }

  .hero-visual{ position:relative; max-width: 380px; margin: 0 auto; }
  @media(min-width: 940px){ .hero-visual{ max-width: none; margin:0; } }
  .organic-frame{
    position:relative; border-radius: var(--radius-organic); overflow:hidden; aspect-ratio: 1/1;
    background:#0d1c38; border:1px solid rgba(190,216,240,0.16);
    box-shadow: 0 30px 60px -26px rgba(0,0,0,0.6);
  }
  .organic-frame img{ width:100%; height:100%; object-fit:cover; }
  .organic-frame::after{
    content:""; position:absolute; inset:0;
    background: linear-gradient(135deg, rgba(188,220,240,0.14), transparent 40%, rgba(217,164,76,0.08));
    mix-blend-mode: screen;
  }
  .hero-badge{
    position:absolute; bottom:-18px; left:-18px;
    background: rgba(13,28,56,0.9); border:1px solid rgba(190,216,240,0.16); backdrop-filter: blur(14px);
    border-radius:16px; padding:14px 18px; max-width:210px; box-shadow: 0 20px 50px -20px rgba(0,0,0,0.6);
  }
  .hero-badge .num{ font-family: var(--font-mono); color: var(--amber); font-size:1.2rem; }
  .hero-badge p{ font-size:0.78rem; color:#90a5c4; margin-top:4px; }

  /* ---------- Cards genéricos (prova social / diferenciais) ---------- */
  .proof-grid{ display:grid; grid-template-columns: 1fr; gap:20px; }
  @media(min-width: 780px){ .proof-grid{ grid-template-columns: repeat(3,1fr); } }
  .proof-card{
    position:relative; overflow:hidden; isolation:isolate;
    display:flex; flex-direction:column;
    background: #fff; border:1px solid var(--t-border); border-radius:18px; padding:28px 26px 24px;
    box-shadow: 0 14px 32px -24px rgba(20,30,50,0.3);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
  }
  .proof-card:hover{ transform: translateY(-4px); box-shadow: 0 18px 38px -20px rgba(20,30,50,0.32); }
  .proof-card > *{ position:relative; z-index:1; }
  .proof-card .quote-mark{
    font-family: var(--font-display); font-size:2.6rem; line-height:1; color: var(--t-accent);
    opacity:0.4; display:block; margin-bottom:2px;
  }
  .proof-card .stars{ margin-bottom:12px; display:block; }
  .proof-card p{ color: var(--t-text); font-size:0.96rem; flex: 1 1 auto; }
  .proof-card footer{
    margin-top:18px; padding-top:16px; border-top:1px solid var(--t-line);
    display:flex; align-items:center; gap:10px;
    font-family: var(--font-mono); font-size:0.74rem; color: var(--t-faint);
  }
  .proof-card footer .avatar{
    flex:0 0 auto; width:26px; height:26px; border-radius:50%;
    background: linear-gradient(135deg, var(--amber), var(--amber-dark)); color:#1a1204;
    font-family: var(--font-body); font-weight:700; font-size:0.7rem;
    display:flex; align-items:center; justify-content:center;
  }

  @keyframes glass-sweep{
    0%, 12%{ transform: translateX(-140%) skewX(-12deg); }
    38%, 100%{ transform: translateX(140%) skewX(-12deg); }
  }

  .proof-section{ padding-top:60px; }
  .proof-header{
    display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end;
    gap:24px; margin-bottom:40px;
  }
  .proof-header .section-head{ margin-bottom:0; }
  .proof-rating-card{
    display:flex; align-items:center; gap:14px;
    background:#fff; border:1px solid var(--t-border); border-radius:16px; padding:16px 22px;
    box-shadow: 0 14px 30px -22px rgba(20,30,50,0.28);
  }
  .proof-rating-card .score{ font-family: var(--font-mono); font-size:1.9rem; color: var(--t-accent); line-height:1; }
  .proof-rating-card .stars{ font-size:0.85rem; display:block; margin-bottom:3px; }
  .proof-rating-card .meta{ font-size:0.78rem; color: var(--t-muted); line-height:1.35; }

  .proof-rating{ display:flex; align-items:center; gap:16px; margin-bottom:34px; flex-wrap:wrap; }
  .proof-rating .big{ font-family: var(--font-mono); font-size:2.2rem; color: var(--t-accent); }
  .proof-rating .meta{ font-size:0.85rem; color: var(--t-muted); }
  .proof-note{ margin-top: 30px; font-size:0.9rem; color: var(--t-muted); font-style: italic; }

  .diff-grid{ display:grid; grid-template-columns: 1fr; gap:16px; }
  @media(min-width: 520px){ .diff-grid{ grid-template-columns: repeat(2,1fr); gap:18px; } }
  @media(min-width: 780px){ .diff-grid{ grid-template-columns: repeat(4,1fr); gap:20px; } }
  .diff-card{
    position:relative; overflow:hidden; isolation:isolate;
    border:1px solid var(--t-border); border-radius:14px; padding:22px 20px; background: var(--t-card);
    transition: transform 0.3s ease, border-color 0.3s ease;
  }
  .diff-card:hover{ transform: translateY(-3px); border-color: var(--t-accent); }
  .diff-card::before{
    content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
    background: var(--glass-shine); transform: translateX(-140%) skewX(-12deg);
    animation: glass-sweep 8s ease-in-out infinite;
  }
  .diff-card:nth-child(2)::before{ animation-delay: 1.2s; }
  .diff-card:nth-child(3)::before{ animation-delay: 2.4s; }
  .diff-card:nth-child(4)::before{ animation-delay: 3.6s; }
  .diff-card > *{ position:relative; z-index:1; }
  .diff-card .icon{ font-family: var(--font-mono); color: var(--t-accent); font-size:0.75rem; letter-spacing:0.08em; text-transform:uppercase; }
  .diff-card h3{ font-size:1rem; margin:12px 0 8px; font-family: var(--font-body); font-weight:600; }
  .diff-card p{ font-size:0.87rem; color: var(--t-muted); }

  /* ---------- Quanto custa ---------- */
  .cost-box{
    position:relative; isolation:isolate; overflow:hidden;
    margin-top: 44px; border:1px solid var(--t-border); border-radius:22px; padding: 40px;
    background: var(--t-card);
  }
  .cost-box::before{
    content:""; position:absolute; top:0; left:0; right:0; height:3px;
    background: linear-gradient(90deg, var(--amber), var(--amber-dark) 55%, transparent);
  }
  .cost-top{ max-width:640px; margin-bottom:30px; }
  .cost-eyebrow{
    font-family: var(--font-mono); font-size:0.7rem; letter-spacing:0.12em; text-transform:uppercase;
    color: var(--t-accent); display:block; margin-bottom:12px;
  }
  .cost-top h3{ font-size:1.3rem; margin-bottom:10px; font-family: var(--font-display); font-weight:600; }
  .cost-top p{ color: var(--t-muted); font-size:0.93rem; }
  .cost-factors{ display:grid; grid-template-columns: 1fr; gap:14px; }
  @media(min-width: 460px){ .cost-factors{ grid-template-columns: repeat(2,1fr); } }
  @media(min-width: 700px){ .cost-factors{ grid-template-columns: repeat(4,1fr); } }
  .cost-factor{
    border:1px solid var(--t-border); border-radius:14px; padding:18px 16px;
    background: rgba(160,200,235,0.03); display:flex; flex-direction:column; gap:8px;
    transition: border-color 0.2s ease;
  }
  .cost-factor:hover{ border-color: var(--t-accent); }
  .cost-factor .n{ font-family: var(--font-mono); font-size:1.35rem; color: var(--t-accent); opacity:0.65; }
  .cost-factor span:last-child{ font-size:0.87rem; color: var(--t-text); font-weight:500; line-height:1.35; }

  /* ---------- Serviços (chips) ---------- */
  .services-chips-wrap{
    border:1px solid var(--t-border); border-radius:20px; padding:24px 26px;
    background: var(--t-card); margin-bottom: 52px;
  }
  .services-chips{ display:flex; flex-wrap:wrap; gap:10px; }
  .chip{
    font-family: var(--font-body); font-weight:500; font-size:0.85rem; padding:9px 16px; border-radius:999px;
    border:1px solid var(--t-border); background:#fff; color: var(--t-text);
    transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
  }
  .chip:hover{ border-color: var(--t-accent); background: rgba(217,164,76,0.08); transform: translateY(-1px); }

  /* ---------- Portfólio ---------- */
  .portfolio-grid{ display:grid; grid-template-columns:1fr; gap:28px; }
  @media(min-width: 700px){ .portfolio-grid{ grid-template-columns: repeat(2,1fr);} }
  @media(min-width: 1040px){ .portfolio-grid{ grid-template-columns: repeat(3,1fr);} }
  .portfolio-item{ position:relative; }
  .portfolio-frame{
    position:relative; isolation:isolate;
    border-radius: 28px 12px 28px 12px; overflow:hidden; aspect-ratio: 4/3;
    border:1px solid var(--t-border); background: var(--t-card);
  }
  .portfolio-item:nth-child(even) .portfolio-frame{ border-radius: 12px 28px 12px 28px; }
  .portfolio-frame img{ width:100%; height:100%; object-fit:cover; transition: transform 0.5s ease; }
  .portfolio-item:hover .portfolio-frame img{ transform: scale(1.06); }
  .portfolio-frame::after{
    content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
    background: var(--glass-shine); transform: translateX(-140%) skewX(-12deg);
    transition: transform 0.7s ease;
  }
  .portfolio-item:hover .portfolio-frame::after{ transform: translateX(140%) skewX(-12deg); }
  .portfolio-caption{ padding:14px 4px 0; }
  .portfolio-caption h3{ font-size:1rem; font-family: var(--font-body); font-weight:600; color: var(--t-text); }
  .portfolio-caption p{ font-size:0.85rem; color: var(--t-muted); margin-top:4px; }

  /* ---------- Como funciona ---------- */
  .steps{ display:grid; grid-template-columns:1fr; gap:32px; }
  @media(min-width: 780px){ .steps{ grid-template-columns: repeat(3,1fr); } }
  .step .n{ font-family: var(--font-mono); font-size:2.6rem; color:transparent; -webkit-text-stroke: 1px var(--t-accent); display:block; margin-bottom:10px; }
  .step h3{ font-size:1.08rem; font-family: var(--font-body); font-weight:600; margin-bottom:8px; }
  .step p{ color: var(--t-muted); font-size:0.92rem; }

  /* ---------- Área de atendimento ---------- */
  .area-box{
    display:grid; grid-template-columns:1fr; gap:40px; align-items:center;
    border:1px solid var(--t-border); border-radius:24px; padding:44px; background: var(--t-card);
  }
  @media(min-width: 860px){ .area-box{ grid-template-columns: 1fr 1fr; } }
  .area-list{ display:flex; flex-wrap:wrap; gap:10px; margin-top:18px; }
  .area-list span{ font-family: var(--font-mono); font-size:0.78rem; border:1px solid var(--t-border); padding:6px 12px; border-radius:999px; color: var(--t-muted); }

  /* ---------- FAQ ---------- */
  .faq-list{ display:flex; flex-direction:column; gap:12px; }
  .faq-item{
    border:1px solid var(--t-border); border-radius:14px; background:#fff; padding: 2px 22px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
  }
  .faq-item:hover{ border-color: var(--t-accent); }
  .faq-item.open{ border-color: var(--t-accent); box-shadow: 0 14px 30px -22px rgba(20,30,50,0.28); }
  .faq-q{
    display:flex; align-items:center; justify-content:space-between; gap:16px;
    padding:20px 2px; cursor:pointer; font-weight:600; font-size:0.98rem; font-family: var(--font-display);
  }
  .faq-q .plus{
    flex:0 0 auto; width:26px; height:26px; border-radius:50%;
    background: rgba(217,164,76,0.12); color: var(--t-accent);
    display:flex; align-items:center; justify-content:center;
    font-family: var(--font-mono); font-size:0.9rem; transition: transform 0.25s ease, background 0.25s ease;
  }
  .faq-item.open .plus{ transform: rotate(45deg); background: rgba(217,164,76,0.2); }
  .faq-a{ max-height:0; overflow:hidden; color: var(--t-muted); font-size:0.93rem; transition: max-height 0.3s ease, padding 0.3s ease; }
  .faq-item.open .faq-a{ padding-bottom:22px; }

  /* ---------- CTA final ---------- */
  .cta-final{
    text-align:center; border-radius:28px; padding:64px 32px;
    background: radial-gradient(ellipse at 50% 0%, rgba(217,164,76,0.14), transparent 60%), #0d1c38;
    border:1px solid rgba(190,216,240,0.16);
  }
  .cta-final h2{ font-size: clamp(1.6rem, 3.4vw, 2.2rem); margin-bottom:12px; }
  .cta-final .urgency{ font-size:0.85rem; color: var(--amber); margin-bottom: 14px; font-family: var(--font-mono); }
  .cta-final p.sub{ color:#90a5c4; max-width:50ch; margin:0 auto 30px; }

  /* ---------- Footer ---------- */
  footer.site-footer{ padding: 48px 0 28px; color:#90a5c4; }
  .footer-grid{ display:grid; grid-template-columns:1fr; gap:28px; margin-bottom:32px; }
  @media(min-width: 780px){ .footer-grid{ grid-template-columns: 2fr 1fr 1fr; } }
  .footer-brand{ display:flex; align-items:center; gap:10px; margin-bottom:12px; color:#eef3fa; }
  .footer-brand img{ height:30px; }
  footer.site-footer h4{ font-size:0.78rem; text-transform:uppercase; letter-spacing:0.08em; color:#5c7096; margin-bottom:14px; font-family: var(--font-mono); }
  footer.site-footer ul{ list-style:none; display:flex; flex-direction:column; gap:8px; }
  .footer-bottom{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; padding-top:24px; border-top:1px solid rgba(140,178,224,0.14); font-size:0.78rem; color:#5c7096; }
  .footer-bottom a{ color:#5c7096; }
  .footer-bottom a:hover{ color: var(--ice); }
  .footer-credit{ display:inline-flex; align-items:center; gap:7px; }
  .footer-credit a{ display:inline-flex; align-items:center; }
  .footer-credit img{ height:20px; width:auto; display:block; opacity:0.85; transition: opacity 0.2s ease; }
  .footer-credit a:hover img{ opacity:1; }

  /* ================= MODAL DE QUALIFICAÇÃO ================= */
  .modal-overlay{
    position:fixed; inset:0; z-index:100; display:none;
    background: rgba(4,10,22,0.72); backdrop-filter: blur(6px);
    align-items:flex-start; justify-content:center;
    padding: 5vh 16px; overflow-y:auto;
  }
  .modal-overlay.active{ display:flex; }
  .modal{
    width:100%; max-width: 480px; background:#0d1c38; border:1px solid rgba(190,216,240,0.18);
    border-radius: 22px; padding: 34px 28px 28px; position:relative; color:#eef3fa;
    box-shadow: 0 40px 100px -30px rgba(0,0,0,0.7);
  }
  .modal-close{
    position:absolute; top:16px; right:16px; background:none; border:none; color:#90a5c4;
    font-size:1.1rem; cursor:pointer; width:32px; height:32px; border-radius:8px;
  }
  .modal-close:hover{ background: rgba(160,200,235,0.08); color:#eef3fa; }
  .modal-progress{ height:4px; background: rgba(160,200,235,0.12); border-radius:999px; margin-bottom:26px; overflow:hidden; }
  .modal-progress-bar{ height:100%; background: linear-gradient(90deg, var(--amber), var(--amber-dark)); width:14%; transition: width 0.3s ease; }
  .modal-step-label{ font-family: var(--font-mono); font-size:0.68rem; letter-spacing:0.1em; text-transform:uppercase; color: var(--amber); margin-bottom:10px; }
  .modal-question{ font-family: var(--font-display); font-size:1.28rem; margin-bottom:20px; line-height:1.3; }
  .modal-options{ display:flex; flex-direction:column; gap:10px; margin-bottom: 24px; }
  .modal-option{
    text-align:left; padding: 14px 16px; border-radius:12px; border:1px solid rgba(190,216,240,0.18);
    background: rgba(160,200,235,0.05); color:#eef3fa; font-size:0.96rem; cursor:pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
  }
  .modal-option:hover{ border-color: var(--amber); }
  .modal-option.selected{ border-color: var(--amber); background: rgba(217,164,76,0.12); }
  .modal-input{
    width:100%; padding:14px 16px; border-radius:12px; border:1px solid rgba(190,216,240,0.18);
    background: rgba(160,200,235,0.05); color:#eef3fa; font-size:0.98rem; margin-bottom:24px; font-family: var(--font-body);
  }
  .modal-input::placeholder{ color:#5c7096; }
  .modal-input:focus{ outline:none; border-color: var(--amber); }

  .dim-row{ display:flex; align-items:flex-end; gap:12px; margin-bottom:14px; }
  .dim-field{ flex:1; min-width:0; display:flex; flex-direction:column; gap:8px; }
  .dim-field label{ font-family: var(--font-mono); font-size:0.72rem; letter-spacing:0.06em; text-transform:uppercase; color:#90a5c4; }
  .dim-input-wrap{
  display:flex; align-items:stretch; min-width:0; border-radius:12px; border:1px solid rgba(190,216,240,0.18);
  background: rgba(160,200,235,0.05); overflow:hidden; transition: border-color 0.15s ease;
}
  .dim-input-wrap:focus-within{ border-color: var(--amber); }
  .dim-input{
    flex:1; min-width:0; border:none; background:transparent; color:#eef3fa; font-size:1.05rem;
    font-family: var(--font-body); padding:14px 4px 14px 16px; outline:none;
  }
  .dim-unit{
    flex:0 0 auto; display:flex; align-items:center; padding:0 16px;
    font-family: var(--font-mono); font-size:0.92rem; color: var(--amber);
    background: rgba(217,164,76,0.1); border-left:1px solid rgba(190,216,240,0.14);
  }
  .dim-x{ padding-bottom:14px; color:#5c7096; font-size:1rem; }
  .dim-hint{ font-size:0.82rem; color:#90a5c4; margin: -4px 0 20px; }
  .modal-nav{ display:flex; gap:12px; }
  .modal-nav .btn-ghost{ --t-card: rgba(160,200,235,0.06); --t-border: rgba(190,216,240,0.16); --t-text:#eef3fa; flex:0 0 auto; }
  .modal-summary{ display:flex; flex-direction:column; gap:10px; margin-bottom:24px; }
  .modal-summary-row{ display:flex; justify-content:space-between; font-size:0.88rem; border-bottom:1px dashed rgba(190,216,240,0.16); padding-bottom:8px; }
  .modal-summary-row span:first-child{ color:#90a5c4; }
  .modal-summary-row span:last-child{ text-align:right; max-width:60%; }

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