:root {
      --terracotta: #CA5B42;
      --orange:     #FC7D45;
      --peach:      #F29358;
      --cream:      #EBC9A5;
      --mint:       #41C58E;
      --green:      #25B67B;

      /* BG diubah ke warm dark brown yang selaras dengan palet terracotta */
      --bg:         #FFFBF1;
      --bg-2:       #080808;
      --bg-3:       #2a1510;
      --text-soft:  rgba(255,255,255,.72);
      --white:      #ffffff;

      /* Surface colors berbasis palet */
      --surface-warm: rgba(202,91,66,.07);
      --surface-warm-2: rgba(242,147,88,.06);
      --border-warm: rgba(235,201,165,.10);
      --border-warm-2: rgba(235,201,165,.16);
    }

    *, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
    html { scroll-behavior:smooth; }

    body {
      background: var(--bg);
      color: white;
      overflow-x: hidden;
      font-family: 'Outfit', sans-serif;
    }

    section { position:relative; width:100%; }
    .container { width:min(1200px, 92%); margin:auto; }

    /* ───────────────────────────────────
       NAVBAR
    ─────────────────────────────────── */
    nav {
      position:fixed; top:0; left:0; width:100%; z-index:999;
      backdrop-filter:blur(20px);
      background:rgba(255, 251, 241,.65);
      border-bottom:1px solid var(--border-warm);
    }
    .nav-inner {
      height:72px; display:flex; align-items:center; justify-content:space-between;
    }
    .logo {
      font-family:'Cormorant Garamond',serif;
      font-size:22px; font-weight:700; letter-spacing:1px;
      color: var(--orange);
    }
    .logo span { color:var(--orange); font-style:italic; }
    .nav-links { display:flex; gap:32px; }
    .nav-links a {
      color:var(--orange); text-decoration:none; opacity:.55;
      font-size:15px; font-weight:400; transition:.3s; letter-spacing:.3px;
    }
    .nav-links a:hover { opacity:1; color:var(--orange); }
    .nav-btn {
      padding:11px 22px; border-radius:999px; border:none;
      background:var(--orange); color:white;
      font-family:'Outfit',sans-serif; font-size:15px; font-weight:500;
      cursor:pointer; transition:.3s;
      text-decoration: none;
    }
    .nav-btn:hover { background:var(--peach); transform:translateY(-1px); }

    /* ───────────────────────────────────
       HERO
    ─────────────────────────────────── */
    .hero {
      min-height:100svh;
      display:flex; align-items:center; justify-content:center;
      padding-top:100px;
      overflow: hidden;
      color:var(--terracotta);
    }

    .hero-bg-title {
      position:absolute;
      font-size:17vw; white-space:nowrap;
      color:var(--terracotta); opacity:.05; z-index:0;
      font-family:'Cormorant Garamond',serif; font-weight:700;
      pointer-events:none; letter-spacing:-8px;
      top:50%; transform:translateY(-50%);
    }

    .hero::after {
      content:'';
      position:absolute; 
      inset: 0 0 auto 0;  /* top:0, right:0, bottom:auto, left:0 */
      z-index:0; 
      pointer-events:none;
      height: 60%;  /* batasi tinggi, bagian bawah otomatis transparan */
      background:
        radial-gradient(ellipse 80% 60% at 50% 0%, rgba(242,147,88,.10) 0%, transparent 70%),
        radial-gradient(ellipse 50% 50% at 80% 80%, rgba(65,197,142,.07) 0%, transparent 60%);
    }

    /* ── FLOATING CARDS ── */
    .floating-card {
      position:absolute;
      width:240px; height:480px;
      border-radius:32px; overflow:hidden;
      display:flex; flex-direction:column; justify-content:space-between;
      box-shadow: 0 30px 80px rgba(0,0,0,.55), inset 0 0 0 1px rgba(235,201,165,.12);
      will-change:transform;
    }

    .bg-float-card {
      width: 100%;
    }

    .floating-card::before {
      content:''; position:absolute;
      width:280px; height:280px; border-radius:50%;
      top:-60px; left:50%; transform:translateX(-50%);
      background: radial-gradient(circle, #FC7D45 0%, #CA5B42 40%, #7a2510 100%);
      filter:blur(10px); opacity:.85;
    }
    .floating-card.green::before {
      background: radial-gradient(circle, #EBC9A5 0%, #41C58E 40%, #25B67B 100%);
    }

    .floating-card.dark {
      background: linear-gradient(180deg, #CA5B42 0%, #3d1508 45%, #1a0d08 100%);
    }
    .floating-card.green {
      color:#0d2a1a;
      background: linear-gradient(180deg, #EBC9A5 0%, #41C58E 60%, #25B67B 100%);
    }

    .card-content { position:relative; z-index:2; }
    .card-top {
      display:flex; justify-content:space-between;
      font-size:11px; letter-spacing:1.5px; font-weight:500;
      font-family:'Outfit',sans-serif; opacity:.8;
    }
    .card-title {
      margin-top:160px;
      font-size:46px; line-height:.9; letter-spacing:-2px;
      font-family:'Cormorant Garamond',serif; font-weight:700;
    }
    .card-desc {
      margin-top:14px; line-height:1.55; font-size:12px; opacity:.8;
    }
    .card-category {
      display:inline-block;
      padding:5px 12px; border-radius:999px;
      background:rgba(235,201,165,.18); font-size:11px;
      letter-spacing:1px; margin-bottom:10px;
      color:var(--orange);
    }
    .green .card-category { background:rgba(26,13,8,.15); color:#0d2a1a; }

    .card-buttons { display:flex; gap:10px; margin-top:22px; flex-wrap:wrap; }
    .mini-btn {
      padding:9px 14px; border-radius:999px; border:none;
      font-size:11px; font-family:'Outfit',sans-serif; font-weight:500;
      cursor:pointer;
    }
    .mini-btn.primary { background:var(--orange); color:white; }
    .mini-btn.secondary {
      background:transparent; border:1px solid rgba(235,201,165,.35); color:white;
    }
    .green .mini-btn.secondary { border:1px solid rgba(13,42,26,.25); color:#0d2a1a; }

    .card-1 { left:3%;   top:18%; }
    .card-2 { right:5%;  top:12%; }
    .card-3 { left:10%;  bottom:-10%; }
    .card-4 { right:12%; bottom:-5%; }

    /* ── HERO CENTER ── */
    .hero-center {
      position:relative; z-index:2;
      text-align:center; width:min(900px,100%);
    }
    .hero-badge {
      display:inline-flex; align-items:center; gap:10px;
      padding:10px 20px; border-radius:999px;
      background:rgba(202,91,66,.12); border:1px solid rgba(235,201,165,.18);
      margin-bottom:28px; font-size:12px; letter-spacing:1.5px;
      color:var(--orange); font-weight:400;
    }
    .dot {
      width:9px; height:9px; border-radius:50%;
      background:var(--mint); box-shadow:0 0 16px var(--mint);
      animation:pulse 2s infinite;
    }
    @keyframes pulse {
      0%,100%{box-shadow:0 0 8px var(--mint);}
      50%{box-shadow:0 0 22px var(--mint);}
    }

    .hero h1 {
      font-family:'Cormorant Garamond',serif;
      font-size:clamp(54px, 10vw, 130px);
      line-height:.88; letter-spacing:-4px; font-weight:700;
    }
    .hero h1 .line-accent { color:var(--peach); font-style:italic; }

    .hero p {
      width:min(620px,90%); margin:28px auto 0;
      font-size:16px; line-height:1.75; opacity:.72; font-weight:300;
    }

    .hero-actions {
      margin-top:36px; display:flex; justify-content:center; gap:16px; flex-wrap:wrap;
    }
    .btn {
      padding:15px 28px; border-radius:999px; border:none;
      cursor:pointer; font-family:'Outfit',sans-serif; font-size:14px; font-weight:500;
      transition:.3s;
    }
    .btn-primary { background:var(--orange); color:white; }
    .btn-primary:hover { background:var(--peach); transform:translateY(-2px); box-shadow:0 10px 32px rgba(252,125,69,.35); }
    .btn-secondary {
      background:transparent; color:var(--orange);
      border:1px solid rgba(235,201,165,1);
    }
    .btn-secondary:hover { border-color:var(--orange); color:var(--orange); transform:translateY(-2px); }

    /* trust strip */
    .hero-trust {
      margin-top:48px; display:flex; align-items:center; justify-content:center;
      gap:28px; flex-wrap:wrap;
    }
    .trust-avatars { display:flex; }
    .trust-avatars span {
      width:34px; height:34px; border-radius:50%;
      display:flex; align-items:center; justify-content:center;
      font-size:14px; border:2px solid var(--bg);
      margin-left:-8px; background:var(--terracotta);
    }
    .trust-avatars span:nth-child(2) { background:#8a3520; }
    .trust-avatars span:nth-child(3) { background:var(--green); }
    .trust-avatars span:nth-child(4) { background:var(--peach); }
    .trust-text { font-size:15px; opacity:.65; color:var(--orange); }
    .trust-text strong { color:var(--orange); opacity:1; font-weight:600; }

    /* ───────────────────────────────────
       MARQUEE
    ─────────────────────────────────── */
    .marquee-wrap {
      padding:22px 0;
      background:linear-gradient(90deg, var(--terracotta), var(--orange), var(--peach), var(--terracotta));
      background-size:200%;
      animation:gradShift 6s linear infinite;
      overflow:hidden; display:flex;
    }
    @keyframes gradShift { 0%{background-position:0%} 100%{background-position:200%} }
    .marquee-track {
      display:flex; white-space:nowrap;
      animation:marquee 20s linear infinite;
    }
    .marquee-item {
      font-family:'Cormorant Garamond',serif;
      font-size:20px; font-weight:600; color:white;
      padding:0 28px; letter-spacing:-.3px;
    }
    .marquee-sep { color:rgba(255,255,255,.55); font-size:18px; align-self:center; }
    @keyframes marquee { from{transform:translateX(0)} to{transform:translateX(-50%)} }

    /* ───────────────────────────────────
       TEMPLATES SECTION
    ─────────────────────────────────── */
    .templates { padding:140px 0; }

    .section-head { text-align:center; margin-bottom:70px; color: var(--terracotta); }
    .section-head .over {
      color:var(--peach); letter-spacing:3px; font-size:11px; font-weight:600;
      display:block; margin-bottom:16px;
    }
    .section-head h2 {
      font-family:'Cormorant Garamond',serif;
      font-size:clamp(38px,5vw,72px);
      line-height:.95; letter-spacing:-2px; font-weight:700;
    }
    .section-head h2 em { color:var(--peach); font-style:italic; }
    .section-head p { margin:18px auto 0; max-width:560px; opacity:.65; font-size:15px; line-height:1.7; color:var(--orange); }

    .template-grid {
      display:grid; grid-template-columns:repeat(3,1fr); gap:24px;
    }
    .tpl-card {
      border-radius:24px; overflow:hidden;
      border:1px solid rgba(235,201,165,.08);
      background: rgba(227, 106, 106,.04);
      transition:.4s; 
      cursor:pointer;
      position:relative;
    }
    .tpl-card:hover { transform:translateY(-8px); border-color:rgba(242,147,88,.3); box-shadow:0 24px 60px rgba(227, 106, 106,.4); }
    .tpl-thumb {
      height:260px; position:relative; overflow:hidden;
      display:flex; align-items:center; justify-content:center;
      background: rgba(227, 106, 106,.04)
    }
    .tpl-thumb-bg{
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
    }
    .tpl-thumb-inner {
      width:160px; height:220px; border-radius:20px;
      display:flex; flex-direction:column; align-items:center;
      justify-content:center; padding:20px; text-align:center;
      box-shadow:0 12px 40px rgba(0,0,0,.4);
      position:relative; overflow:hidden;
    }
    .tpl-thumb-inner::before {
      content:''; position:absolute; inset:0;
      background:inherit; opacity:.15;
    }
    .tpl-thumb-ornament {
      font-family:'Cormorant Garamond',serif;
      font-size:42px; font-style:italic; font-weight:600;
      line-height:1; margin-bottom:6px; position:relative; z-index:1;
    }
    .tpl-thumb-name {
      font-family:'Cormorant Garamond',serif;
      font-size:15px; letter-spacing:2px; opacity:.85; position:relative; z-index:1;
    }

    /* Template card palettes — semua berbasis 6 warna palet */
    .tpl-thumb-inner.terra {
      background:linear-gradient(155deg, #CA5B42, #7a2510);
      color: #EBC9A5;
    }
    .tpl-thumb-inner.sage {
      background:linear-gradient(155deg, #EBC9A5, #41C58E);
      color:#0d2a1a;
    }
    .tpl-thumb-inner.dusk {
      background:linear-gradient(155deg, #EBC9A5, #F29358);
      color:#3a1208;
    }
    .tpl-thumb-inner.blush {
      background:linear-gradient(155deg, #F29358, #FC7D45);
      color:#3a1208;
    }
    .tpl-thumb-inner.forest {
      background:linear-gradient(155deg, #0d2a1a, #25B67B);
      color:#EBC9A5;
    }
    .tpl-thumb-inner.ember {
      background:linear-gradient(155deg, #3d1508, #FC7D45);
      color:#EBC9A5;
    }

    .tpl-info { padding:20px 24px; 
      background: rgba(227, 106, 106,.04) }
    .tpl-name {
      font-family:'Cormorant Garamond',serif;
      font-size:20px; font-weight:600; margin-bottom:4px; color:var(--orange);
    }
    .tpl-tag {
      font-size:11px; opacity:.5; letter-spacing:1px; font-weight:400; color:var(--orange);
    }
    .tpl-badge {
      position:absolute; top:14px; right:14px;
      padding:5px 12px; border-radius:999px; font-size:10px;
      letter-spacing:1px; font-weight:600;
    }
    .badge-new { background:var(--mint); color:#0d2a1a; }
    .badge-pop { background:var(--orange); color:white; }

    /* ───────────────────────────────────
       HOW IT WORKS
    ─────────────────────────────────── */
    .how {
      padding:130px 0;
      background:linear-gradient(180deg, transparent, rgba(202,91,66,.05), transparent);
    }
    .how-grid {
      display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center;
    }
    .how-left h2 {
      font-family:'Cormorant Garamond',serif;
      font-size:clamp(42px,5vw,80px);
      line-height:.92; letter-spacing:-3px; font-weight:700;
      color: var(--terracotta);
    }
    .how-left h2 em { color:var(--peach); font-style:italic; }
    .how-left p { margin-top:24px; line-height:1.8; opacity:.68; max-width:480px; font-size:15px; color:var(--orange); }
    .how-left .btn { margin-top:36px; }

    .steps { display:flex; flex-direction:column; gap:0; }
    .step {
      display:flex; gap:28px; padding:28px 0;
      border-bottom:1px solid rgba(235,201,165,.07);
      align-items:flex-start; transition:.3s;
    }
    .step:last-child { border-bottom:none; }
    .step:hover .step-num-wrap { background:var(--terracotta); color:#fff; border-color:var(--terracotta); }
    .step-num-wrap {
      width:48px; height:48px; border-radius:50%; flex-shrink:0;
      display:flex; align-items:center; justify-content:center;
      background:rgba(202,91,66,.1); border:1px solid rgba(235,201,165,.12);
      font-family:'Cormorant Garamond',serif; font-size:20px; font-weight:700;
      transition:.3s; color:var(--orange);
    }
    .step-body h4 {
      font-family:'Cormorant Garamond',serif;
      font-size:22px; font-weight:600; margin-bottom:8px; color:var(--orange);
    }
    .step-body p { font-size:15px; line-height:1.7; opacity:.62; color:var(--orange); }

    /* ───────────────────────────────────
       FEATURES GRID
    ─────────────────────────────────── */
    .features { padding:130px 0; }
    .feature-grid {
      display:grid; grid-template-columns:repeat(3,1fr); gap:20px;
    }
    .feat {
      padding:40px; border-radius:24px;
      background:rgba(202,91,66,.04);
      border:1px solid rgba(235,201,165,.07);
      transition:.35s;
    }
    .feat:hover { border-color:rgba(242,147,88,.28); transform:translateY(-4px); background:rgba(202,91,66,.08); }
    .feat-icon {
      width:52px; height:52px; border-radius:16px;
      display:flex; align-items:center; justify-content:center;
      font-size:24px; margin-bottom:24px;
    }
    /* Icon bg — semua dari palet */
    .fi-1 { background:rgba(202,91,66,.22); }
    .fi-2 { background:rgba(65,197,142,.22); }
    .fi-3 { background:rgba(235,201,165,.22); }
    .fi-4 { background:rgba(252,125,69,.22); }
    .fi-5 { background:rgba(37,182,123,.22); }
    .fi-6 { background:rgba(242,147,88,.22); }
    .feat h3 {
      font-family:'Cormorant Garamond',serif;
      font-size:24px; font-weight:600; margin-bottom:12px; letter-spacing:-.5px; color:var(--orange);
    }
    .feat p { font-size:15px; line-height:1.75; opacity:.62; color:var(--orange); }

    /* ───────────────────────────────────
       PRICING
    ─────────────────────────────────── */
    .pricing { padding:130px 0; }
    .pricing-grid {
      display:grid; grid-template-columns:repeat(3,1fr); gap:20px;
      margin-top:70px;
    }
    .price-card {
      border-radius:28px; padding:44px 36px;
      border:1px solid rgba(235,201,165,.08);
      background:rgba(202,91,66,.04);
      position:relative; transition:.3s;
    }
    .price-card:hover { transform:translateY(-4px); }
    .price-card.featured {
      background:linear-gradient(155deg, #2e0e04, #1e0a04);
      border-color:rgba(252,125,69,.30);
      box-shadow:0 0 60px rgba(202,91,66,.12), inset 0 0 0 1px rgba(252,125,69,.18);
    }
    .price-tag {
      font-size:11px; letter-spacing:2px; color:var(--peach); font-weight:600;
      margin-bottom:20px; display:block;
    }
    .price-name {
      font-family:'Cormorant Garamond',serif;
      font-size:30px; font-weight:700; margin-bottom:20px; color:var(--orange);
    }
    .price-num {
      font-family:'Cormorant Garamond',serif;
      font-size:58px; font-weight:700; line-height:1;
      color:var(--orange);
    }
    .price-num sup { font-size:22px; vertical-align:top; margin-top:14px; display:inline-block; color:var(--peach); }
    .price-num span { font-size:16px; opacity:.5; font-family:'Outfit',sans-serif; color:var(--orange); }
    .price-divider { height:1px; background:rgba(235,201,165,.08); margin:28px 0; }
    .price-features { list-style:none; display:flex; flex-direction:column; gap:14px; }
    .price-features li { font-size:15px; opacity:.72; display:flex; align-items:center; gap:10px; color:var(--orange); }
    .price-features li::before {
      content:'✦'; font-size:10px;
      color:var(--mint); flex-shrink:0;
    }
    .price-card .btn { margin-top:32px; width:100%; text-align:center; }

    /* ───────────────────────────────────
       CTA
    ─────────────────────────────────── */
    .cta { padding:120px 0 140px; }
    .cta-box {
      padding:90px 70px; border-radius:40px; text-align:center;
      position:relative; overflow:hidden;
      background:linear-gradient(225deg, hsla(0, 68%, 65%, 1) 0%, hsla(0, 100%, 85%, 1) 37%, hsla(43, 100%, 91%, 1) 69%, hsla(43, 100%, 97%, 1) 100%);
      /* border:1px solid rgba(235,201,165,.12); */
    }
    .cta-box::before {
      content:''; position:absolute; inset:0; pointer-events:none;
      background:
        radial-gradient(ellipse at 20% 50%, rgba(202,91,66,.28) 0%, transparent 60%),
        radial-gradient(ellipse at 80% 50%, rgba(65,197,142,.18) 0%, transparent 55%);
    }
    .cta-box > * { position:relative; z-index:2; }
    .cta-box h2 {
      font-family:'Cormorant Garamond',serif;
      font-size:clamp(42px,7vw,96px);
      line-height:.9; letter-spacing:-4px; font-weight:700;
    }
    .cta-box h2 em { color:var(--terracotta); font-style:italic; }
    .cta-box p { margin:24px auto 0; max-width:580px; line-height:1.8; opacity:.75; font-size:15px; color:var(--orange); }
    .cta-box .btn { margin-top:40px; background:var(--orange); color:white; font-size:15px; padding:17px 36px; }
    .cta-box .btn:hover { background:var(--peach); transform:translateY(-2px); box-shadow:0 12px 40px rgba(252,125,69,.4); }

    /* ───────────────────────────────────
      BLOG
    ─────────────────────────────────── */
    .blog { padding: 130px 0; }

    .blog-grid {
      display: grid;
      grid-template-columns: 1.4fr 1fr 1fr;
      gap: 20px;
      margin-top: 0;
    }

    .blog-card {
      border-radius: 24px; overflow: hidden;
      border: 1px solid rgba(235,201,165,.12);
      background: rgba(202,91,66,.04);
      cursor: pointer; transition: .4s;
    }
    .blog-card:hover {
      transform: translateY(-6px);
      border-color: rgba(242,147,88,.3);
      box-shadow: 0 20px 50px rgba(202,91,66,.18);
    }

    .blog-thumb {
      width: 100%; aspect-ratio: 16/9;
    }
    .blog-card:not(.blog-card-featured) .blog-thumb {
      aspect-ratio: 4/3;
    }
    .blog-thumb-terra { background: linear-gradient(155deg, #CA5B42, #7a2510); }
    .blog-thumb-sage  { background: linear-gradient(155deg, #41C58E, #25B67B 60%, #0d2a1a); }
    .blog-thumb-dusk  { background: linear-gradient(155deg, #EBC9A5, #F29358 60%, #CA5B42); }

    .blog-body { padding: 20px 22px 24px; }

    .blog-cat {
      display: inline-block; padding: 4px 12px; border-radius: 999px;
      font-size: 10px; letter-spacing: 1.2px; font-weight: 600;
      background: rgba(252,125,69,.14); color: var(--orange);
      margin-bottom: 12px;
    }
    .blog-cat.blog-cat-green { background: rgba(65,197,142,.14); color: var(--green); }
    .blog-cat.blog-cat-cream { background: rgba(235,201,165,.22); color: var(--terracotta); }

    .blog-title {
      font-family: 'Cormorant Garamond', serif;
      font-size: 20px; font-weight: 600; line-height: 1.25;
      letter-spacing: -.4px; color: var(--orange); margin-bottom: 8px;
    }
    .blog-card-featured .blog-title { font-size: 26px; }

    .blog-excerpt { font-size: 13px; line-height: 1.7; opacity: .58; color: var(--orange); }
    .blog-card-featured .blog-excerpt { font-size: 14px; }

    .blog-meta {
      display: flex; align-items: center; gap: 10px;
      margin-top: 16px; font-size: 12px; opacity: .45; color: var(--orange);
    }
    .blog-dot {
      width: 3px; height: 3px; border-radius: 50%;
      background: var(--peach); flex-shrink: 0;
    }

    .blog-footer { display: flex; justify-content: center; margin-top: 48px; }

    @media(max-width:980px) {
      .blog-grid { grid-template-columns: 1fr 1fr; }
      .blog-card-featured { grid-column: 1 / -1; }
      .blog-card-featured .blog-thumb { aspect-ratio: 16/9; }
    }
    @media(max-width:768px) {
      .blog-grid { grid-template-columns: 1fr; }
    }

    /* ───────────────────────────────────
       FOOTER
    ─────────────────────────────────── */
    footer {
      padding:48px 0;
      border-top:1px solid rgba(235,201,165,.07);
      background:rgba(255, 251, 241,.65)
    }
    .footer-inner {
      display:flex; justify-content:space-between; align-items:center;
      gap:20px; flex-wrap:wrap;
    }
    .footer-logo {
      font-family:'Cormorant Garamond',serif;
      font-size:20px; font-weight:700; color:var(--orange);
    }
    .footer-logo span { color:var(--orange); font-style:italic; }
    .footer-links { display:flex; gap:28px; }
    .footer-links a { color:var(--orange); text-decoration:none; opacity:.42; font-size:15px; transition:.3s; }
    .footer-links a:hover { opacity:.9; color:var(--peach); }
    footer p { opacity:.32; font-size:12px; color:var(--orange); }

    /* ───────────────────────────────────
       SCROLL FADE
    ─────────────────────────────────── */
    .fade-up { opacity:0; transform:translateY(36px); transition:opacity .8s ease, transform .8s ease; }
    .fade-up.visible { opacity:1; transform:translateY(0); }

    /* ───────────────────────────────────
       RESPONSIVE
    ─────────────────────────────────── */
    @media(max-width:980px) {
      .feature-grid { grid-template-columns:1fr 1fr; }
      .pricing-grid  { grid-template-columns:1fr; max-width:420px; margin-inline:auto; }
      .how-grid { grid-template-columns:1fr; }
      .template-grid { grid-template-columns:1fr 1fr; }
      .floating-card { width:180px; height:360px; transform:scale(.85); }
      .card-title { margin-top:120px; font-size:34px; }
      .hero { padding-top:120px; }
    }

    @media(max-width:768px) {
      .nav-links { display:none; }
      .hero { min-height:110svh; }
      .hero h1 { letter-spacing:-2px; }
      .hero p { font-size:14px; }
      .floating-card { width:150px; height:300px; border-radius:24px;}
      .card-title { font-size:26px; margin-top:100px; }
      .card-desc { display:none; }
      .card-buttons { display:none; }
      .card-1 { left:-8%; top:14%; }
      .card-2 { right:-10%; top:12%; }
      .card-3 { left:-10%; bottom:10%; }
      .card-4 { right:-15%; bottom:12%; }
      .cta-box { padding:50px 30px; }
      .feature-grid { grid-template-columns:1fr; }
      .template-grid { grid-template-columns:1fr; }
    }