:root{
      --bg:#f7f1e8;
      --paper:#fffaf4;
      --ink:#152945;
      --ink-2:#30445f;
      --muted:#6a7583;
      --gold:#f4b63f;
      --gold-2:#ff8f1f;
      --gold-3:#ffd782;
      --line:#14263e;
      --shadow:8px 8px 0 #14263e;
      --shadow-sm:5px 5px 0 #14263e;
      --radius:24px;
      --max:1180px;
    }

    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      color:var(--ink);
      background:
        radial-gradient(circle at 15% 10%, rgba(255,170,63,.15), transparent 22%),
        radial-gradient(circle at 90% 15%, rgba(244,182,63,.18), transparent 24%),
        linear-gradient(180deg, #fff8f1 0%, #f8f3ec 50%, #f4eee6 100%);
      overflow-x:hidden;
    }

    img{max-width:100%;display:block}
    a{text-decoration:none;color:inherit}

    .container{width:min(var(--max), calc(100% - 32px)); margin:0 auto;}

    .site-header{
      position:sticky; top:0; z-index:40;
      backdrop-filter: blur(14px);
      background:rgba(255,248,241,.8);
      border-bottom:3px solid rgba(20,38,62,.12);
    }

    .nav-wrap{
      display:flex; align-items:center; justify-content:space-between;
      gap:20px; padding:18px 0;
    }

    .brand{display:flex; align-items:center; gap:14px; font-weight:900; letter-spacing:.2px}
    .brand img{width:52px; height:52px; object-fit:contain}
    .brand span{font-size:1.15rem}

    .nav{
      display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end;
    }
    .nav a{
      padding:11px 16px;
      border:3px solid transparent;
      border-radius:999px;
      font-weight:700;
      transition:.2s ease;
    }
    .nav a:hover{border-color:var(--line); background:#fff; transform:translate(-2px,-2px); box-shadow:4px 4px 0 var(--line)}

    .hero{padding:48px 0 28px}
    .hero-grid{
      display:grid; grid-template-columns:1.1fr .9fr; gap:32px; align-items:center;
    }

    .eyebrow{
      display:inline-flex; align-items:center; gap:10px;
      border:3px solid var(--line); box-shadow:var(--shadow-sm); background:#fff;
      border-radius:999px; padding:12px 18px; font-weight:800; margin-bottom:22px;
    }

    .hero h1{
      font-size:clamp(2.6rem, 5vw, 5rem);
      line-height:.96; margin:0 0 18px; letter-spacing:-.04em; max-width:11ch;
    }
    .hero h1 .highlight{color:var(--gold-2)}
    .hero p{
      font-size:1.08rem; line-height:1.7; color:var(--ink-2); margin:0 0 28px; max-width:62ch;
    }

    .hero-actions{display:flex; gap:14px; flex-wrap:wrap; margin-bottom:26px}
    .btn{
      display:inline-flex; align-items:center; justify-content:center; gap:10px;
      padding:16px 24px; border:3px solid var(--line); border-radius:18px; font-weight:900;
      transition:.2s ease; cursor:pointer;
    }
    .btn-primary{background:linear-gradient(135deg, var(--gold), var(--gold-2)); color:#fff; box-shadow:var(--shadow)}
    .btn-secondary{background:#fff; box-shadow:var(--shadow-sm)}
    .btn:hover{transform:translate(-3px,-3px)}

    .hero-stats{
      display:grid; grid-template-columns:repeat(3,1fr); gap:14px;
    }
    .stat{
      background:#fff; border:3px solid var(--line); border-radius:22px; box-shadow:var(--shadow-sm);
      padding:18px;
    }
    .stat strong{display:block; font-size:1.65rem; line-height:1; margin-bottom:8px}
    .stat span{color:var(--muted); font-weight:700; font-size:.95rem; line-height:1.4}

    .hero-visual{position:relative; min-height:690px}
    .blob{
      position:absolute; inset:48px 18px 90px 58px;
      background:radial-gradient(circle at 30% 35%, rgba(255,255,255,.78) 0%, rgba(255,255,255,.4) 17%, rgba(255,179,58,.2) 18%, rgba(255,143,31,.7) 45%, rgba(154,82,255,.38) 60%, rgba(255,255,255,0) 72%),
                 linear-gradient(135deg, rgba(255,182,63,.25), rgba(255,143,31,.08));
      filter:blur(10px);
      border-radius:50%;
      opacity:.92;
      animation:float 8s ease-in-out infinite;
    }

    .phone-stack{position:relative; z-index:1; height:100%; display:flex; align-items:center; justify-content:center}
    .phone{
      position:absolute;
      width:240px;
      border:3px solid var(--line);
      background:#fff;
      border-radius:32px;
      box-shadow:12px 12px 0 var(--line);
      overflow:hidden;
      transition:transform .35s ease, box-shadow .35s ease;
    }
    .phone:hover{transform:translateY(-8px) rotate(0deg) !important; box-shadow:18px 18px 0 var(--line)}
    .phone img{width:100%; height:100%; object-fit:cover}
    .phone.one{left:10px; top:210px; transform:rotate(-8deg)}
    .phone.two{left:150px; top:70px; z-index:2; transform:rotate(3deg)}
    .phone.three{right:0; top:235px; transform:rotate(8deg)}

    section{padding:56px 0}
    .section-head{display:flex; align-items:flex-end; justify-content:space-between; gap:18px; margin-bottom:26px; flex-wrap:wrap}
    .section-head h2{font-size:clamp(2rem,3.6vw,3.2rem); line-height:1; margin:0}
    .section-head p{max-width:60ch; margin:0; color:var(--ink-2); line-height:1.7}

    .snapshot{
      background:#fffefb; border:3px solid var(--line); border-radius:32px; box-shadow:var(--shadow);
      padding:26px;
    }
    .snapshot-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:16px}
    .snap-card{
      background:linear-gradient(180deg, #fff 0%, #fff7eb 100%);
      border:3px solid var(--line); border-radius:24px; padding:20px; box-shadow:var(--shadow-sm);
    }
    .snap-card small{display:block; color:var(--muted); font-weight:800; margin-bottom:10px; text-transform:uppercase; letter-spacing:.08em}
    .snap-card strong{font-size:1.06rem; line-height:1.45}

    .about-layout{display:grid; grid-template-columns:1.15fr .85fr; gap:24px; align-items:stretch}
    .panel{
      background:#fff; border:3px solid var(--line); border-radius:28px; box-shadow:var(--shadow-sm); padding:26px;
    }
    .panel p{line-height:1.8; color:var(--ink-2)}
    .pain-list, .benefit-list, .contact-list{display:grid; gap:14px; margin-top:18px}
    .mini-row{
      display:flex; gap:14px; align-items:flex-start; background:#fff8ed; border:3px solid var(--line);
      border-radius:20px; padding:16px; box-shadow:4px 4px 0 var(--line);
    }
    .mini-icon{
      width:42px; height:42px; border-radius:14px; flex:0 0 42px; display:grid; place-items:center;
      background:linear-gradient(135deg, var(--gold), var(--gold-2)); color:#fff; font-size:1.15rem; font-weight:900; border:3px solid var(--line)
    }

    .steps{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
    .step{
      background:#fff; border:3px solid var(--line); border-radius:28px; box-shadow:var(--shadow-sm); padding:22px;
      position:relative; overflow:hidden;
    }
    .step .num{
      width:58px; height:58px; border-radius:18px; display:grid; place-items:center; font-size:1.3rem; font-weight:900;
      background:linear-gradient(135deg, var(--gold), var(--gold-2)); color:#fff; border:3px solid var(--line); box-shadow:4px 4px 0 var(--line); margin-bottom:18px;
    }
    .step h3, .benefit h3, .contact-card h3{margin:0 0 10px; font-size:1.3rem}
    .step p, .benefit p, .contact-card p{margin:0; color:var(--ink-2); line-height:1.7}

    .feature-band{
      margin-top:24px; display:grid; grid-template-columns:1fr 1fr; gap:20px;
    }
    .feature-card{
      min-height:260px; background:#fff; border:3px solid var(--line); border-radius:28px; box-shadow:var(--shadow-sm); padding:24px; position:relative; overflow:hidden;
    }
    .feature-card .tag{
      display:inline-flex; background:#fff7eb; border:3px solid var(--line); border-radius:999px; padding:10px 14px; font-size:.84rem; font-weight:900; margin-bottom:16px;
    }
    .orbits{position:absolute; right:-40px; bottom:-40px; width:240px; height:240px; border-radius:50%; background:radial-gradient(circle, rgba(255,215,128,.9) 0%, rgba(255,143,31,.7) 33%, rgba(255,143,31,0) 70%); filter:blur(4px); opacity:.8}

    .benefits-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:18px}
    .benefit{
      background:#fff; border:3px solid var(--line); border-radius:28px; box-shadow:var(--shadow-sm); padding:24px;
    }

    .contact-wrap{display:grid; grid-template-columns:.9fr 1.1fr; gap:22px}
    .contact-card{background:#fff; border:3px solid var(--line); border-radius:28px; box-shadow:var(--shadow-sm); padding:24px}
    .contact-form{display:grid; grid-template-columns:1fr 1fr; gap:14px}
    .contact-form .full{grid-column:1/-1}
    .field{
      background:#fff9f0; border:3px solid var(--line); border-radius:18px; padding:16px 18px; font:inherit; color:var(--ink); min-height:58px;
    }
    textarea.field{min-height:150px; resize:vertical}

    .cta-banner{
      margin-top:24px; background:linear-gradient(135deg, #162b45 0%, #1c3555 62%, #27476d 100%);
      color:#fff; border:3px solid var(--line); border-radius:34px; box-shadow:var(--shadow); padding:30px; position:relative; overflow:hidden;
    }
    .cta-banner:after{content:""; position:absolute; inset:auto -120px -120px auto; width:280px; height:280px; border-radius:50%; background:radial-gradient(circle, rgba(255,190,81,.8), rgba(255,190,81,0));}
    .cta-banner h3{font-size:clamp(1.8rem,3vw,2.7rem); line-height:1.02; margin:0 0 14px}
    .cta-banner p{max-width:56ch; color:rgba(255,255,255,.86); line-height:1.75; margin:0 0 18px}

    footer{padding:12px 0 48px}
    .footer-box{
      background:#fff; border:3px solid var(--line); border-radius:30px; box-shadow:var(--shadow); padding:30px;
      display:grid; grid-template-columns:1.1fr .8fr 1fr; gap:24px;
    }
    .footer-brand{display:grid; gap:16px}
    .footer-brand img{width:220px; max-width:100%; object-fit:contain}
    .footer-brand p, .footer-col p{line-height:1.75; color:var(--ink-2); margin:0}
    .footer-col h4{margin:0 0 16px; font-size:1.12rem}
    .footer-links{display:grid; gap:10px}
    .footer-links a{font-weight:700; color:var(--ink-2)}
    .socials{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:18px}
    .social{
      width:48px; height:48px; border-radius:16px; display:grid; place-items:center; border:3px solid var(--line);
      background:linear-gradient(135deg, var(--gold), var(--gold-2)); color:#fff; box-shadow:4px 4px 0 var(--line); font-weight:900;
    }
    .footer-contact{display:grid; gap:10px}

    .reveal{opacity:0; transform:translateY(24px); transition:all .75s cubic-bezier(.2,.8,.2,1)}
    .reveal.is-visible{opacity:1; transform:none}

    @keyframes float{
      0%,100%{transform:translateY(0px) scale(1)}
      50%{transform:translateY(-16px) scale(1.03)}
    }

    @media (max-width: 1080px){
      .hero-grid, .about-layout, .contact-wrap, .feature-band, .footer-box{grid-template-columns:1fr}
      .hero-visual{min-height:780px}
      .phone.one{left:20px; top:260px}
      .phone.two{left:50%; transform:translateX(-50%) rotate(2deg); top:40px}
      .phone.three{right:20px; top:330px}
    }

    @media (max-width: 840px){
      .snapshot-grid, .steps, .benefits-grid, .contact-form, .hero-stats{grid-template-columns:1fr}
      .nav-wrap{flex-direction:column; align-items:flex-start}
      .nav{justify-content:flex-start}
      .hero{padding-top:28px}
      .hero-visual{min-height:860px}
      .phone{width:220px}
      .phone.one{left:0; top:320px}
      .phone.two{top:30px}
      .phone.three{right:0; top:540px}
    }

    @media (max-width: 560px){
      .container{width:min(var(--max), calc(100% - 20px));}
      .brand span{font-size:1rem}
      .nav a{padding:9px 12px; font-size:.94rem}
      .btn{width:100%}
      .hero h1{max-width:none}
      .hero-visual{min-height:960px}
      .phone{width:200px}
      .phone.one{left:6px; top:360px}
      .phone.two{top:28px}
      .phone.three{right:6px; top:620px}
      .snapshot, .panel, .benefit, .feature-card, .contact-card, .footer-box, .step{padding:20px}
    }