:root{
      --red:#ea4e40;
      --orange:#f9b233;
      --purple:#a14f99;
      --blue:#47c1f0;
      --darkblue:#1d71b8;
      --green:#95c11f;

      --text:#1b2340;
      --muted:rgba(27,35,64,.72);

      --card:#ffffff;
      --stroke:rgba(27,35,64,.10);

      --radius:22px;
      --shadow:0 16px 40px rgba(27,35,64,.12);
      --shadow-soft:0 10px 22px rgba(27,35,64,.10);
      --max:1120px;
    }

    @font-face{
      font-family: "Houschka Rounded";
      src: url("assets/font/adobe.ttf") format("truetype");
      font-weight: 600;
      font-style: normal;
      font-display: swap;
    }

    *{box-sizing:border-box}
    html,body{height:100%}

    body{
      margin:0;
      font-family: "Houschka Rounded", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
      font-weight: 600;
      color:var(--text);
      background: #fff;
      overflow-x:hidden;
    }
    body::before{
      content:"";
      position:fixed;
      inset:0;
      z-index:-2;
      background:
        radial-gradient(900px 520px at 12% 12%, rgba(71,193,240,.25), transparent 60%),
        radial-gradient(820px 520px at 90% 12%, rgba(249,178,51,.22), transparent 58%),
        radial-gradient(900px 600px at 55% 105%, rgba(149,193,31,.18), transparent 60%),
        linear-gradient(180deg, #f2fbff, #fff7f2 42%, #f7fff0);
    }

    a{color:inherit}
    .wrap{position:relative; min-height:100%}

    .float-layer{
      position:fixed; inset:0;
      pointer-events:none;
      z-index:-1;
      opacity:.55;
      filter:saturate(1.08);
    }
    .float{
      position:absolute;
      width:140px; height:auto;
      transform: translate3d(0,0,0);
      will-change: transform;
    }
    .float.small{width:92px}
    .float.big{width:190px}

    @keyframes driftA{
      0%   {transform: translate(0,0) rotate(0deg) scale(1)}
      25%  {transform: translate(22px,-12px) rotate(3deg) scale(1.02)}
      50%  {transform: translate(-12px,18px) rotate(-3deg) scale(1.01)}
      75%  {transform: translate(16px,10px) rotate(2deg) scale(1.02)}
      100% {transform: translate(0,0) rotate(0deg) scale(1)}
    }
    @keyframes driftB{
      0%   {transform: translate(0,0) rotate(0deg) scale(1)}
      25%  {transform: translate(-20px,10px) rotate(-3deg) scale(1.02)}
      50%  {transform: translate(12px,-18px) rotate(3deg) scale(1.01)}
      75%  {transform: translate(-14px,-10px) rotate(-2deg) scale(1.02)}
      100% {transform: translate(0,0) rotate(0deg) scale(1)}
    }

    .float.one{left:4%; top:14%}
    .float.two{left:78%; top:10%}
    .float.three{left:84%; top:56%}
    .float.four{left:10%; top:62%}
    .float.five{left:46%; top:78%}
    .float.six{left:44%; top:12%}

    .float.rainbow{animation: driftA 22s ease-in-out infinite; animation-delay:-5s}
    .float.sun{animation: driftB 19s ease-in-out infinite; animation-delay:-12s}
    .float.house{animation: driftB 26s ease-in-out infinite; animation-delay:-3s}
    .float.cloud1{animation: driftA 24s ease-in-out infinite; animation-delay:-9s}
    .float.cloud2{animation: driftB 28s ease-in-out infinite; animation-delay:-15s}
    .float.cloud3{animation: driftA 30s ease-in-out infinite; animation-delay:-18s}

    header{
      position:sticky; top:0; z-index:20;
      backdrop-filter: blur(12px);
      background: rgba(255,255,255,.75);
      border-bottom: 1px solid rgba(27,35,64,.08);
    }
    .nav{
      max-width:var(--max);
      margin:0 auto;
      padding:14px 18px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:14px;
    }
    .brand{
      display:flex; align-items:center; gap:12px;
      text-decoration:none;
    }
    .brand img{height:44px; width:auto; display:block}
    .brand span{
      font-family:"Titan One", cursive;
      font-weight: 400;
      font-stretch: normal;
      letter-spacing:.6px;
      font-size:18px;
      line-height:1;
      color: var(--darkblue);
      text-rendering: geometricPrecision;
    }

    main{position:relative; z-index:1}
    section{
      max-width:var(--max);
      margin:0 auto;
      padding:68px 18px;
    }

    .hero-card{
      background:
        radial-gradient(420px 220px at 85% 10%, rgba(234,78,64,.14), transparent 70%),
        radial-gradient(420px 220px at 10% 85%, rgba(71,193,240,.14), transparent 70%),
        var(--card);
      border: 1px solid rgba(27,35,64,.10);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      padding:26px;
      overflow:hidden;
      position:relative;
    }

    h1,h2,h3{
      font-family:"Titan One", cursive;
      font-weight:400;
      font-stretch:normal;
      letter-spacing:.6px;
      text-rendering: geometricPrecision;
    }
    h1{
      font-size: clamp(34px, 4vw, 52px);
      line-height:1.06;
      margin:14px 0 12px;
    }
    .lead{
      margin:0 0 18px;
      color:var(--muted);
      font-size: 18px;
      line-height:1.55;
      max-width: 70ch;
      font-weight:700;
    }

    .panel{
      background:
        radial-gradient(260px 140px at 12% 10%, rgba(71,193,240,.10), transparent 70%),
        radial-gradient(260px 140px at 95% 90%, rgba(234,78,64,.08), transparent 70%),
        var(--card);
      border: 1px solid rgba(27,35,64,.10);
      border-radius: var(--radius);
      padding:18px;
      box-shadow: var(--shadow-soft);
      height:100%;
    }
    .panel h3{margin:0 0 10px; color: var(--darkblue)}
    .panel p{margin:0 0 10px; color: rgba(27,35,64,.72); font-weight:800; line-height:1.55}
    .panel ul{margin:0 0 10px 18px; color: rgba(27,35,64,.72); font-weight:800; line-height:1.55}
    .panel li{margin:6px 0}

    .fineprint{font-size:13px; color: rgba(27,35,64,.62); font-weight:800; line-height:1.45}

    .cta-row{
      display:flex; flex-wrap:wrap;
      gap:12px; align-items:center;
      margin-top:14px;
    }
    .btn{
      display:inline-flex; align-items:center; justify-content:center; gap:10px;
      padding:12px 16px;
      border-radius: 16px;
      border:1px solid rgba(27,35,64,.10);
      background: rgba(255,255,255,.85);
      color:var(--text);
      font-weight:900;
      text-decoration:none;
      cursor:pointer;
      transition:.18s ease;
      box-shadow: var(--shadow-soft);
    }
    .btn:hover{transform: translateY(-1px) rotate(-.2deg); filter: brightness(1.02)}
    .btn.primary{
      border-color: rgba(234,78,64,.22);
      background: linear-gradient(90deg, rgba(234,78,64,.95), rgba(249,178,51,.95));
      color:#111427;
    }

    footer{
      border-top: 1px solid rgba(27,35,64,.08);
      background: rgba(255,255,255,.70);
      padding:26px 18px;
      position:relative;
      z-index:2;
    }
    .foot{
      max-width:var(--max);
      margin:0 auto;
      display:flex;
      flex-wrap:wrap;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      color: rgba(27,35,64,.72);
      font-weight:900;
    }
    .foot a{color: rgba(27,35,64,.88)}
    .mini{display:flex; align-items:center; gap:10px}
    .mini img{height:34px}

    @media (max-width: 980px){
      section{padding:56px 16px}
    }
    @media (max-width: 560px){
      .brand span{display:none}
      section{padding:56px 16px}
    }