/* ============================================================================
   Built4U Apps — company site theme.
   A deliberately distinct identity from LendBook: clean, modern, light, with a
   refined indigo→violet gradient. (LendBook keeps its warm navy/gold at /lendbook/.)
   ========================================================================== */
:root{
  --bg:#ffffff;
  --bg-soft:#f6f7fb;
  --ink:#0c1222;        /* headings */
  --body:#4d5a72;       /* body text */
  --muted:#8a94a7;
  --line:#e8ebf3;       /* hairlines */
  --brand:#6366f1;
  --brand-2:#8b5cf6;
  --grad:linear-gradient(135deg,#6366f1 0%,#8b5cf6 100%);
  --ring:rgba(99,102,241,.14);
  --shadow:0 1px 2px rgba(12,18,34,.04), 0 12px 32px rgba(12,18,34,.06);
  --shadow-lg:0 24px 60px rgba(76,86,140,.16);
  --maxw:1080px;
  --r:16px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--body);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
  line-height:1.65; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
a{color:var(--brand); text-decoration:none}
a:hover{text-decoration:none}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px}
.grad-text{background:var(--grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent}

/* ---- Header ---- */
header{position:sticky; top:0; z-index:20;
  background:rgba(255,255,255,.72); backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--line)}
.nav{display:flex; align-items:center; justify-content:space-between; height:68px}
.brand{display:flex; align-items:center; gap:11px; font-weight:800; color:var(--ink); font-size:18px; letter-spacing:-.2px}
.brand:hover{text-decoration:none}
.logo{width:30px; height:30px; border-radius:9px; background:var(--grad);
  display:inline-flex; align-items:center; justify-content:center; box-shadow:0 4px 12px var(--ring)}
