
@font-face{font-family:'DIN';src:url('../fonts/D-DIN.otf') format('opentype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'DIN';src:url('../fonts/D-DIN-Italic.otf') format('opentype');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'DIN';src:url('../fonts/D-DIN-Bold.otf') format('opentype');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'DIN Condensed';src:url('../fonts/D-DINCondensed.otf') format('opentype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'DIN Condensed';src:url('../fonts/D-DINCondensed-Bold.otf') format('opentype');font-weight:700;font-style:normal;font-display:swap}
:root{--A:#1B365D;--T:#FFF5E1;--I:#D69B4F;--N:#2A9D8F;--U:#FF7F41;--D:#8B4513;--bg:#0c1324}
*{box-sizing:border-box}html,body{height:100%}
body{margin:0;font-family:"DIN",system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;color:#14213d;background:linear-gradient(180deg,var(--T),#fff)}
.header{position:relative;background:radial-gradient(1200px 1200px at 20% -10%, rgba(26,54,93,.85), transparent 60%),radial-gradient(800px 800px at 120% 20%, rgba(255,127,65,.6), transparent 60%),var(--bg);color:#fff;overflow:hidden}
.header::before{content:"";position:absolute;inset:0;background-image:url("../images/1440x1920_-34.png");background-size:cover;background-position:center;opacity:.25;mix-blend-mode:screen}
.header-inner{position:relative;padding:clamp(2rem,4vw,3rem) 1.25rem;max-width:1100px;margin:0 auto;display:flex;gap:1.5rem;align-items:flex-end}
.badge{background:linear-gradient(135deg,var(--I),var(--U));color:#2a1a00;padding:.35rem .6rem;font-weight:700;letter-spacing:.06em;border-radius:999px;box-shadow:0 6px 16px rgba(214,155,79,.35);display:inline-block}
.h-title{margin:.5rem 0 0;font-size:clamp(1.6rem,2.6vw,2.4rem);line-height:1.1;font-weight:800;font-family:"DIN Condensed","DIN",sans-serif}
.h-sub{margin:.4rem 0 0;opacity:.9;font-size:clamp(.95rem,1.6vw,1.05rem)}
.wrapper{max-width:1100px;margin:-2.5rem auto 2rem;padding:0 1.25rem}
.card{background:#fff;border-radius:18px;border:1px solid rgba(27,54,93,.08);box-shadow:0 6px 20px rgba(27,54,93,.08),0 2px 6px rgba(0,0,0,.03);overflow:hidden}
.form-head{background:linear-gradient(90deg, rgba(42,157,143,.15), rgba(214,155,79,.15));padding:1rem 1.25rem;border-bottom:1px solid rgba(27,54,93,.08);display:flex;align-items:center;gap:.75rem;flex-wrap:wrap}
.form-head .pill{background:#f6f8fb;border:1px solid rgba(27,54,93,.12);padding:.45rem .7rem;border-radius:999px;font-size:.9rem}
.form{padding:1.25rem}
.section{padding:1rem 0;border-top:1px dashed rgba(27,54,93,.12)} .section:first-child{border-top:none}
.section h2{margin:.25rem 0 1rem;font-size:1.25rem;color:var(--A);display:flex;align-items:center;gap:.5rem}
.section h2 .sec-num{background:var(--N);color:#fff;width:30px;height:30px;display:inline-grid;place-items:center;border-radius:8px;font-weight:700;font-size:.95rem;box-shadow:0 2px 0 rgba(0,0,0,.08)}
.grid{display:grid;gap:1rem;grid-template-columns:repeat(12,1fr)}
.col-6{grid-column:span 6}.col-4{grid-column:span 4}.col-8{grid-column:span 8}.col-12{grid-column:span 12}
@media (max-width:900px){.col-6,.col-4,.col-8{grid-column:span 12}}
.label{font-weight:700;font-size:.96rem;color:#0f1c31;display:block;margin-bottom:.4rem}
.req{color:var(--U);margin-left:.2rem}
.input,.select,.textarea,.file{width:100%;border:1.2px solid rgba(27,54,93,.22);background:#fff;padding:.75rem .9rem;border-radius:12px;outline:none;font-size:1rem;transition:border-color .2s,box-shadow .2s,background-color .2s}
.input:focus,.select:focus,.textarea:focus,.file:focus{border-color:var(--N);box-shadow:0 0 0 4px rgba(42,157,143,.15)}
.textarea{min-height:120px;resize:vertical}
.help{font-size:.86rem;color:#4f5b72;margin-top:.35rem}
.note{background:#fff7ef;border:1px dashed var(--U);color:#5a341b;padding:.75rem 1rem;border-radius:12px;font-size:.92rem}
.radio-row{display:flex;gap:1rem;flex-wrap:wrap;align-items:center}
.radio{display:flex;align-items:center;gap:.5rem;padding:.5rem .7rem;border:1px solid rgba(27,54,93,.18);border-radius:999px;background:#fff}
.radio input{accent-color:var(--N)}
.kicker{padding:1.25rem;background:linear-gradient(180deg, rgba(27,54,93,.04), rgba(27,54,93,0)), url("../images/1440x1920_-02.png");background-size:cover;background-position:center;border-top:1px solid rgba(27,54,93,.07)}
.actions{display:flex;gap:.75rem;flex-wrap:wrap;align-items:center;justify-content:flex-end}
.btn{--btn-bg:var(--A);--btn-fg:#fff;background:var(--btn-bg);color:var(--btn-fg);padding:.85rem 1.1rem;border:0;border-radius:12px;font-weight:800;cursor:pointer;transition:transform .04s ease,box-shadow .2s ease,background .2s ease;box-shadow:0 6px 16px rgba(27,54,93,.26)}
.btn:active{transform:translateY(1px)}.btn.secondary{--btn-bg:#f2f5fb;--btn-fg:#0f1c31;box-shadow:none;border:1px solid rgba(27,54,93,.14)}.btn.accent{--btn-bg:var(--U)}
.footer{text-align:center;font-size:.9rem;color:#47536a;padding:1.5rem 1rem 2.5rem}
small.muted{color:#5b6882}
.badge-grid{display:flex;gap:.5rem;flex-wrap:wrap}.badge-grid .tiny{font-size:.75rem;background:#f4f7fb;color:#2f3b55;border:1px solid rgba(27,54,93,.08);padding:.35rem .55rem;border-radius:999px}
hr.sep{border:0;height:1px;background:linear-gradient(90deg, rgba(27,54,93,.0), rgba(27,54,93,.18), rgba(27,54,93,.0));margin:1.25rem 0}
input[type="file"]{padding:.6rem;background:#fbfcff}.file-note{font-size:.85rem;color:#5b6882;margin-top:.35rem}
.success{display:none;background:#ecfff9;border:1px solid rgba(42,157,143,.4);color:#0a5a4f;padding:1rem;border-radius:12px;margin-top:1rem}
.center-wrapper {
  min-height: 100vh;             /* full screen height */
  display: flex;                 /* enable flexbox */
  justify-content: center;       /* center horizontally */
  align-items: center;           /* center vertically */
  padding: 2rem;                 /* some spacing */
  box-sizing: border-box;
  .card {
  max-width: 600px;      /* increase width (default was too small, like 320px) */
  width: 100%;
  margin: 0 auto;
  padding: 2.5rem;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
}

.input {
  width: 100%;           /* make input stretch full width */
  padding: 0.75rem 1rem;
  font-size: 1rem;
  border: 1px solid #ccc;
  border-radius: 6px;
}

.actions {
  text-align: right;     /* keep button aligned right */
}

}

