/* ============================================================================
   LendBook product page — the app's own warm navy/gold identity
   (distinct from the Built4U Apps company site at the root).
   Craft pass: realistic device frames, real app UI, depth, motion.
   ========================================================================== */
:root{
  --navy:#0e1b2b; --navy2:#16293d; --navy3:#1d3147;
  --cream:#f3ecd9; --cream2:#d9cfb6; --cream3:#94a1b2;
  --gold:#c8a84b; --gold2:#e7cf86; --green:#5fb487; --red:#d97a7a;
  --border:rgba(243,236,217,.10);
  --border-2:rgba(243,236,217,.16);
  --grad-gold:linear-gradient(135deg,#c8a84b,#e7cf86);
  --shadow-soft:0 1px 2px rgba(0,0,0,.3), 0 18px 50px rgba(0,0,0,.28);
  --maxw:1120px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; background:var(--navy); color:var(--cream);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
  line-height:1.65; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  background-image:radial-gradient(1200px 600px at 80% -200px, rgba(200,168,75,.10), transparent 60%);}
a{color:var(--gold); text-decoration:none}
a:hover{text-decoration:none}
:focus-visible{outline:2px solid var(--gold); outline-offset:3px; border-radius:6px}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px}
.gold-text{background:var(--grad-gold); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent}

/* Scroll reveal */
.reveal{opacity:0; transform:translateY(18px); transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1; transform:none; transition:none}}

/* Header */
header{position:sticky; top:0; z-index:30; background:rgba(14,27,43,.72); backdrop-filter:saturate(160%) blur(14px); border-bottom:1px solid var(--border)}
.nav{display:flex; align-items:center; justify-content:space-between; height:68px}
.brand{display:flex; align-items:center; gap:11px; color:var(--cream); font-weight:800; font-size:17px; letter-spacing:-.2px}
.brand:hover{text-decoration:none}
.brand .ic{width:32px; height:32px; border-radius:9px; background:var(--navy2); border:1px solid var(--border-2); display:inline-flex; align-items:center; justify-content:center}
.brand .sub{font-size:11px; color:var(--cream3); font-weight:600; display:block; line-height:1}
.brand .nm{display:flex; flex-direction:column; gap:2px}
.nav-links{display:flex; align-items:center; gap:26px}
.nav-links a{color:var(--cream2); font-size:14.5px; font-weight:600}
.nav-links a:hover{color:var(--cream)}
.nav-links .back{color:var(--cream3); font-size:13.5px}

/* Buttons */
.btn{display:inline-flex; align-items:center; gap:9px; padding:14px 24px; border-radius:13px; font-weight:700; font-size:15.5px; transition:transform .15s ease, filter .15s ease, box-shadow .15s ease}
.btn-primary{background:var(--grad-gold); color:var(--navy); box-shadow:0 14px 30px rgba(200,168,75,.26)}
.btn-primary:hover{transform:translateY(-2px); filter:brightness(1.04); box-shadow:0 18px 38px rgba(200,168,75,.32)}
.btn-ghost{border:1px solid var(--border-2); color:var(--cream)}
.btn-ghost:hover{border-color:var(--gold); transform:translateY(-2px)}
/* Google-Play style coming-soon badge */
.play{display:inline-flex; align-items:center; gap:11px; padding:11px 20px; border-radius:13px; background:#000; border:1px solid rgba(255,255,255,.14); color:#fff; box-shadow:var(--shadow-soft)}
.play:hover{text-decoration:none; transform:translateY(-2px); transition:transform .15s ease}
.play svg{width:24px; height:24px; flex:none}
.play .t{display:flex; flex-direction:column; line-height:1.15; text-align:left}
.play .t .s{font-size:10px; letter-spacing:.5px; color:#cfd4dc; text-transform:uppercase}
.play .t .b{font-size:16px; font-weight:700}

/* Hero */
.hero{position:relative; overflow:hidden; padding:104px 0 96px}
.hero .row{position:relative; z-index:1; display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center}
.eyebrow{display:inline-flex; align-items:center; gap:8px; padding:6px 14px; border-radius:999px; background:rgba(200,168,75,.10); border:1px solid rgba(200,168,75,.28); color:var(--gold); font-weight:700; font-size:13px; letter-spacing:.3px}
.eyebrow .dot{width:7px; height:7px; border-radius:50%; background:var(--gold); box-shadow:0 0 0 4px rgba(200,168,75,.18)}
.hero h1{font-size:clamp(40px,5.8vw,64px); line-height:1.04; margin:22px 0 20px; font-weight:850; letter-spacing:-1.6px; color:var(--cream)}
.hero p{color:var(--cream2); font-size:19px; max-width:32ch; margin:0 0 32px}
.cta-row{display:flex; gap:14px; flex-wrap:wrap; align-items:center}
.note{margin-top:18px; color:var(--cream3); font-size:13.5px; display:flex; align-items:center; gap:8px}
.note svg{width:15px; height:15px; stroke:var(--gold); fill:none; stroke-width:2}

/* Stat strip */
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:24px; padding:30px 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border); background:linear-gradient(180deg,rgba(22,41,61,.5),transparent)}
.stat{text-align:center}
.stat .n{font-size:32px; font-weight:850; letter-spacing:-1px; background:var(--grad-gold); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent}
.stat .l{font-size:12.5px; color:var(--cream3); text-transform:uppercase; letter-spacing:.7px; margin-top:2px}

