*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

    :root {
      --primary:#1d4ed8;
      --primary-2:#3b82f6;
      --bg:#f8fafc;
      --text:#0f172a;
      --muted:#475569;
      --glass:rgba(255,255,255,0.65);
      --border:rgba(15,23,42,0.08);
    }

    html { scroll-behavior: smooth; }

    body {
      background: var(--bg);
      color: var(--text);
      font-family: 'DM Sans', sans-serif;
      overflow-x: hidden;
      cursor: none;
    }

    /* ── CURSOR ─────────────────────────────────── */
    #cursor-dot, #cursor-ring {
      position: fixed; border-radius: 50%; pointer-events: none;
      z-index: 9999; transform: translate(-50%,-50%);
      transition: opacity .3s;
    }
    #cursor-dot  { width:8px; height:8px; background:var(--primary); }
    #cursor-ring {
      width:36px; height:36px;
      border:1.5px solid rgba(29,78,216,0.5);
      transition: transform .12s ease, width .2s, height .2s;
    }

    /* ── CANVAS BACKGROUND ───────────────────────── */
    #bg-canvas {
      position: fixed; inset: 0;
      z-index: 0; pointer-events: none;
    }

    /* ── NOISE OVERLAY ───────────────────────────── */
    body::before {
      content:''; position:fixed; inset:0; z-index:1;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
      opacity:.6; pointer-events:none;
    }

    /* ── NAV ─────────────────────────────────────── */
    nav {
      position: fixed; top:0; left:0; right:0; z-index: 100;
      padding: 1.4rem 3rem;
      display: flex; align-items: center; justify-content: space-between;
      border-bottom: 1px solid var(--border);
      background: var(--glass);
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
      animation: fadeDown .8s .2s both;
    }
    .nav-logo {
      display:flex; align-items:center; gap:.75rem;
      font-family:'Playfair Display',serif;
      font-size:1.35rem; font-weight:700;
      color:var(--text); text-decoration:none;
    }
    .nav-logo .logo-icon {
      width:38px; height:38px; border-radius:10px;
      background: linear-gradient(135deg,var(--primary),var(--primary-2));
      display:grid; place-items:center;
      font-size:1.1rem;
    }
    .nav-logo span { color:var(--primary); }
    .nav-links { display:flex; gap:2.2rem; list-style:none; }
    .nav-links a {
      color:var(--muted); text-decoration:none;
      font-size:.85rem; letter-spacing:.08em; text-transform:uppercase;
      transition: color .25s;
    }
    .nav-links a:hover { color:var(--primary); }
    .nav-cta {
      padding:.55rem 1.4rem; border-radius:6px;
      background: linear-gradient(135deg,var(--primary),var(--primary-2));
      color:#fff; text-decoration:none; font-size:.85rem;
      font-weight:500; letter-spacing:.04em;
      transition: opacity .25s, transform .2s;
      box-shadow: 0 4px 20px rgba(29,78,216,0.35);
    }
    .nav-cta:hover { opacity:.85; transform:translateY(-1px); }

    /* ── HERO ────────────────────────────────────── */
    #hero {
      min-height: 100vh; position: relative; z-index:2;
      display: flex; flex-direction: column;
      align-items: center; justify-content: center;
      text-align: center; padding: 7rem 2rem 4rem;
      overflow: hidden;
    }

    /* grid lines bg */
    #hero::before {
      content:''; position:absolute; inset:0; z-index:0;
      background-image:
        linear-gradient(rgba(29,78,216,0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(29,78,216,0.04) 1px, transparent 1px);
      background-size: 60px 60px;
      -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 40%, transparent 100%);
      mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 40%, transparent 100%);
    }

    /* radial glow */
    .hero-glow {
      position:absolute; border-radius:50%; pointer-events:none; z-index:0;
      filter: blur(90px);
    }
    .glow-1 {
      width:650px; height:650px; top:-180px; left:50%;
      transform:translateX(-50%);
      background: radial-gradient(circle, rgba(29,78,216,0.35) 0%, transparent 70%);
      animation: pulse 6s ease-in-out infinite;
    }
    .glow-2 {
      width:400px; height:400px; bottom:0; right:-100px;
      background: radial-gradient(circle, rgba(59,130,246,0.12) 0%, transparent 70%);
      animation: pulse 8s 2s ease-in-out infinite;
    }

    /* badge */
    .hero-badge {
      display:inline-flex; align-items:center; gap:.5rem;
      padding:.45rem 1.1rem; border-radius:50px;
      border:1px solid var(--border);
      background: rgba(29,78,216,0.07);
      font-size:.78rem; letter-spacing:.12em; text-transform:uppercase;
      color:var(--primary); margin-bottom:2.2rem;
      animation: fadeUp .7s .3s both;
    }
    .badge-dot {
      width:6px; height:6px; border-radius:50%;
      background:var(--primary);
      box-shadow:0 0 8px var(--primary);
      animation: blink 2s infinite;
    }

    /* headline */
    .hero-headline {
      font-family:'Playfair Display',serif;
      font-size: clamp(2.8rem, 7vw, 5.5rem);
      font-weight:900; line-height:1.08;
      color:var(--text); position:relative; z-index:1;
      animation: fadeUp .8s .5s both;
    }
    .hero-headline .line-italic {
      font-style:italic; color:var(--primary);
      display:block;
    }
    .hero-headline .line-outline {
      -webkit-text-stroke:1.5px rgba(15,23,42,0.3);
      color: transparent; display:block;
    }

    /* animated quote block */
    .quote-block {
      margin: 2.8rem auto 0;
      max-width: 680px; position:relative; z-index:1;
      animation: fadeUp .8s .7s both;
    }
    .quote-marks {
      font-family:'Playfair Display',serif;
      font-size:5rem; line-height:0; color:var(--primary);
      opacity:.25; position:absolute; top:.5rem; left:-.5rem;
      pointer-events:none;
    }
    #rotating-quote {
      font-family:'Cormorant Garamond',serif;
      font-size:clamp(1.15rem, 2.5vw, 1.45rem);
      font-style:italic; font-weight:300;
      color:var(--muted); line-height:1.65;
      min-height:4rem; padding:0 1.5rem;
      transition: opacity .5s, transform .5s;
    }
    #rotating-quote.fade-out { opacity:0; transform:translateY(-8px); }
    #rotating-quote.fade-in  { opacity:1; transform:translateY(0); }
    .quote-author {
      font-size:.78rem; letter-spacing:.14em; text-transform:uppercase;
      color:var(--primary); opacity:.7; margin-top:.9rem;
      transition: opacity .5s;
    }

    /* dots */
    .quote-dots {
      display:flex; gap:.45rem; justify-content:center;
      margin-top:1.4rem;
    }
    .q-dot {
      width:5px; height:5px; border-radius:50%;
      background:rgba(29,78,216,0.25); cursor:pointer;
      transition: background .3s, transform .3s;
    }
    .q-dot.active { background:var(--primary); transform:scale(1.4); }

    /* sub text */
    .hero-sub {
      margin-top:3rem; font-size:clamp(.9rem,1.8vw,1rem);
      color:var(--muted); max-width:520px; line-height:1.8;
      animation: fadeUp .8s .9s both; position:relative; z-index:1;
    }

    /* CTA group */
    .cta-group {
      display:flex; gap:1rem; margin-top:2.5rem; flex-wrap:wrap;
      justify-content:center; animation: fadeUp .8s 1.1s both;
      position:relative; z-index:1;
    }
    .btn-primary {
      padding:.85rem 2.2rem; border-radius:8px; text-decoration:none;
      background: linear-gradient(135deg,var(--primary),var(--primary-2));
      color:#fff; font-weight:600; font-size:.92rem;
      letter-spacing:.04em;
      box-shadow: 0 6px 30px rgba(29,78,216,0.4);
      transition: transform .2s, box-shadow .2s;
    }
        /* Enhanced "Start Your Journey" Hover Theme */
    .btn-primary {
      /* Update the transition to ensure colors change smoothly */
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .btn-primary:hover {
      transform: translateY(-4px) scale(1.02); /* Lifts and slightly enlarges */
      
      /* Reverse the gradient and brighten the colors for a glowing look */
      background: linear-gradient(135deg, var(--primary-2), var(--primary)); 
      
      /* Creates an intense, professional glow behind the button */
      box-shadow: 0 15px 35px rgba(59, 130, 246, 0.6), 
                  0 5px 15px rgba(29, 78, 216, 0.4);
                  
      /* Optional: Lighten the text slightly to make it pop */
      color: #ffffff; 
      text-shadow: 0 2px 4px rgba(0,0,0,0.2);
    }
    /* stats strip */
    .stats-strip {
      display:flex; gap:0; margin-top:5rem;
      border:1px solid var(--border); border-radius:14px;
      background:var(--glass); backdrop-filter:blur(12px);
      overflow:hidden; animation: fadeUp .8s 1.3s both;
      position:relative; z-index:1;
      flex-wrap:wrap;
    }
    .stat-item {
      flex:1; min-width:140px; padding:1.5rem 2rem;
      text-align:center; position:relative;
    }
    .stat-item + .stat-item::before {
      content:''; position:absolute; left:0; top:20%;
      height:60%; width:1px; background:var(--border);
    }
    .stat-num {
      font-family:'Playfair Display',serif;
      font-size:2rem; font-weight:700; color:var(--primary);
      display:block;
    }
    .stat-label {
      font-size:.75rem; letter-spacing:.1em;
      text-transform:uppercase; color:var(--muted);
      margin-top:.3rem; display:block;
    }

    /* scroll indicator */
    .scroll-hint {
      position:absolute; bottom:2rem; left:50%; transform:translateX(-50%);
      display:flex; flex-direction:column; align-items:center; gap:.5rem;
      color:var(--muted); font-size:.72rem; letter-spacing:.14em;
      text-transform:uppercase; z-index:2;
      animation: fadeUp .8s 1.6s both;
    }
    .scroll-line {
      width:1px; height:48px;
      background:linear-gradient(to bottom, var(--primary), transparent);
      animation: scrollPulse 2s infinite;
    }

    /* ── FEATURES SECTION ────────────────────────── */
    #features {
      position:relative; z-index:2;
      padding:7rem 3rem;
      max-width:1200px; margin:0 auto;
    }
    .section-label {
      font-size:.75rem; letter-spacing:.2em; text-transform:uppercase;
      color:var(--primary); margin-bottom:1rem; display:block;
    }
    .section-title {
      font-family:'Playfair Display',serif;
      font-size:clamp(2rem,4vw,3rem); font-weight:700;
      color:var(--text); line-height:1.2; margin-bottom:1rem;
    }
    .section-title em { font-style:italic; color:var(--primary); }
    .section-desc { color:var(--muted); max-width:500px; line-height:1.8; font-size:.95rem; }

    .features-grid {
      display:grid;
      grid-template-columns: repeat(auto-fit, minmax(280px,1fr));
      gap:1.5rem; margin-top:4rem;
    }
    .feat-card {
      padding:2rem; border-radius:16px;
      border:1px solid var(--border);
      background:var(--glass); backdrop-filter:blur(10px);
      transition: transform .3s, border-color .3s, box-shadow .3s;
      position:relative; overflow:hidden;
    }
    .feat-card::before {
      content:''; position:absolute; inset:0; border-radius:16px;
      background:linear-gradient(135deg,rgba(29,78,216,0.05),transparent);
      opacity:0; transition:opacity .3s;
    }
    .feat-card:hover { transform:translateY(-6px); border-color:rgba(29,78,216,0.4); box-shadow:0 20px 50px rgba(0,0,0,0.1); }
    .feat-card:hover::before { opacity:1; }
    .feat-icon {
      width:48px; height:48px; border-radius:12px;
      background:linear-gradient(135deg,rgba(29,78,216,0.5),rgba(59,130,246,0.15));
      border:1px solid var(--border);
      display:grid; place-items:center; font-size:1.4rem;
      margin-bottom:1.3rem;
    }
    .feat-title {
      font-family:'Playfair Display',serif;
      font-size:1.15rem; font-weight:600;
      color:var(--text); margin-bottom:.6rem;
    }
    .feat-desc { font-size:.875rem; color:var(--muted); line-height:1.7; }

    /* ── HOW IT WORKS ────────────────────────────── */
    #how {
      position:relative; z-index:2;
      padding:6rem 3rem;
      background:rgba(255,255,255,0.3);
      border-top:1px solid var(--border);
      border-bottom:1px solid var(--border);
    }
    .how-inner { max-width:1100px; margin:0 auto; }
    .steps {
      display:grid;
      grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
      gap:2rem; margin-top:4rem; position:relative;
    }
    .steps::before {
      content:''; position:absolute; top:28px; left:10%; right:10%;
      height:1px; background:linear-gradient(to right, transparent, var(--border), transparent);
    }
    .step {
      text-align:center; padding:1.5rem 1rem;
    }
    .step-num {
      width:56px; height:56px; border-radius:50%;
      background:linear-gradient(135deg,var(--primary),rgba(29,78,216,0.4));
      border:1px solid var(--border);
      display:flex; align-items:center; justify-content:center;
      margin:0 auto 1.2rem;
      font-family:'Playfair Display',serif;
      font-size:1.1rem; font-weight:700; color:#fff;
      box-shadow:0 0 25px rgba(29,78,216,0.3);
    }
    .step-title {
      font-family:'Playfair Display',serif;
      font-size:1.05rem; font-weight:600; color:var(--text);
      margin-bottom:.5rem;
    }
    .step-desc { font-size:.84rem; color:var(--muted); line-height:1.7; }

    /* ── TESTIMONIAL / QUOTE WALL ────────────────── */
    #quotes {
      position:relative; z-index:2;
      padding:7rem 3rem; max-width:1100px; margin:0 auto;
    }
    .quote-wall {
      display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
      gap:1.5rem; margin-top:4rem;
    }
    .q-card {
      padding:2rem; border-radius:14px;
      border:1px solid var(--border); background:var(--glass);
      position:relative;
    }
    .q-card::before {
      content:'"'; position:absolute; top:1rem; right:1.5rem;
      font-family:'Playfair Display',serif; font-size:3rem;
      color:var(--primary); opacity:.15; line-height:1;
    }
    .q-text {
      font-family:'Cormorant Garamond',serif;
      font-size:1.05rem; font-style:italic; font-weight:300;
      color:var(--text); line-height:1.75; margin-bottom:1.2rem;
    }
    .q-person { display:flex; align-items:center; gap:.75rem; }
    .q-avatar {
      width:38px; height:38px; border-radius:50%;
      background:linear-gradient(135deg,var(--primary),var(--primary-2));
      display:grid; place-items:center; font-size:.85rem;
      font-weight:700; color:#fff; flex-shrink:0;
    }
    .q-name { font-size:.85rem; font-weight:500; color:var(--text); }
    .q-role { font-size:.75rem; color:var(--muted); }

    /* ── CTA SECTION ─────────────────────────────── */
    #cta-section {
      position:relative; z-index:2;
      padding:7rem 2rem; text-align:center;
    }
    .cta-box {
      max-width:700px; margin:0 auto; padding:4rem 3rem;
      border-radius:20px; border:1px solid var(--border);
      background: linear-gradient(135deg,rgba(29,78,216,0.15),rgba(248,250,252,0.8));
      backdrop-filter:blur(20px); position:relative; overflow:hidden;
    }
    .cta-box::before {
      content:''; position:absolute; top:-80px; left:50%; transform:translateX(-50%);
      width:400px; height:400px; border-radius:50%;
      background:radial-gradient(circle,rgba(29,78,216,0.08),transparent 70%);
      pointer-events:none;
    }
    .cta-box .section-title { font-size:clamp(1.8rem,3.5vw,2.5rem); }
    .cta-box p { color:var(--muted); margin:1rem auto 2.5rem; max-width:440px; line-height:1.75; }
    .cta-input-row {
      display:flex; gap:.75rem; flex-wrap:wrap; justify-content:center;
    }
    .cta-input-row input {
      flex:1; min-width:220px;
      padding:.85rem 1.2rem; border-radius:8px;
      background:rgba(255,255,255,0.5); border:1px solid var(--border);
      color:var(--text); font-size:.9rem; font-family:'DM Sans',sans-serif;
      outline:none; transition:border-color .25s;
    }
    .cta-input-row input::placeholder { color:rgba(15,23,42,0.3); }
    .cta-input-row input:focus { border-color:var(--primary); }

    /* ── FOOTER ──────────────────────────────────── */
    footer {
      position:relative; z-index:2;
      padding:3rem; text-align:center;
      border-top:1px solid var(--border);
      font-size:.8rem; color:rgba(15,23,42,0.5);
    }
    footer span { color:var(--primary); }

    /* ── KEYFRAMES ───────────────────────────────── */
    @keyframes fadeUp {
      from { opacity:0; transform:translateY(24px); }
      to   { opacity:1; transform:translateY(0); }
    }
    @keyframes fadeDown {
      from { opacity:0; transform:translateY(-20px); }
      to   { opacity:1; transform:translateY(0); }
    }
    @keyframes pulse {
      0%,100% { opacity:.7; transform:translateX(-50%) scale(1); }
      50%      { opacity:1;  transform:translateX(-50%) scale(1.05); }
    }
    @keyframes blink {
      0%,100% { opacity:1; }
      50%      { opacity:.3; }
    }
    @keyframes scrollPulse {
      0%   { opacity:1; transform:scaleY(1); transform-origin:top; }
      100% { opacity:0; transform:scaleY(0); transform-origin:top; }
    }
    @keyframes float {
      0%,100% { transform:translateY(0px) rotate(0deg); }
      33%  { transform:translateY(-18px) rotate(2deg); }
      66%  { transform:translateY(-9px) rotate(-1deg); }
    }

    /* ── FLOATING ORBS ───────────────────────────── */
    .orb {
      position:fixed; border-radius:50%; pointer-events:none; z-index:1;
      filter:blur(60px); animation: float linear infinite;
    }

    /* ── SCROLL REVEAL ───────────────────────────── */
    .reveal {
      opacity:0; transform:translateY(30px);
      transition:opacity .7s ease, transform .7s ease;
    }
    .reveal.visible { opacity:1; transform:translateY(0); }

  
    /* ══════════════════════════════════════════════════════════════
       RESPONSIVE BREAKPOINTS - Mobile, Tablet, Desktop
       ══════════════════════════════════════════════════════════════ */

    /* ── TABLET - iPad, Android Tablets (768px - 1024px) ── */
    @media(max-width:1024px){
      nav { padding: 1.2rem 2rem; }
      #hero { padding: 6rem 1.5rem 3rem; }
      .hero-headline { font-size: clamp(2rem, 6vw, 4rem); }
      #features, #quotes { padding: 6rem 2rem; }
      #how { padding: 5rem 2rem; }
      .features-grid { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
      .stats-strip { margin-top: 4rem; }
      .stat-item { min-width: 130px; padding: 1.2rem 1.5rem; }
    }

    /* ── MOBILE LANDSCAPE (568px - 767px) ── */
    @media(max-width:767px) and (orientation: landscape){
      #hero { min-height: auto; padding: 5rem 1.5rem 3rem; }
      .hero-headline { font-size: clamp(1.8rem, 5vw, 3rem); }
      .quote-block { margin-top: 2rem; }
      .hero-sub { margin-top: 2rem; }
      .cta-group { margin-top: 2rem; }
      .scroll-hint { display: none; }
    }

    /* ── MOBILE - Phones (below 768px) ── */
    @media(max-width:768px){
      nav { 
        padding: 1rem 1.5rem;
        flex-wrap: wrap;
      }
      .nav-logo { font-size: 1.2rem; }
      .nav-logo .logo-icon { width: 34px; height: 34px; font-size: 1rem; }
      
      /* Show mobile menu toggle */
      .mobile-menu-toggle { display: flex; }
      
      /* Hide desktop nav links on mobile */
      .nav-links { 
        display: none;
        width: 100%;
        flex-direction: column;
        gap: 1rem;
        padding: 1rem 0;
        margin-top: 1rem;
      }
      .nav-links.active { display: flex; }
      .nav-links a { font-size: .9rem; }
      
      .nav-cta { 
        padding: .6rem 1.2rem;
        font-size: .8rem;
      }

      /* Hero adjustments */
      #hero { padding: 6rem 1.5rem 3rem; }
      .hero-badge { font-size: .7rem; padding: .4rem 1rem; margin-bottom: 1.8rem; }
      .hero-headline { 
        font-size: clamp(1.8rem, 8vw, 3rem); 
        line-height: 1.15;
      }
      .quote-marks { font-size: 3.5rem; left: 0; }
      #rotating-quote { 
        font-size: 1rem; 
        padding: 0 1rem;
        min-height: 3.5rem;
      }
      .quote-author { font-size: .7rem; }
      .hero-sub { 
        margin-top: 2.5rem; 
        font-size: .95rem;
        max-width: 100%;
      }
      
      /* CTA buttons stack on mobile */
      .cta-group { 
        flex-direction: column;
        width: 100%;
        gap: .8rem;
        margin-top: 2rem;
      }
      .btn-primary, .btn-outline { 
        width: 100%;
        padding: 1rem 2rem;
        font-size: .95rem;
        text-align: center;
      }

      /* Hide stats on mobile */
      .stats-strip { display: none; }
      
      /* Scroll hint */
      .scroll-hint { 
        bottom: 1.5rem;
        font-size: .65rem;
      }
      .scroll-line { height: 36px; }

      /* Sections */
      #features, #quotes, #cta-section { padding: 4rem 1.5rem; }
      #how { padding: 4rem 1.5rem; }
      
      .section-label { font-size: .7rem; }
      .section-title { font-size: clamp(1.6rem, 6vw, 2.2rem); }
      .section-desc { font-size: .9rem; max-width: 100%; }

      /* Features grid - single column on small mobile */
      .features-grid { 
        grid-template-columns: 1fr;
        gap: 1.2rem;
        margin-top: 3rem;
      }
      .feat-card { padding: 1.8rem; }
      .feat-icon { width: 44px; height: 44px; font-size: 1.3rem; }
      .feat-title { font-size: 1.1rem; }
      .feat-desc { font-size: .85rem; }

      /* Steps */
      .steps {
        grid-template-columns: 1fr;
        gap: 2.5rem;
        margin-top: 3rem;
      }
      .steps::before { display: none; }
      .step { padding: 1rem; }
      .step-num { width: 52px; height: 52px; font-size: 1rem; }
      .step-title { font-size: 1rem; }
      .step-desc { font-size: .82rem; }

      /* Quotes */
      .quote-wall { 
        grid-template-columns: 1fr;
        gap: 1.2rem;
        margin-top: 3rem;
      }
      .q-card { padding: 1.8rem; }
      .q-text { font-size: 1rem; }

      /* CTA Section */
      .cta-box { 
        padding: 3rem 1.8rem;
        border-radius: 16px;
      }
      .cta-box .section-title { font-size: clamp(1.5rem, 5vw, 2rem); }
      .cta-box p { font-size: .9rem; }
      .cta-input-row { 
        flex-direction: column;
        gap: .8rem;
      }
      .cta-input-row input {
        width: 100%;
        min-width: auto;
        padding: .9rem 1.2rem;
        font-size: .95rem;
      }

      /* Footer */
      footer { padding: 2.5rem 1.5rem; font-size: .75rem; }

      /* Reduce orb sizes on mobile */
      .orb { display: none; }
      
      /* Reduce glow on mobile */
      .glow-1 { width: 400px; height: 400px; top: -100px; }
      .glow-2 { width: 300px; height: 300px; }
    }

    /* ── SMALL MOBILE - iPhone SE, small Androids (below 375px) ── */
    @media(max-width:375px){
      .hero-headline { font-size: 1.6rem; }
      .hero-badge { font-size: .65rem; }
      #rotating-quote { font-size: .95rem; }
      .btn-primary, .btn-outline { padding: .9rem 1.5rem; font-size: .9rem; }
      .feat-card { padding: 1.5rem; }
      .cta-box { padding: 2.5rem 1.5rem; }
    }

    /* ── LARGE DESKTOP (above 1440px) ── */
    @media(min-width:1441px){
      .hero-headline { font-size: 5.5rem; }
      .section-title { font-size: 3.2rem; }
      #features, #quotes { padding: 8rem 3rem; }
    }

    /* ── TOUCH DEVICE OPTIMIZATIONS ── */
    @media (hover: none) and (pointer: coarse) {
      /* Larger touch targets */
      .nav-links a { padding: .5rem; }
      .q-dot { width: 8px; height: 8px; }
      
      /* Remove hover effects on touch */
      .feat-card:hover { transform: none; }
      .q-card:hover { transform: none; }
      
      /* Active states for touch feedback */
      .feat-card:active { transform: scale(0.98); }
      .btn-primary:active, .btn-outline:active { transform: scale(0.97); }
    }

    /* ── DARK MODE SUPPORT ── */
    @media (prefers-color-scheme: dark) {
      /* Add dark mode styles if needed */
    }

    /* ── REDUCED MOTION ── */
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
      }
      .reveal { opacity: 1; transform: none; }
    }

    /* ── PRINT STYLES ── */
    @media print {
      nav, .scroll-hint, .orb, #bg-canvas { display: none; }
      body { background: white; color: black; }
      .reveal { opacity: 1; transform: none; }
    }
    @media(max-width:768px){
  /* Adjust logo specifically for mobile */
  .center-img {
    max-width: 200px; /* Perfect professional size for mobile screens */
    margin-bottom: 2rem;
  }
  
  /* Increase padding on the hero section for more breathing room */
  #hero { 
    padding: 8rem 1.5rem 4rem; 
  }

  /* Give the text more space to breathe */
  .hero-headline { 
    font-size: clamp(2rem, 8vw, 3rem); 
    line-height: 1.3; /* Increased line-height so text isn't cramped */
    margin-bottom: 1.5rem;
  }

  .hero-sub { 
    margin-top: 2rem; 
    margin-bottom: 3rem; /* Extra space before the buttons */
    font-size: 1rem;
    padding: 0 1rem; /* Adds safe spacing on the left/right edges */
    line-height: 1.6;
  }

  /* Improve button spacing and sizing for touch screens */
  .cta-group { 
    gap: 1.2rem; /* More space between the stacked buttons */
    margin-top: 1.5rem;
  }
  
  .btn-primary, .btn-outline { 
    padding: 1.2rem 2rem; /* Larger, professional touch targets */
    border-radius: 12px;
  }
}

.center-img {
  display: block;
  margin: 0 auto 2.5rem auto; /* Adds healthy spacing below the logo */
  width: 100%;
  max-width: 280px; /* Professional size on desktop */
  height: auto;
  object-fit: contain;
}