:root{
    --ink:#0F2340;
    --ink-deep:#081426;
    --paper:#F6F7F4;
    --paper-line:#DCE0D8;
    --brass:#B4802A;
    --brass-deep:#8C6420;
    --leaf:#2F6F4E;
    --text:#1B1D1A;
    --text-soft:#5B5F58;
    --white:#FFFFFF;
}
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
    margin:0;
    font-family:'Inter', Arial, sans-serif;
    background:var(--paper);
    color:var(--text);
}
h1,h2,h3{ font-family:'Roboto Slab', Georgia, serif; margin:0; }
.mono{ font-family:'IBM Plex Mono', monospace; }
a{ color:inherit; text-decoration:none; }

header{
    background:var(--white);
    padding:16px 40px;
    border-bottom:1px solid var(--paper-line);
    display:flex;
    justify-content:space-between;
    align-items:center;
}
.logo{ display:flex; align-items:center; gap:10px; }
.logo-mark{
    width:34px; height:34px;
    border:2px solid var(--ink);
    border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    font-family:'Roboto Slab', serif; font-weight:700; font-size:15px;
    color:var(--ink); flex-shrink:0;
}
.logo-text{ font-family:'Roboto Slab', serif; font-weight:700; font-size:20px; color:var(--ink); letter-spacing:-0.2px; }
.tagline{ font-size:12.5px; color:var(--text-soft); margin-top:1px; }
header .phone{
    font-family:'IBM Plex Mono', monospace;
    font-size:14px; font-weight:600; color:var(--ink);
    border:1px solid var(--paper-line);
    padding:8px 16px; border-radius:4px;
}

