*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
    :root {
      --ink:#0A0A0A; --ink-2:#1A1A1A; --ink-muted:#6B6B6B; --ink-faint:#ABABAB;
      --paper:#F5F4F0; --paper-2:#ECEAE4; --white:#FFFFFF;
      --blue:#1557FF; --blue-dark:#0A3DC2; --blue-light:#EEF2FF;
      --green:#00C48C; --green-bg:#DCFCE7;
      --orange:#FF6B35; --orange-bg:#FFF7ED;
      --purple-bg:#F5F3FF; --purple:#7C3AED;
      --radius-sm:8px; --radius-md:12px; --radius-lg:18px; --radius-xl:22px;
      --font-display:'Bricolage Grotesque',sans-serif;
      --font-body:'DM Sans',sans-serif;
      --ease-out:cubic-bezier(0.16,1,0.3,1);
    }
    html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
    body { font-family:var(--font-body); background:var(--paper); color:var(--ink); line-height:1.6; font-size:16px; overflow-x:hidden; }
    .wrap { max-width:1100px; margin:0 auto; padding:0 20px; }
    @media(min-width:768px){ .wrap { padding:0 36px; } }
    @media(min-width:1100px){ .wrap { padding:0 48px; } }

    /* NAV */
    nav.site-nav { position:fixed; top:0; left:0; right:0; z-index:100; padding:14px 0; transition:background .3s var(--ease-out),box-shadow .3s; }
    nav.site-nav.scrolled { background:rgba(245,244,240,.92); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); box-shadow:0 1px 0 rgba(0,0,0,.08); }
    .nav-inner { display:flex; align-items:center; justify-content:space-between; gap:16px; }
    .nav-logo { font-family:var(--font-display); font-weight:800; font-size:22px; color:var(--ink); text-decoration:none; letter-spacing:-.03em; }
    .nav-logo span { color:var(--blue); }
    .nav-links { display:none; list-style:none; align-items:center; gap:32px; }
    @media(min-width:768px){ .nav-links { display:flex; } }
    .nav-links a { font-size:14px; font-weight:500; color:var(--ink-muted); text-decoration:none; transition:color .2s; }
    .nav-links a:hover,.nav-links a.active { color:var(--ink); }
    .nav-cta { display:none; }
    @media(min-width:768px){ .nav-cta { display:inline-flex; } }
    .btn { display:inline-flex; align-items:center; gap:8px; font-family:var(--font-body); font-weight:600; font-size:14px; padding:13px 24px; border-radius:10px; text-decoration:none; border:none; cursor:pointer; transition:transform 160ms cubic-bezier(.23,1,.32,1),background-color 140ms ease,box-shadow 140ms ease; white-space:nowrap; }
    .btn:active { transform:scale(.97) !important; transition-duration:100ms; }
    .btn-primary { background:var(--blue); color:#fff !important; }
    .btn-primary:hover { background:var(--blue-dark); transform:translateY(-1px); box-shadow:0 8px 24px rgba(21,87,255,.28); }
    .btn-ghost { background:transparent; color:var(--ink); border:1.5px solid rgba(0,0,0,.15); }
    .btn-ghost:hover { border-color:var(--ink); }
    .btn-wa { background:#25D366; color:#fff !important; }
    .btn-wa:hover { background:#1EB858; transform:translateY(-1px); box-shadow:0 8px 24px rgba(37,211,102,.3); }
    .btn-white { background:var(--white); color:var(--ink); }
    .btn-white:hover { box-shadow:0 8px 24px rgba(0,0,0,.12); transform:translateY(-1px); }
    .btn-lg { font-size:16px; padding:16px 32px; }
    .hamburger { display:flex; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:4px; }
    @media(min-width:768px){ .hamburger { display:none; } }
    .ham-line { width:24px; height:2px; background:var(--ink); border-radius:2px; transition:transform 220ms cubic-bezier(.23,1,.32,1),opacity 180ms ease; transform-origin:center; }
    .hamburger.open .ham-line:nth-child(1) { transform:translateY(7px) rotate(45deg); }
    .hamburger.open .ham-line:nth-child(2) { opacity:0; transform:scaleX(0); }
    .hamburger.open .ham-line:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }
    .mobile-drawer { position:fixed; inset:0; z-index:99; background:var(--paper); display:flex; flex-direction:column; padding:100px 24px 40px; transform:translateX(100%); transition:transform .4s var(--ease-out); }
    .mobile-drawer.open { transform:translateX(0); }
    .mobile-drawer a { font-family:var(--font-display); font-weight:700; font-size:32px; color:var(--ink); text-decoration:none; padding:14px 0; border-bottom:1px solid var(--paper-2); display:flex; align-items:center; justify-content:space-between; letter-spacing:-.02em; }
    .mobile-drawer .drawer-cta { margin-top:32px; display:flex; flex-direction:column; gap:12px; }
    .drawer-cta .btn { justify-content:center; font-size:16px; padding:16px; }

    /* PAGE HERO */
    .page-hero { padding:110px 0 64px; background:var(--white); border-bottom:1px solid rgba(0,0,0,.06); }
    @media(min-width:768px){ .page-hero { padding:130px 0 80px; } }
    .breadcrumb { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--ink-muted); margin-bottom:24px; }
    .breadcrumb a { color:var(--ink-muted); text-decoration:none; }
    .breadcrumb a:hover { color:var(--ink); }
    .page-badge { display:inline-flex; align-items:center; gap:8px; background:var(--blue-light); color:var(--blue); border-radius:100px; padding:5px 14px; font-size:12px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; margin-bottom:16px; }
    .page-title { font-family:var(--font-display); font-weight:800; font-size:clamp(32px,7vw,58px); letter-spacing:-.03em; line-height:1.05; margin-bottom:16px; max-width:640px; }
    .page-title em { font-style:normal; color:var(--blue); }
    .page-sub { font-size:16px; color:var(--ink-muted); line-height:1.7; max-width:520px; margin-bottom:32px; }

    /* HERO STATS ROW */
    .hero-stats { display:flex; flex-wrap:wrap; gap:12px; }
    .hero-stat { background:var(--paper); border:1px solid var(--paper-2); border-radius:var(--radius-md); padding:14px 20px; display:flex; align-items:center; gap:12px; }
    .hero-stat-num { font-family:var(--font-display); font-weight:800; font-size:22px; letter-spacing:-.03em; color:var(--ink); line-height:1; }
    .hero-stat-label { font-size:12px; color:var(--ink-muted); font-weight:500; line-height:1.4; }

    /* SECTION */
    .section { padding:80px 0; }
    @media(min-width:768px){ .section { padding:100px 0; } }
    .section-label { display:inline-flex; align-items:center; gap:8px; background:var(--blue-light); color:var(--blue); border-radius:100px; padding:5px 14px; font-size:12px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; margin-bottom:16px; }
    .section-title { font-family:var(--font-display); font-weight:700; font-size:clamp(26px,4.5vw,42px); letter-spacing:-.02em; line-height:1.12; margin-bottom:14px; }
    .section-sub { font-size:16px; color:var(--ink-muted); line-height:1.7; max-width:520px; }

    /* ── PROCESS TIMELINE ── */
    .timeline { margin-top:64px; position:relative; }

    /* vertical spine — desktop only */
    @media(min-width:800px){
      .timeline::before {
        content:''; position:absolute;
        left:50%; top:0; bottom:0;
        width:2px; transform:translateX(-50%);
        background:linear-gradient(to bottom, transparent 0%, var(--blue-light) 8%, var(--blue-light) 92%, transparent 100%);
      }
    }

    .tl-step {
      display:grid; gap:24px;
      margin-bottom:48px;
      position:relative;
    }
    @media(min-width:800px){
      .tl-step { grid-template-columns:1fr 80px 1fr; align-items:center; }
      .tl-step:nth-child(even) .tl-card { order:3; }
      .tl-step:nth-child(even) .tl-visual { order:1; }
      .tl-step:nth-child(even) .tl-spine { order:2; }
    }

    /* mobile layout: spine left, card right */
    @media(max-width:799px){
      .tl-step { grid-template-columns:48px 1fr; grid-template-rows:auto; }
      .tl-spine { grid-column:1; grid-row:1; }
      .tl-card { grid-column:2; grid-row:1; }
      .tl-visual { display:none; }

      /* continuous left line on mobile */
      .tl-spine { position:relative; }
      .tl-spine::before {
        content:''; position:absolute;
        left:50%; top:52px; bottom:-48px;
        width:2px; transform:translateX(-50%);
        background:var(--blue-light);
      }
      .tl-step:last-child .tl-spine::before { display:none; }
    }

    .tl-spine { display:flex; justify-content:center; align-items:flex-start; padding-top:4px; z-index:1; }
    .tl-dot {
      width:48px; height:48px; border-radius:50%;
      background:var(--white);
      border:2px solid var(--blue-light);
      display:flex; align-items:center; justify-content:center;
      font-family:var(--font-display); font-weight:800; font-size:17px;
      color:var(--blue); letter-spacing:-.02em;
      box-shadow:0 0 0 6px var(--paper);
      transition:border-color .3s,background .3s,color .3s,box-shadow .3s;
      flex-shrink:0;
    }
    .tl-step.active .tl-dot,
    .tl-step:hover .tl-dot {
      background:var(--blue); color:#fff;
      border-color:var(--blue);
      box-shadow:0 0 0 6px var(--blue-light);
    }

    .tl-card {
      background:var(--white); border-radius:var(--radius-xl);
      padding:28px 28px 28px;
      border:1px solid rgba(0,0,0,.06);
      box-shadow:0 4px 20px rgba(0,0,0,.04);
      transition:transform 160ms cubic-bezier(.23,1,.32,1),box-shadow 160ms ease;
    }
    @media(hover:hover){ .tl-card:hover { transform:translateY(-3px); box-shadow:0 16px 40px rgba(0,0,0,.1); } }

    .tl-step-label { font-size:11px; font-weight:700; color:var(--ink-faint); text-transform:uppercase; letter-spacing:.08em; margin-bottom:8px; }
    .tl-card h2 { font-family:var(--font-display); font-weight:700; font-size:21px; letter-spacing:-.02em; margin-bottom:10px; }
    .tl-card p { font-size:14px; color:var(--ink-muted); line-height:1.7; }
    .tl-card-detail { margin-top:16px; display:flex; flex-wrap:wrap; gap:8px; }
    .tl-detail-chip { font-size:12px; font-weight:600; padding:5px 12px; border-radius:100px; background:var(--paper); border:1px solid var(--paper-2); color:var(--ink-muted); display:inline-flex; align-items:center; gap:6px; }

    .tl-visual {
      display:flex; align-items:center; justify-content:center;
    }
    .tl-icon-box {
      width:100px; height:100px; border-radius:var(--radius-lg);
      display:flex; align-items:center; justify-content:center;
      font-size:48px;
    }

    /* colour per step */
    .tl-step:nth-child(1) .tl-icon-box { background:var(--blue-light); }
    .tl-step:nth-child(2) .tl-icon-box { background:var(--green-bg); }
    .tl-step:nth-child(3) .tl-icon-box { background:var(--orange-bg); }
    .tl-step:nth-child(4) .tl-icon-box { background:var(--purple-bg); }
    .tl-step:nth-child(5) .tl-icon-box { background:var(--paper-2); }
    .tl-step:nth-child(6) .tl-icon-box { background:var(--green-bg); }

    /* ── PROMISE SECTION ── */
    .promise-section {
      background:var(--ink); border-radius:var(--radius-xl);
      padding:64px 40px; margin:0 20px; overflow:hidden; position:relative;
    }
    @media(min-width:768px){ .promise-section { padding:80px 64px; margin:0 36px; } }
    .promise-section::before { content:''; position:absolute; width:500px; height:500px; border-radius:50%; background:rgba(21,87,255,.08); top:-150px; right:-150px; pointer-events:none; }
    .promise-grid { display:grid; gap:48px; }
    @media(min-width:900px){ .promise-grid { grid-template-columns:1fr 1fr; align-items:center; gap:80px; } }
    .promise-left .section-label { background:rgba(255,255,255,.08); color:rgba(255,255,255,.7); }
    .promise-left .section-title { color:var(--white); margin-bottom:14px; }
    .promise-left .section-sub { color:rgba(255,255,255,.6); margin-bottom:32px; max-width:440px; }
    .promise-cards { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
    @media(max-width:480px){ .promise-cards { grid-template-columns:1fr; } }
    .promise-card { background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08); border-radius:var(--radius-md); padding:20px; }
    .promise-card .p-icon { font-size:22px; margin-bottom:10px; }
    .promise-card h3 { font-family:var(--font-display); font-weight:700; font-size:15px; color:var(--white); letter-spacing:-.01em; margin-bottom:6px; }
    .promise-card p { font-size:13px; color:rgba(255,255,255,.55); line-height:1.55; }

    /* ── FAQ MINI ── */
    .faq-list { margin-top:48px; display:flex; flex-direction:column; gap:12px; }
    .faq-item { background:var(--white); border-radius:var(--radius-md); padding:20px 24px; border:1px solid rgba(0,0,0,.06); }
    .faq-q { font-family:var(--font-display); font-weight:700; font-size:15px; margin-bottom:8px; letter-spacing:-.01em; }
    .faq-a { font-size:14px; color:var(--ink-muted); line-height:1.65; }

    /* ── CTA ── */
    .cta-band { background:var(--blue); border-radius:var(--radius-xl); padding:64px 40px; margin:0 20px; text-align:center; position:relative; overflow:hidden; }
    @media(min-width:768px){ .cta-band { padding:80px 64px; margin:0 36px; } }
    .cta-band::before { content:''; position:absolute; width:400px; height:400px; border-radius:50%; background:rgba(255,255,255,.06); top:-100px; right:-100px; pointer-events:none; }
    .cta-band::after { content:''; position:absolute; width:300px; height:300px; border-radius:50%; background:rgba(255,255,255,.04); bottom:-80px; left:-80px; pointer-events:none; }
    .cta-band h2 { font-family:var(--font-display); font-weight:800; font-size:clamp(26px,4.5vw,44px); letter-spacing:-.02em; color:var(--white); margin-bottom:14px; position:relative; z-index:1; }
    .cta-band p { font-size:17px; color:rgba(255,255,255,.8); max-width:480px; margin:0 auto 32px; line-height:1.6; position:relative; z-index:1; }
    .cta-actions { display:flex; flex-wrap:wrap; justify-content:center; gap:12px; position:relative; z-index:1; }

    /* FOOTER */
    footer { background:var(--ink); color:#fff; padding:64px 0 32px; margin-top:80px; }
    .footer-grid { display:grid; gap:40px; margin-bottom:48px; }
    @media(min-width:640px){ .footer-grid { grid-template-columns:1fr 1fr; } }
    @media(min-width:900px){ .footer-grid { grid-template-columns:1.4fr 1fr 1fr 1fr; gap:48px; } }
    .footer-brand h2 { font-family:var(--font-display); font-weight:800; font-size:26px; letter-spacing:-.03em; margin-bottom:12px; }
    .footer-brand h2 span { color:var(--blue); }
    .footer-brand p { font-size:14px; color:rgba(255,255,255,.5); line-height:1.65; max-width:260px; }
    .footer-brand address { font-style:normal; margin-top:14px; font-size:13px; color:rgba(255,255,255,.4); line-height:1.7; }
    .footer-col :is(h3,h4) { font-weight:600; font-size:13px; color:rgba(255,255,255,.4); text-transform:uppercase; letter-spacing:.06em; margin-bottom:16px; }
    .footer-col a,.footer-col p { display:block; font-size:14px; color:rgba(255,255,255,.65); text-decoration:none; margin-bottom:10px; transition:color .2s; }
    .footer-col a:hover { color:#fff; }
    .footer-bottom { border-top:1px solid rgba(255,255,255,.08); padding-top:24px; display:flex; flex-direction:column; gap:8px; font-size:13px; color:rgba(255,255,255,.35); }
    @media(min-width:640px){ .footer-bottom { flex-direction:row; justify-content:space-between; align-items:center; } }
    .footer-bottom a { color:rgba(255,255,255,.45); text-decoration:none; }
    .footer-bottom a:hover { color:#fff; }

    /* FAB */
    .fab-wrap { position:fixed; bottom:20px; right:20px; z-index:200; display:flex; flex-direction:column; align-items:flex-end; gap:10px; }
    .fab-items { display:flex; flex-direction:column; align-items:flex-end; gap:10px; opacity:0; transform:scale(.85) translateY(12px); transition:opacity 160ms ease,transform 160ms var(--ease-out); pointer-events:none; }
    .fab-items.open { opacity:1; transform:scale(1) translateY(0); pointer-events:all; }
    .fab-item { display:flex; align-items:center; gap:10px; background:#fff; border-radius:100px; padding:10px 18px 10px 12px; font-size:13px; font-weight:600; color:var(--ink); text-decoration:none; box-shadow:0 8px 24px rgba(0,0,0,.14); transition:transform 160ms cubic-bezier(.23,1,.32,1),box-shadow 160ms ease; white-space:nowrap; }
    .fab-item:hover { box-shadow:0 12px 32px rgba(0,0,0,.2); transform:translateX(-4px); }
    .fab-icon { width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center; }
    .fab-btn { width:52px; height:52px; border-radius:50%; background:var(--ink); color:#fff; border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; box-shadow:0 8px 24px rgba(0,0,0,.2); transition:transform 160ms cubic-bezier(.23,1,.32,1); font-size:22px; }
    .fab-plus { display:inline-block; transition:transform .3s var(--ease-out); }
    .fab-btn.open .fab-plus { transform:rotate(45deg); }

    /* ANIMATIONS */
    .fade-up { opacity:0; transform:translateY(24px); transition:opacity .65s var(--ease-out),transform .65s var(--ease-out); }
    .fade-up.visible { opacity:1; transform:translateY(0); }
    .fd1{transition-delay:.06s;} .fd2{transition-delay:.13s;} .fd3{transition-delay:.2s;} .fd4{transition-delay:.27s;}
    @media(prefers-reduced-motion:reduce){ .fade-up{opacity:1;transform:none;transition:none;} }