/* ==========================================================================
   TicoDev — Intake Form
   Stylesheet
   ========================================================================== */

:root{
    --bg:#0a0d12;
    --bg-elevated:#10151c;
    --bg-input:#0d1218;
    --navy:#00367C;
    --blue:#0175D8;
    --text:#EDEFF3;
    --text-muted:#8B93A3;
    --text-faint:#5B6472;
    --border:rgba(255,255,255,0.08);
    --border-strong:rgba(255,255,255,0.16);
    --success:#2FBF71;
    --error:#E5595E;
    --font-display:'Space Grotesk', sans-serif;
    --font-body:'Inter', sans-serif;
    --radius:2px;
  }

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

  html{scroll-behavior:smooth;}

  body{
    background:var(--bg);
    color:var(--text);
    font-family:var(--font-body);
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }

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

  a{color:inherit;}
  ::selection{background:var(--blue); color:#fff;}

  button, input, select, textarea{font-family:inherit; font-size:inherit; color:inherit;}

  .container{
    max-width:920px;
    margin:0 auto;
    padding:0 28px;
  }

  /* ---------- TOP BAR ---------- */
  .topbar{
    position:sticky;
    top:0;
    z-index:100;
    background:rgba(10,13,18,0.88);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--border);
  }
  .topbar-inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:16px 28px;
    max-width:920px;
    margin:0 auto;
  }
  .logo{
    display:flex;
    align-items:center;
    text-decoration:none;
  }
  .header-logo{
    height:26px;
    width:auto;
    display:block;
  }
  .topbar-progress{
    display:flex;
    align-items:center;
    gap:8px;
    font-size:0.76rem;
    font-weight:600;
    color:var(--text-muted);
    font-variant-numeric:tabular-nums;
    letter-spacing:0.01em;
  }
  .topbar-progress.complete{color:var(--success);}
  @media (max-width:560px){
    .topbar-progress{display:none;}
  }
  .lang-switch{
    display:flex;
    gap:2px;
    border:1px solid var(--border-strong);
    border-radius:3px;
    overflow:hidden;
  }
  .lang-switch button{
    background:transparent;
    border:none;
    color:var(--text-muted);
    padding:6px 11px;
    font-size:0.72rem;
    font-weight:600;
    letter-spacing:0.04em;
    cursor:pointer;
    transition:background .15s, color .15s;
  }
  .lang-switch button.active{
    background:var(--blue);
    color:#fff;
  }
  .lang-switch button:hover:not(.active){
    background:rgba(255,255,255,0.06);
    color:var(--text);
  }

  /* progress rail under topbar, only visible once form is engaged */
  .progress-rail{
    height:2px;
    background:var(--border);
    position:relative;
  }
  .progress-rail-fill{
    height:100%;
    width:0%;
    background:linear-gradient(90deg, var(--navy), var(--blue));
    transition:width .4s ease;
  }

  /* ---------- HERO ---------- */
  .hero{
    padding:96px 0 72px;
    border-bottom:1px solid var(--border);
    position:relative;
  }
  .eyebrow{
    font-family:var(--font-body);
    font-size:0.72rem;
    font-weight:600;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--blue);
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:22px;
  }
  .eyebrow::before{
    content:'';
    width:22px;height:1px;
    background:var(--blue);
  }
  .hero h1{
    font-family:var(--font-display);
    font-weight:700;
    font-size:clamp(2.1rem, 5vw, 3.4rem);
    letter-spacing:-0.02em;
    line-height:1.08;
    max-width:780px;
    margin-bottom:22px;
  }
  .hero .lede{
    font-size:1.05rem;
    color:var(--text-muted);
    max-width:560px;
    margin-bottom:38px;
  }
  .hero-meta{
    display:flex;
    gap:32px;
    flex-wrap:wrap;
    margin-bottom:40px;
  }
  .hero-meta-item{
    font-size:0.82rem;
    color:var(--text-faint);
  }
  .hero-meta-item strong{
    display:block;
    font-family:var(--font-display);
    font-size:1.3rem;
    color:var(--text);
    font-weight:600;
  }

  .btn{
    display:inline-flex;
    align-items:center;
    gap:10px;
    background:var(--blue);
    color:#fff;
    border:none;
    padding:15px 26px;
    font-size:0.9rem;
    font-weight:600;
    letter-spacing:0.01em;
    cursor:pointer;
    border-radius:2px;
    transition:background .15s, transform .15s;
    text-decoration:none;
  }
  .btn:hover{background:#0684f0; transform:translateY(-1px);}
  .btn:active{transform:translateY(0);}
  .btn-arrow{transition:transform .15s;}
  .btn:hover .btn-arrow{transform:translateX(3px);}

  .btn-secondary{
    background:transparent;
    border:1px solid var(--border-strong);
    color:var(--text);
  }
  .btn-secondary:hover{background:rgba(255,255,255,0.05);}

  .section-head{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    gap:24px;
    margin-bottom:44px;
    flex-wrap:wrap;
  }
  .section-head h2{
    font-family:var(--font-display);
    font-weight:700;
    font-size:clamp(1.5rem, 3vw, 2rem);
    letter-spacing:-0.01em;
    max-width:520px;
  }
  .section-head p{
    color:var(--text-muted);
    max-width:320px;
    font-size:0.92rem;
  }
  /* ---------- HOW IT WORKS (carousel) ---------- */
  .how{
    padding:72px 0;
    border-bottom:1px solid var(--border);
  }
  .how .section-head{
    margin-bottom:36px;
  }
  .how-controls{
    display:flex;
    gap:8px;
    flex-shrink:0;
  }
  .how-arrow{
    width:38px;
    height:38px;
    border:1px solid var(--border-strong);
    background:transparent;
    color:var(--text);
    border-radius:2px;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:border-color .15s, background .15s, opacity .15s;
    font-family:var(--font-display);
    font-size:1.1rem;
    line-height:1;
  }
  .how-arrow:hover{border-color:var(--blue); background:rgba(1,117,216,0.08);}
  .how-arrow:disabled{opacity:0.3; cursor:default;}
  .how-arrow:disabled:hover{border-color:var(--border-strong); background:transparent;}

  .how-carousel{
    overflow:hidden;
  }

  .how-track{
    display:flex;
    transition:transform .5s cubic-bezier(.65,0,.35,1);
  }

  .how-slide{
    flex:0 0 100%;
    width:100%;
    display:flex;
    justify-content:center;
    padding:2px 2px;
  }

  .how-card{
    width:100%;
    max-width:520px;
    background:var(--bg-elevated);
    border:1px solid var(--border);
    border-radius:2px;
    padding:44px 40px;
    display:flex;
    flex-direction:column;
    gap:14px;
  }
  .how-card .num{
    font-family:var(--font-display);
    font-size:0.78rem;
    font-weight:600;
    color:var(--blue);
    letter-spacing:0.04em;
  }
  .how-card h3{
    font-family:var(--font-display);
    font-size:1.2rem;
    font-weight:600;
  }
  .how-card p{
    color:var(--text-muted);
    font-size:0.92rem;
  }

  .how-dots{
    display:flex;
    justify-content:center;
    gap:8px;
    margin-top:26px;
  }
  .how-dot{
    width:26px;
    height:2px;
    background:var(--border-strong);
    border:none;
    padding:0;
    cursor:pointer;
    transition:background .2s, width .2s;
  }
  .how-dot.active{
    background:var(--blue);
    width:38px;
  }

  @media (max-width:640px){
    .how-card{padding:34px 24px;}
  }

  /* ---------- FORM SECTION ---------- */
  .form-area{
    padding:80px 0 100px;
  }
  .form-intro{
    margin-bottom:48px;
  }
  .form-intro h2{
    font-family:var(--font-display);
    font-weight:700;
    font-size:clamp(1.6rem, 3vw, 2.1rem);
    letter-spacing:-0.01em;
    margin-bottom:14px;
  }
  .form-intro p{
    color:var(--text-muted);
    max-width:540px;
    font-size:0.94rem;
  }

  .progress-summary{
    display:flex;
    align-items:center;
    gap:16px;
    margin:0 0 44px;
    padding:16px 20px;
    background:var(--bg-elevated);
    border:1px solid var(--border);
    border-radius:3px;
  }
  .progress-summary-bar{
    flex:1;
    height:4px;
    background:var(--border);
    border-radius:2px;
    overflow:hidden;
  }
  .progress-summary-bar-fill{
    height:100%;
    width:0%;
    background:linear-gradient(90deg, var(--navy), var(--blue));
    transition:width .4s ease;
  }
  .progress-summary-label{
    font-size:0.78rem;
    color:var(--text-muted);
    white-space:nowrap;
    font-variant-numeric:tabular-nums;
  }

  .fieldset{
    border:1px solid var(--border);
    border-bottom:none;
    background:var(--bg-elevated);
    scroll-margin-top:var(--sticky-offset, 150px);
  }
  .fieldset:last-of-type{border-bottom:1px solid var(--border);}

  .fieldset-header{
    display:flex;
    align-items:center;
    gap:18px;
    padding:22px 24px;
    cursor:pointer;
    user-select:none;
    transition:background .15s;
  }
  .fieldset-header:hover{background:rgba(255,255,255,0.02);}

  .fieldset-num{
    font-family:var(--font-display);
    font-size:0.82rem;
    font-weight:600;
    color:var(--text-faint);
    width:26px;
    flex-shrink:0;
  }
  .fieldset.complete .fieldset-num{color:var(--success);}

  .fieldset-titles{flex:1; min-width:0;}
  .fieldset-titles h3{
    font-family:var(--font-display);
    font-size:1.02rem;
    font-weight:600;
  }
  .fieldset-titles span{
    display:block;
    font-size:0.8rem;
    color:var(--text-faint);
    margin-top:2px;
  }

  .fieldset-status{
    font-size:0.7rem;
    letter-spacing:0.06em;
    text-transform:uppercase;
    color:var(--text-faint);
    flex-shrink:0;
    font-weight:600;
  }
  .fieldset.complete .fieldset-status{color:var(--success);}

  .chevron{
    width:9px;height:9px;
    border-right:1.5px solid var(--text-faint);
    border-bottom:1.5px solid var(--text-faint);
    transform:rotate(45deg);
    transition:transform .2s;
    flex-shrink:0;
  }
  .fieldset.open .chevron{transform:rotate(-135deg);}

  .fieldset-body{
    max-height:0;
    overflow:hidden;
    transition:max-height .35s ease;
  }
  .fieldset.open .fieldset-body{max-height:3200px;}
  .fieldset.no-transition .fieldset-body{transition:none !important;}

  .fieldset-body-inner{
    padding:4px 24px 32px;
    border-top:1px solid var(--border);
  }

  .field-row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px;
    margin-top:22px;
  }
  .field-row.single{grid-template-columns:1fr;}

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

  .field{display:flex; flex-direction:column; gap:8px;}
  .field label{
    font-size:0.8rem;
    font-weight:600;
    color:var(--text);
  }
  .field label .req{color:var(--blue); margin-left:2px;}
  .field-hint{font-size:0.76rem; color:var(--text-faint);}

  .field input[type="text"],
  .field input[type="email"],
  .field input[type="tel"],
  .field input[type="url"],
  .field input[type="number"],
  .field select,
  .field textarea{
    background:var(--bg-input);
    border:1px solid var(--border-strong);
    color:var(--text);
    padding:12px 14px;
    border-radius:2px;
    font-size:0.9rem;
    transition:border-color .15s, background .15s;
    width:100%;
  }
  .field textarea{resize:vertical; min-height:90px; font-family:var(--font-body);}
  .field input:focus, .field select:focus, .field textarea:focus{
    outline:none;
    border-color:var(--blue);
    background:#0f151d;
  }
  .field input.invalid, .field select.invalid, .field textarea.invalid{
    border-color:var(--error);
  }
  .field-error{
    font-size:0.76rem;
    color:var(--error);
    display:none;
  }
  .field.has-error .field-error{display:block;}

  .field select{
    appearance:none;
    background-image:linear-gradient(45deg, transparent 50%, var(--text-muted) 50%), linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
    background-position:calc(100% - 18px) center, calc(100% - 13px) center;
    background-size:5px 5px, 5px 5px;
    background-repeat:no-repeat;
  }

  .chip-group{
    display:flex;
    flex-wrap:wrap;
    gap:9px;
    margin-top:22px;
  }
  .chip{
    position:relative;
  }
  .chip input{position:absolute; opacity:0; width:0; height:0;}
  .chip label{
    display:block;
    padding:10px 16px;
    border:1px solid var(--border-strong);
    border-radius:20px;
    font-size:0.82rem;
    color:var(--text-muted);
    cursor:pointer;
    transition:all .15s;
  }
  .chip input:checked + label{
    background:var(--blue);
    border-color:var(--blue);
    color:#fff;
  }
  .chip label:hover{border-color:var(--text-muted); color:var(--text);}

  .radio-group{
    display:flex;
    flex-direction:column;
    gap:10px;
    margin-top:8px;
  }
  .radio-option{
    display:flex;
    align-items:center;
    gap:10px;
    padding:12px 14px;
    border:1px solid var(--border-strong);
    border-radius:2px;
    cursor:pointer;
    transition:border-color .15s, background .15s;
  }
  .radio-option:hover{background:rgba(255,255,255,0.03);}
  .radio-option input{accent-color:var(--blue); width:15px; height:15px; flex-shrink:0;}
  .radio-option label{font-size:0.87rem; cursor:pointer; flex:1;}
  .radio-option:has(input:checked){border-color:var(--blue); background:rgba(1,117,216,0.06);}

  .fieldset-nav{
    display:flex;
    justify-content:space-between;
    margin-top:30px;
  }
  .fieldset-nav button{
    background:transparent;
    border:1px solid var(--border-strong);
    color:var(--text-muted);
    padding:10px 18px;
    font-size:0.82rem;
    font-weight:600;
    border-radius:2px;
    cursor:pointer;
    transition:all .15s;
  }
  .fieldset-nav button:hover{border-color:var(--blue); color:var(--text);}
  .fieldset-nav button.primary{
    background:var(--blue);
    border-color:var(--blue);
    color:#fff;
  }
  .fieldset-nav button.primary:hover{background:#0684f0;}

  /* submit */
  .submit-area{
    margin-top:20px;
    padding:36px 24px;
    border:1px solid var(--border);
    background:var(--bg-elevated);
    text-align:center;
  }
  .submit-area p{
    color:var(--text-muted);
    font-size:0.86rem;
    max-width:440px;
    margin:0 auto 20px;
  }
  #submit-btn:disabled{opacity:0.5; cursor:not-allowed;}
  #submit-btn:disabled:hover{background:var(--blue); transform:none;}
  #submit-btn.loading{cursor:wait;}

  .form-message{
    margin-top:18px;
    font-size:0.85rem;
    display:none;
  }
  .form-message.show{display:block;}
  .form-message.error{color:var(--error);}
  .form-message.success{color:var(--success);}

  /* success state */
  .success-panel{
    display:none;
    text-align:center;
    padding:60px 24px;
    border:1px solid var(--border);
    background:var(--bg-elevated);
  }
  .success-panel.show{display:block;}
  .success-icon{
    width:52px;height:52px;
    border-radius:50%;
    background:rgba(47,191,113,0.12);
    border:1px solid var(--success);
    display:flex; align-items:center; justify-content:center;
    margin:0 auto 22px;
    color:var(--success);
    font-size:1.4rem;
  }
  .success-panel h3{
    font-family:var(--font-display);
    font-size:1.3rem;
    margin-bottom:10px;
  }
  .success-panel p{color:var(--text-muted); max-width:440px; margin:0 auto; font-size:0.92rem;}

  /* ---------- FOOTER ---------- */
  footer{
    border-top:1px solid var(--border);
    padding:56px 0 40px;
  }
  .footer-grid{
    display:flex;
    justify-content:space-between;
    gap:40px;
    flex-wrap:wrap;
    margin-bottom:40px;
  }
  .footer-logo{
    height:28px;
    width:auto;
    display:block;
    margin-bottom:14px;
  }
  .footer-brand p{color:var(--text-muted); font-size:0.85rem; max-width:280px;}
  .footer-bottom{
    display:flex;
    justify-content:space-between;
    padding-top:24px;
    border-top:1px solid var(--border);
    font-size:0.76rem;
    color:var(--text-faint);
    flex-wrap:wrap;
    gap:10px;
  }

  @media (max-width:720px){
    .hero{padding:64px 0 48px;}
    .topbar-inner{padding:14px 20px;}
    .container{padding:0 20px;}
  }