.crumb{
    background:var(--white);
    border-bottom:1px solid var(--paper-line);
    padding:12px 40px;
    font-size:13px;
    color:var(--text-soft);
}
.crumb a:hover{ color:var(--ink); text-decoration:underline; }
.crumb .sep{ margin:0 8px; color:#BEC2B7; }
.crumb .current{ color:var(--ink); font-weight:500; }

.hero{
    background:var(--ink);
    background-image:
        repeating-linear-gradient(180deg, rgba(255,255,255,0.035) 0px, rgba(255,255,255,0.035) 1px, transparent 1px, transparent 34px);
    color:var(--white);
    padding:56px 40px 44px;
}
.hero-inner{ max-width:1180px; margin:auto; display:flex; gap:56px; align-items:flex-start; }
.hero-left{ flex:1.35; padding-top:6px; }
.eyebrow{
    font-family:'IBM Plex Mono', monospace; font-size:12px;
    letter-spacing:1.5px; text-transform:uppercase; color:var(--brass);
    display:flex; align-items:center; gap:10px; margin-bottom:18px;
}
.eyebrow::before{ content:""; width:22px; height:1px; background:var(--brass); display:inline-block; }
.hero-left h1{ font-size:40px; line-height:1.18; font-weight:700; letter-spacing:-0.5px; }
.hero-left h1 em{ font-style:normal; color:var(--brass); }
.hero-left > p{ font-size:16.5px; line-height:1.7; color:rgba(255,255,255,0.82); max-width:480px; margin-top:16px; }

.rate-ledger{ margin-top:32px; border-top:1px solid rgba(255,255,255,0.18); }
.rate-row{
    display:flex; justify-content:space-between; align-items:center;
    padding:13px 0; border-bottom:1px solid rgba(255,255,255,0.18); font-size:14.5px;
}
.rate-row .label{ display:flex; align-items:center; gap:10px; color:rgba(255,255,255,0.92); }
.rate-row .dot{ width:5px; height:5px; border-radius:50%; background:var(--brass); flex-shrink:0; }
.rate-row .val{ font-family:'IBM Plex Mono', monospace; color:var(--brass); font-size:14px; font-weight:600; }
.ledger-note{ font-size:11.5px; color:rgba(255,255,255,0.5); margin-top:10px; }

.point-list{ margin-top:28px; display:flex; flex-direction:column; gap:12px; }
.point-list .point{ display:flex; align-items:flex-start; gap:10px; font-size:14.5px; color:rgba(255,255,255,0.9); }
.point-list .point .dot{ width:5px; height:5px; border-radius:50%; background:var(--brass); flex-shrink:0; margin-top:8px; }

.hero-right{ flex:1; }
.passbook{
    position:relative;
    background:var(--white);
    color:var(--text);
    border-radius:4px;
    box-shadow:0 24px 48px rgba(0,0,0,0.28);
    padding:32px 30px 28px;
    animation:stampIn 0.7s cubic-bezier(0.2,0.7,0.3,1);
}
.passbook::before{
    content:""; position:absolute; top:0; left:24px; right:24px; height:0;
    border-top:1px dashed var(--paper-line);
}
.passbook::after{
    content:""; position:absolute; top:-9px; left:0; right:0; height:18px;
    background: radial-gradient(circle at 16px 9px, transparent 9px, var(--ink) 9.5px) 0 0/32px 18px repeat-x;
}
.passbook-head{ display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:4px; }
.passbook-head h2{ font-size:21px; color:var(--ink); }
.passbook-head p{ font-size:12.5px; color:var(--text-soft); margin-top:4px; }

.seal{
    width:64px; height:64px; border-radius:50%; border:2px solid var(--brass);
    display:flex; align-items:center; justify-content:center; text-align:center;
    color:var(--brass-deep); font-family:'IBM Plex Mono', monospace; font-size:8.5px;
    font-weight:600; letter-spacing:0.4px; line-height:1.25;
    transform:rotate(-9deg); flex-shrink:0; padding:4px;
}

form{ margin-top:20px; }
.field{ margin-top:14px; }
label{
    display:block; font-size:11.5px; font-weight:600; color:var(--text-soft);
    text-transform:uppercase; letter-spacing:0.4px; margin-bottom:6px;
}
input, select{
    width:100%; height:44px; padding:0 12px; font-size:14.5px; font-family:'Inter', sans-serif;
    border:1px solid #CFD3C9; border-radius:4px; background:var(--paper); color:var(--text);
}
input::placeholder{ color:#9A9D93; }
input:focus, select:focus{
    border-color:var(--ink); outline:2px solid rgba(15,35,64,0.15);
    outline-offset:1px; background:var(--white);
}
input[readonly]{ background:#ECEDE9; color:var(--text-soft); }
select:disabled{ background:#ECEDE9; color:var(--text-soft); }

button{
    width:100%; height:48px; margin-top:20px; background:var(--ink); color:var(--white);
    border:none; border-radius:4px; font-size:14.5px; font-weight:600;
    letter-spacing:0.2px; cursor:pointer; transition:background 0.15s ease;
}
button:hover{ background:var(--ink-deep); }
button:disabled{ background:#AEB2A8; cursor:not-allowed; }
button:focus-visible{ outline:2px solid var(--brass); outline-offset:2px; }

#otpMessage{ text-align:left; margin-top:12px; font-size:13px; font-weight:600; color:var(--leaf); min-height:1px; }
#otp-box{ display:none; }
#otp-box button{ background:var(--leaf); }
#otp-box button:hover{ background:#245A3E; }

#thank-you{
    display:none; margin-top:18px; padding:16px; background:#EEF5EE;
    border:1px solid #CBE0CB; border-radius:4px; text-align:center;
}
#thank-you h3{ font-size:15px; color:var(--leaf); }
#thank-you p{ font-size:13px; color:var(--text-soft); margin-top:4px; }

@keyframes stampIn{
    0%{ opacity:0; transform:translateY(20px) scale(0.98); }
    100%{ opacity:1; transform:translateY(0) scale(1); }
}

.trust{ background:var(--white); border-bottom:1px solid var(--paper-line); padding:22px 40px; }
.trust-inner{ max-width:1180px; margin:auto; display:flex; justify-content:space-between; flex-wrap:wrap; gap:16px; }
.trust-item{ display:flex; align-items:baseline; gap:8px; }
.trust-item .num{ font-family:'IBM Plex Mono', monospace; font-size:19px; font-weight:600; color:var(--ink); }
.trust-item .desc{ font-size:12.5px; color:var(--text-soft); }

.offerings{
    max-width:1180px;
    margin:64px auto;
    padding:0 40px;
}
.section-head{ margin-bottom:32px; max-width:560px; }
.section-head .eyebrow{ color:var(--brass-deep); }
.section-head h2{ font-size:28px; color:var(--ink); line-height:1.25; }

.offer-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:1px;
    background:var(--paper-line);
    border:1px solid var(--paper-line);
}
.offer-card{
    background:var(--white);
    padding:26px 24px;
    display:block;
    transition:background 0.15s ease;
    cursor:pointer;
}
.offer-card:hover{ background:var(--paper); }
.offer-card:hover h3{ color:var(--brass-deep); }
.offer-card:focus-visible{ outline:2px solid var(--ink); outline-offset:-2px; }
.offer-card .tag{
    font-family:'IBM Plex Mono', monospace;
    font-size:11px;
    color:var(--brass-deep);
    letter-spacing:0.4px;
}
.offer-card h3{
    font-size:17px;
    margin-top:10px;
    color:var(--ink);
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    transition:color 0.15s ease;
}
.offer-card h3 .arrow{ font-family:'IBM Plex Mono', monospace; font-size:14px; color:var(--brass); }
.offer-card p{ font-size:13.5px; color:var(--text-soft); line-height:1.6; margin-top:8px; }

footer{
    background:var(--ink-deep); color:rgba(255,255,255,0.55);
    text-align:center; padding:26px; font-size:12.5px;
}

@media(max-width:900px){
    header{ padding:14px 20px; }
    header .phone{ display:none; }
    .crumb{ padding:10px 20px; }
    .hero{ padding:40px 20px 32px; }
    .hero-inner{ flex-direction:column; gap:32px; }
    .hero-left h1{ font-size:30px; }
    .trust{ padding:20px; }
    .offerings{ padding:0 20px; margin:48px auto; }
    .offer-grid{ grid-template-columns:1fr; }
}
@media(prefers-reduced-motion:reduce){
    .passbook{ animation:none; }
    html{ scroll-behavior:auto; }
}