.nav-links{display:flex; align-items:center; gap:28px}
.nav-links a{color:var(--body); font-size:14.5px; font-weight:600}
.nav-links a:hover{color:var(--ink)}
.nav-cta{background:var(--ink); color:#fff !important; padding:9px 16px; border-radius:10px; font-size:14px}
.nav-cta:hover{filter:brightness(1.15)}

/* ---- Buttons ---- */
.btn{display:inline-flex; align-items:center; gap:8px; padding:14px 26px; border-radius:12px; font-weight:700; font-size:15.5px; transition:transform .15s ease, box-shadow .15s ease, filter .15s ease}
.btn-primary{background:var(--grad); color:#fff; box-shadow:0 10px 24px var(--ring)}
.btn-primary:hover{transform:translateY(-2px); box-shadow:0 16px 34px var(--ring)}
.btn-ghost{background:#fff; color:var(--ink); border:1px solid var(--line); box-shadow:var(--shadow)}
.btn-ghost:hover{border-color:#cdd3e6; transform:translateY(-2px)}

/* ---- Hero ---- */
.hero{position:relative; overflow:hidden; padding:118px 0 92px; text-align:center}
.hero::before,.hero::after{content:""; position:absolute; border-radius:50%; filter:blur(90px); opacity:.5; z-index:0}
.hero::before{width:520px; height:520px; background:radial-gradient(circle,#a5b4fc,transparent 70%); top:-180px; left:-120px}
.hero::after{width:480px; height:480px; background:radial-gradient(circle,#ddd6fe,transparent 70%); top:-140px; right:-120px}
.hero .wrap{position:relative; z-index:1}
.eyebrow{display:inline-block; padding:6px 14px; border-radius:999px; background:#fff; border:1px solid var(--line);
  box-shadow:var(--shadow); color:var(--brand); font-weight:700; letter-spacing:.3px; font-size:13px}
.hero h1{font-size:clamp(40px,6.4vw,68px); line-height:1.04; margin:22px auto 20px; max-width:14ch;
  font-weight:850; letter-spacing:-1.6px; color:var(--ink)}
.hero p{max-width:600px; margin:0 auto; color:var(--body); font-size:19px}
.cta-row{margin-top:34px; display:flex; gap:14px; justify-content:center; flex-wrap:wrap}
.trust{margin-top:26px; color:var(--muted); font-size:13.5px; display:flex; gap:18px; justify-content:center; flex-wrap:wrap}
.trust span{display:inline-flex; align-items:center; gap:7px}
.trust svg{width:15px; height:15px; stroke:var(--brand)}

/* ---- Sections ---- */
section{padding:92px 0; position:relative}
.alt{background:var(--bg-soft); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.sec-head{text-align:center; max-width:640px; margin:0 auto 52px}
.sec-tag{color:var(--brand); font-weight:700; letter-spacing:1px; text-transform:uppercase; font-size:12.5px}
.sec-h{font-size:clamp(28px,4vw,42px); font-weight:820; color:var(--ink); margin:12px 0 12px; letter-spacing:-.8px; line-height:1.1}
.sec-sub{color:var(--body); font-size:17.5px; margin:0}

/* ---- App grid ---- */
.app-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:24px}
.app-card{position:relative; display:block; background:#fff; border:1px solid var(--line); border-radius:20px;
  padding:32px; color:inherit; box-shadow:var(--shadow); transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease}
.app-card:hover{transform:translateY(-4px); box-shadow:var(--shadow-lg); border-color:#dfe3f2; text-decoration:none}
.app-icon{width:56px; height:56px; border-radius:15px; display:inline-flex; align-items:center; justify-content:center; margin-bottom:18px; box-shadow:var(--shadow)}
.app-icon.lendbook{background:linear-gradient(160deg,#16293d,#0f1d2e)}
.app-card .name{font-size:23px; font-weight:820; color:var(--ink); margin:0 0 8px; letter-spacing:-.3px}
.app-card .desc{color:var(--body); font-size:15.5px; margin:0 0 18px}
.tags{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:18px}
.tag{font-size:12.5px; font-weight:600; color:var(--brand); background:var(--ring); padding:5px 11px; border-radius:999px}
.more{color:var(--brand); font-weight:700; font-size:14.5px; display:inline-flex; align-items:center; gap:6px}
.app-card:hover .more{gap:10px}
.app-card.soon{background:var(--bg-soft); border-style:dashed; box-shadow:none}
.app-card.soon:hover{transform:none; box-shadow:none; border-color:var(--line)}
.app-icon.dashed{background:#fff; border:1.5px dashed #cdd3e6}
.app-icon.dashed svg{stroke:var(--muted)}

/* ---- Value cards ---- */
.grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:24px}
.vcard{background:#fff; border:1px solid var(--line); border-radius:18px; padding:30px; box-shadow:var(--shadow)}
.vicon{width:48px; height:48px; border-radius:13px; background:var(--ring); display:inline-flex; align-items:center; justify-content:center; margin-bottom:18px}
.vicon svg{width:24px; height:24px; stroke:var(--brand); fill:none; stroke-width:2}
.vcard h4{margin:0 0 9px; font-size:18.5px; font-weight:780; color:var(--ink)}
.vcard p{margin:0; color:var(--body); font-size:15px}

/* ---- About ---- */
.about{max-width:720px; margin:0 auto; text-align:center}
.about p{color:var(--body); font-size:18px; margin:0 0 16px}

/* ---- Contact ---- */
.contact-card{max-width:620px; margin:0 auto; background:var(--ink); border-radius:24px; padding:54px 40px; text-align:center; color:#fff; box-shadow:var(--shadow-lg)}
.contact-card h3{font-size:clamp(24px,3.4vw,32px); font-weight:820; margin:0 0 10px; letter-spacing:-.5px}
.contact-card p{color:#aeb6c9; margin:0 0 26px; font-size:16.5px}
.contact-card .email-btn{display:inline-block; background:#fff; color:var(--ink); padding:14px 28px; border-radius:12px; font-weight:700}
.contact-card .email-btn:hover{transform:translateY(-2px)}
.contact-card .sub{margin-top:16px; color:#8a94a7; font-size:14px}
.contact-card .sub a{color:#cbd2e3}

/* ---- Footer ---- */
footer{border-top:1px solid var(--line); padding:44px 0; background:var(--bg)}
.foot{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px}
.foot .left{display:flex; align-items:center; gap:10px; color:var(--muted); font-size:13.5px}
.foot .left .logo{width:22px; height:22px; border-radius:7px}
.foot .links a{color:var(--body); margin-left:22px; font-size:14px; font-weight:600}
.foot .links a:hover{color:var(--ink)}

@media (max-width:820px){
  .nav-links{gap:16px}
  .nav-links .hide-sm{display:none}
  .app-grid{grid-template-columns:1fr}
  .grid3{grid-template-columns:1fr}
}
@media (max-width:520px){
  section{padding:64px 0}
  .hero{padding:84px 0 64px}
  .foot{flex-direction:column; align-items:flex-start}
  .foot .links a{margin:0 18px 0 0}
}