/* Sections */
section{padding:96px 0}
.sec-head{text-align:center; max-width:660px; margin:0 auto 56px}
.sec-tag{color:var(--gold); font-weight:700; letter-spacing:1.1px; text-transform:uppercase; font-size:12.5px}
.sec-h{font-size:clamp(30px,4vw,44px); font-weight:840; color:var(--cream); margin:12px 0 14px; letter-spacing:-.9px; line-height:1.08}
.sec-sub{color:var(--cream2); font-size:18px; margin:0}

/* Features */
.fgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
.fcard{position:relative; background:linear-gradient(180deg,var(--navy2),rgba(22,41,61,.6)); border:1px solid var(--border); border-radius:20px; padding:30px; transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease}
.fcard:hover{transform:translateY(-4px); border-color:rgba(200,168,75,.4); box-shadow:0 24px 50px rgba(0,0,0,.3)}
.ficon{width:50px; height:50px; border-radius:14px; background:rgba(200,168,75,.13); border:1px solid rgba(200,168,75,.2); display:inline-flex; align-items:center; justify-content:center; margin-bottom:18px}
.ficon svg{width:24px; height:24px; stroke:var(--gold); fill:none; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round}
.fcard h4{margin:0 0 9px; font-size:18.5px; font-weight:780; color:var(--cream)}
.fcard p{margin:0; color:var(--cream2); font-size:14.5px}

/* ── Realistic device + app UI ───────────────────────────────────────────── */
.device{position:relative; width:300px; margin:0 auto; border-radius:46px; padding:13px;
  background:linear-gradient(160deg,#222d3c,#0b1320 70%);
  box-shadow:0 2px 6px rgba(0,0,0,.5), 0 50px 90px -20px rgba(0,0,0,.65), inset 0 0 0 1.5px rgba(255,255,255,.06)}
.device.tilt{transform:perspective(1600px) rotateY(-14deg) rotateX(4deg)}
/* Real screenshot fills the frame (the screenshot has its own status bar + nav). */
.device .shot{display:block; width:100%; height:auto; aspect-ratio:636/1400; border-radius:34px}
.device.has-shot{padding:11px}
.device .screen{position:relative; border-radius:34px; overflow:hidden; background:var(--navy); aspect-ratio:9/19.5; display:flex; flex-direction:column}
.device .island{position:absolute; top:11px; left:50%; transform:translateX(-50%); width:78px; height:20px; background:#05080d; border-radius:99px; z-index:5}
.device .gloss{position:absolute; inset:0; background:linear-gradient(135deg,rgba(255,255,255,.10),transparent 38%); pointer-events:none; z-index:4}
.statusbar{display:flex; justify-content:space-between; align-items:center; padding:13px 22px 6px; font-size:12px; font-weight:700; color:var(--cream)}
.statusbar .si{display:inline-flex; gap:5px; align-items:center}
.statusbar svg{width:15px; height:11px; fill:var(--cream)}
.appbar{display:flex; align-items:center; justify-content:space-between; padding:6px 16px 12px}
.appbar .title{font-size:17px; font-weight:800; color:var(--cream); letter-spacing:-.2px}
.appbar .acts{display:flex; gap:10px; color:var(--cream3)}
.appbar .acts svg{width:18px; height:18px; stroke:var(--cream2); fill:none; stroke-width:2}
.sbody{flex:1; overflow:hidden; padding:4px 14px 10px; display:flex; flex-direction:column; gap:11px}
.hcard{border-radius:16px; padding:15px 16px; background:linear-gradient(135deg,#1b3148,#13243a); border:1px solid var(--border-2)}
.hcard .k{font-size:10.5px; text-transform:uppercase; letter-spacing:.7px; color:var(--cream3)}
.hcard .v{font-size:26px; font-weight:850; color:var(--cream); margin-top:3px; letter-spacing:-.5px}
.hcard .v.gold{background:var(--grad-gold); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent}
.hcard .chips{display:flex; gap:8px; margin-top:12px}
.chip{font-size:10px; font-weight:700; padding:4px 9px; border-radius:99px; background:rgba(243,236,217,.07); color:var(--cream2); border:1px solid var(--border)}
.mini{display:grid; grid-template-columns:1fr 1fr; gap:9px}
.mtile{background:rgba(243,236,217,.04); border:1px solid var(--border); border-radius:13px; padding:11px 12px}
.mtile .k{font-size:9.5px; text-transform:uppercase; letter-spacing:.6px; color:var(--cream3)}
.mtile .v{font-size:16px; font-weight:800; color:var(--cream); margin-top:2px}
.mtile .v.green{color:var(--green)} .mtile .v.red{color:var(--red)} .mtile .v.gold{color:var(--gold)}
.listcard{flex:1; background:rgba(243,236,217,.03); border:1px solid var(--border); border-radius:15px; padding:8px 12px; overflow:hidden}
.lc-h{font-size:10.5px; text-transform:uppercase; letter-spacing:.6px; color:var(--cream3); padding:7px 2px 5px}
.lrow{display:flex; align-items:center; gap:10px; padding:8px 2px; border-top:1px solid var(--border)}
.lrow:first-of-type{border-top:0}
.av{width:30px; height:30px; border-radius:50%; flex:none; display:inline-flex; align-items:center; justify-content:center; font-size:12px; font-weight:800; color:var(--navy); background:var(--grad-gold)}
.av.b2{background:linear-gradient(135deg,#7aa7c7,#a9c6dd)} .av.b3{background:linear-gradient(135deg,#c59b6b,#e3c79a)} .av.b4{background:linear-gradient(135deg,#8fb89b,#bcdcc6)}
.lrow .nm{flex:1; min-width:0}
.lrow .nm .t{font-size:13px; font-weight:700; color:var(--cream); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.lrow .nm .s{font-size:11px; color:var(--cream3)}
.lrow .amt{font-size:13px; font-weight:800; color:var(--cream)}
.tag{font-size:9.5px; font-weight:800; padding:3px 8px; border-radius:99px}
.tag.due{background:rgba(95,180,135,.16); color:var(--green)}
.tag.over{background:rgba(217,122,122,.16); color:var(--red)}
.tag.paid{background:rgba(243,236,217,.08); color:var(--cream3)}
.spark{display:flex; align-items:flex-end; gap:7px; height:64px; padding:8px 2px 2px}
.spark i{flex:1; background:var(--grad-gold); border-radius:4px 4px 0 0; opacity:.9}
.tabbar{display:flex; justify-content:space-around; align-items:center; padding:9px 8px 16px; border-top:1px solid var(--border); background:rgba(8,15,24,.5)}
.tabbar .tb{display:flex; flex-direction:column; align-items:center; gap:3px; color:var(--cream3); font-size:8.5px; font-weight:600}
.tabbar .tb svg{width:21px; height:21px; stroke:var(--cream3); fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.tabbar .tb.on{color:var(--gold)} .tabbar .tb.on svg{stroke:var(--gold); fill:rgba(200,168,75,.18)}
.shot-cap{text-align:center; color:var(--cream3); font-size:13.5px; margin-top:20px; font-weight:600}

/* Showcase layout */
.shots{background:linear-gradient(180deg,rgba(22,41,61,.45),transparent); border-top:1px solid var(--border); border-bottom:1px solid var(--border)}
.shot-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:30px; justify-items:center; align-items:start}
.shot-grid .device{width:268px}
.shot-grid .col-mid{margin-top:-28px}

/* Trust band */
.band{text-align:center}
.band .wrap{max-width:720px}
.band p{color:var(--cream2); font-size:18px}

/* Footer */
footer{border-top:1px solid var(--border); padding:48px 0 40px; background:var(--navy)}
.foot{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:18px}
.foot .left{color:var(--cream3); font-size:13.5px}
.foot .left a{color:var(--cream2)}
.foot .links a{color:var(--cream2); margin-left:22px; font-size:14px; font-weight:600}
.foot .links a:hover{color:var(--gold)}

/* Legal pages (privacy / terms / account-deletion) — site theme + readable column */
.legal{max-width:780px; margin:0 auto; padding:56px 24px 90px}
.legal h1{font-size:clamp(28px,4vw,38px); font-weight:830; color:var(--cream); letter-spacing:-.6px; margin:0 0 8px}
.legal .effective{font-size:12.5px; color:var(--cream3); text-transform:uppercase; letter-spacing:.6px; margin:0 0 34px}
.legal h2{font-size:18px; font-weight:760; color:var(--cream); margin:34px 0 8px}
.legal p,.legal li{color:var(--cream2); font-size:15px; line-height:1.78; margin:0 0 10px}
.legal ul{padding-left:20px; margin:0 0 12px}
.legal li{margin:0 0 6px}
.legal strong{color:var(--cream)}
.legal a{color:var(--gold); text-decoration:underline}
.legal .warning,.legal .callout{background:rgba(200,168,75,.10); border:1px solid rgba(200,168,75,.30); border-radius:12px; padding:14px 16px; margin:12px 0}
.legal .warning p,.legal .callout p{margin:0}
.legal .effective + p,.legal h2 + p{margin-top:0}

@media (max-width:900px){
  .hero .row{grid-template-columns:1fr; text-align:center}
  .hero p{max-width:none; margin-inline:auto}
  .cta-row{justify-content:center}
  .hero .visual{order:-1}
  .fgrid{grid-template-columns:1fr}
  .shot-grid{grid-template-columns:1fr; gap:48px}
  .shot-grid .col-mid{margin-top:0}
  .device.tilt{transform:none}
  .nav-links .hide-sm{display:none}
}
@media (max-width:520px){
  section{padding:64px 0}
  .stats{grid-template-columns:repeat(2,1fr); gap:20px}
  .foot{flex-direction:column; align-items:flex-start}
  .foot .links a{margin:0 18px 0 0}
}