/* =========================
   ROOT + GLOBAL RESET
   ========================= */
* {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
}

:root {
     --color-navy: #010038;
     --color-navy-soft: #293a80;
     --color-blue-soft: #537ec5;
     --color-accent: #f39422;
     --color-bg: #f4f6fb;
     --color-text-main: #0b1120;
     --color-text-soft: #4b5563;
     --glass-bg: rgba(255, 255, 255, 0.08);
     --glass-border: rgba(255, 255, 255, 0.24);
     --shadow-soft: 0 18px 45px rgba(15, 23, 42, 0.25);
     --radius-lg: 24px;
     --radius-md: 14px;
     --transition-fast: 0.18s ease-out;
     --transition-med: 0.25s ease;
}

body {
     font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
          sans-serif;
     background:
          radial-gradient(circle at top left, #537ec5 0, #010038 48%, #000015 100%);
     color: var(--color-text-main);
     min-height: 100vh;
     display: flex;
     flex-direction: column;
     -webkit-font-smoothing: antialiased;
}

a {
     text-decoration: none;
}

.container {
     width: 100%;
     max-width: 1200px;
     margin: 0 auto;
     padding-inline: 1.25rem;
}

/* =========================
   HEADER / NAVBAR
   ========================= */

.site-header {
     background: linear-gradient(90deg,
               rgba(1, 0, 56, 0.96),
               rgba(41, 58, 128, 0.96));
     color: #ffffff;
     position: sticky;
     top: 0;
     z-index: 1000;
     backdrop-filter: blur(14px);
     box-shadow: 0 8px 30px rgba(15, 23, 42, 0.45);
}

.header-content {
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding-block: 0.95rem;
     gap: 1.5rem;
}

.logo-box {
     border: none;
     padding: 0;
     display: inline-flex;
     align-items: center;
     border-radius: 40%;
}

.site-logo {
     height: 140px;
     width: auto;
     display: block;
     filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.4));
     border-radius: 40%;
     
}

@media (max-width: 600px) {

     /* Increase mobile logo size responsively */
     .site-logo {
          display: inline-flex;
          height: clamp(80px, 13vw, 130px);
          /* min, preferred, max */
          width: auto;
          /* keep aspect ratio */
          max-height: 130px;
          border-radius: 40%;
     }

     /* Keep a smaller size when header is scrolled (but still larger than before) */
     .site-header.scrolled .site-logo {
          height: clamp(60px, 9vw, 90px);
          /* smaller when scrolled */
     }
}



/* NAVBAR */

.main-nav {
     display: flex;
     align-items: center;
     gap: 1.75rem;
}

.nav-link {
     color: #e5e7eb;
     font-size: 0.95rem;
     letter-spacing: 0.02em;
     padding: 0.5rem 0.9rem;
     border-radius: 999px;
     border: 1px solid transparent;
     position: relative;
     overflow: hidden;
     transition:
          background-color var(--transition-fast),
          border-color var(--transition-fast),
          color var(--transition-fast),
          transform var(--transition-fast);
}

.nav-link::after {
     content: "";
     position: absolute;
     inset: 0;
     background: radial-gradient(circle at top left, rgba(255, 255, 255, 0.28), transparent 55%);
     opacity: 0;
     transition: opacity var(--transition-fast);
}

.nav-link:hover {
     color: #ffffff;
     border-color: var(--color-accent);
     background: linear-gradient(120deg,
               rgba(243, 148, 34, 0.95),
               rgba(83, 126, 197, 0.95));
     transform: translateY(-1px);
}

.nav-link:hover::after {
     opacity: 1;
}

/* =========================
   MAIN LAYOUT
   ========================= */

.main-content {
     flex: 1;
     padding-block: 2.4rem 3rem;
}

/* =========================
   HERO SECTION (HOME)
   ========================= */

.hero {
     background: transparent;
     margin-bottom: 2rem;
     text-align: center;
}

.home-hero {
     position: relative;
     overflow: hidden;
     border-radius: var(--radius-lg);
     padding: 3.2rem clamp(1.8rem, 4vw, 3.4rem);
     color: #ffffff;
     /* text-align: left; */
     box-shadow: var(--shadow-soft);
     background:
          linear-gradient(135deg,
               rgba(1, 0, 56, 0.97) 0%,
               rgba(41, 58, 128, 0.95) 40%,
               rgba(83, 126, 197, 0.92) 100%);
               text-align: center;
}

/* background illustration */
.home-hero::before {
     content: "";
     position: absolute;
     inset: 0;
     background: url("sample.jpg") right center / cover no-repeat;
     opacity: 0.25;
     mix-blend-mode: screen;
     pointer-events: none;
     z-index: -1;
}

.home-hero::after {
     content: "";
     position: absolute;
     inset: 0;
     background: radial-gradient(circle at top left,
               rgba(243, 148, 34, 0.38),
               transparent 60%);
     opacity: 0.9;
     pointer-events: none;
          /* <--- ADD THIS */
          z-index: -1;
}

/* Make inner content sit above bg layers */
.home-hero{
     position: relative;
     z-index: 1;
     text-align: center;

}

.home-hero h1 {
     font-size: clamp(2.6rem, 4vw, 3.1rem);
     font-weight: 1200;
     letter-spacing: 0.03em;
     margin-bottom: 0.85rem;
     text-align: center;
}

.home-hero h2 {
     font-size: clamp(1.55rem, 2.3vw, 1.9rem);
     font-weight: 600;
     margin: 0.18rem 0;
     text-align: center;
}

.hero-sub {
     margin-top: 1.3rem;
     font-size: 1.02rem;
     line-height: 1.75;
     color: #e5e7eb;
     max-width: 680px;
     
     text-align: center;
          /* <<< CENTER TEXT */
          margin-left: auto;
          /* <<< CENTER BLOCK */
          margin-right: auto;
}

.home-hero .primary-btn {
     margin-top: 2rem;
     text-align: center;
     
}
.home-hero h1 {
     font-family: "Playfair Display", serif;
     font-size: 5.8rem;
     /* increase or decrease if you want */
     font-weight: 800;
     letter-spacing: 0.03em;
}
.home-hero h2,
.hero-sub {
     font-family: "Lora", serif;
     font-weight: 600;
}

/* =========================
   BUTTONS
   ========================= */

.primary-btn {
     border-radius: 999px;
     padding: 0.8rem 1.9rem;
     font-size: 0.98rem;
     font-weight: 600;
     cursor: pointer;
     border: none;
     background-image: linear-gradient(120deg,
               var(--color-accent),
               var(--color-blue-soft));
     color: #ffffff;
     box-shadow: 0 14px 35px rgba(15, 23, 42, 0.55);
     transition:
          transform var(--transition-med),
          box-shadow var(--transition-med),
          filter var(--transition-med);
     display: inline-flex;
     align-items: center;
     justify-content: center;
     gap: 0.35rem;
}

.primary-btn:hover {
     transform: translateY(-2px) scale(1.01);
     box-shadow: 0 18px 40px rgba(15, 23, 42, 0.7);
     filter: brightness(1.04);
}

.primary-btn:active {
     transform: translateY(0);
     box-shadow: 0 10px 25px rgba(15, 23, 42, 0.6);
}

/* =========================
   GENERIC PAGE SECTIONS
   ========================= */

.page-section {
     background: rgba(255, 255, 255, 0.96);
     padding: 2.4rem 2.7rem;
     border-radius: var(--radius-lg);
     box-shadow: 0 16px 40px rgba(15, 23, 42, 0.12);
     margin-bottom: 1.9rem;
     position: relative;
     overflow: hidden;
     background: rgba(215, 209, 209, 0.1);
          border: 1px solid rgba(255, 255, 255, 0.20);
          backdrop-filter: blur(14px);
}

.page-section::before {
     content: "";
     position: absolute;
     inset: 0;
     background: radial-gradient(circle at top right,
               rgba(83, 126, 197, 0.1),
               transparent 55%);
     pointer-events: none;
     
}

.page-section>* {
     position: relative;
     z-index: 1;
}

.page-section h1,
.page-section h2 {
     margin-bottom: 0.75rem;
     font-weight: 700;
     color: var(--color-navy);
     color: #ffffff !important;
}

.page-section p {
     line-height: 1.7;
     color: var(--color-text-soft);
     font-size: 0.98rem;
}
.page-section h2,
.page-section h3,
.page-section p,
.page-section ul li {
     color: #ffffff !important;
}
@media (max-width: 600px) {
     .form-section>* {
          padding: 0.6rem 0.8rem !important;
     }
}

.join {
     margin-top: 1.8rem;
     font-size: 2rem;
     font-weight: 600;
     text-align: center;
     color: #f9fafb;
}

/* =========================
   FORM / CONTACT BLOCK
   ========================= */

.form-section {
     margin-top: 2.4rem;
     background: linear-gradient(135deg,
               rgba(255, 255, 255, 0.96),
               rgba(248, 250, 252, 0.96));
     border-radius: var(--radius-lg);
     box-shadow: var(--shadow-soft);
     position: relative;
     overflow: hidden;
     background: rgba(83, 126, 197, 0.1);
          border: 1px solid rgba(255, 255, 255, 0.20);
          backdrop-filter: blur(14px);
}

.form-section::before {
     content: "";
     position: absolute;
     inset: -40%;
     background: radial-gradient(circle at top left,
               rgba(83, 126, 197, 0.1),
               transparent 60%);
     pointer-events: none;
}

.form-section>* {
     position: relative;
     z-index: 1;
     padding: 1rem 3rem;
}

.form-section h3 {
     font-size: 1.4rem;
     font-weight: 700;
     color: var(--color-navy);
}

.lead-form {
     margin-top: 1.1rem;
}

.form-row {
     display: flex;
     flex-direction: column;
     margin-bottom: 1rem;
}

.form-row label,
.form-section h3
 {
     margin-bottom: 0.35rem;
     font-size: 0.88rem;
     font-weight: 500;
     color: var(--color-text-soft);
     color: #ffffff !important;
}

.form-row input,
.form-row select,
.form-row textarea {
     padding: 0.75rem 0.85rem;
     border-radius: var(--radius-md);
     border: 1px solid rgba(148, 163, 184, 0.7);
     font-size: 0.96rem;
     outline: none;
     background: rgba(255, 255, 255, 0.82);
     box-shadow: 0 8px 22px rgba(15, 23, 42, 0.04);
     transition:
          border-color var(--transition-med),
          box-shadow var(--transition-med),
          transform var(--transition-med),
          background-color var(--transition-med);
          background: rgba(255, 255, 255, 0.18);
               color: #ffffff;
               border: 1px solid rgba(255, 255, 255, 0.3);
}
/* ==== FIX: Make business type dropdown readable ==== */

/* The closed select box */


/* The opened dropdown list items */
.form-row select option {
     background-color: #020617;
     /* dark background for options */
     color: #f9fafb;
     /* light text */
}

/* On mobile, make sure it's still easy to read */
@media (max-width: 600px) {
     .form-row select {
          font-size: 0.95rem;
     }
}

.form-row textarea {
     resize: vertical;
     min-height: 120px;
}
.input-error {
     border-color: #ff6b6b !important;
     background-color: rgba(255, 0, 0, 0.07) !important;
}

.error-msg {
     color: #ff8f8f;
     font-size: 0.8rem;
     margin-top: 4px;
}
.form-row label.required::after {
     content: " *";
     color: #ff6b6b;
     font-weight: bold;
}

/* Micro-interaction focus */
.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus {
     border-color: var(--color-blue-soft);
     box-shadow:
          0 0 0 1px rgba(83, 126, 197, 0.55),
          0 15px 35px rgba(15, 23, 42, 0.16);
     transform: translateY(-1px);
     /* background-color: #ffffff; */
}

/* Simple validation indicator */
.form-row input:required:invalid,
.form-row textarea:required:invalid,
.form-row select:required:invalid {
     border-color: rgba(248, 113, 113, 0.8);
}

.form-message {
     margin-top: 0.6rem;
     font-size: 0.88rem;
     color: var(--color-text-soft);
}
.form-row input::placeholder,
.form-row textarea::placeholder {
    color: rgba(255, 255, 255, 0.7);
}




/* detail sections under cards */
.detail-section {
     background: rgba(255, 255, 255, 0.97);
     padding: 2.2rem 2.4rem;
     margin-top: 2.1rem;
     border-radius: var(--radius-lg);
     box-shadow: 0 18px 40px rgba(15, 23, 42, 0.16);
}

.detail-section h2 {
     font-size: 1.7rem;
     margin-bottom: 0.8rem;
     color: var(--color-navy);
}

.detail-section h3 {
     margin: 1.1rem 0 0.5rem;
     font-size: 1.05rem;
     font-weight: 600;
}

.detail-section ul {
     margin-left: 1.2rem;
     line-height: 1.75;
     color: var(--color-text-soft);
     font-size: 0.95rem;
}

.text {
     text-align: center;
}

/* UTILS */
.hidden {
     display: none;
}

html {
     scroll-behavior: smooth;
}

/* =========================
   FOOTER – CLEAN + MINIMAL
   ========================= */

.site-footer {
     background: transparent;
     color: #e5e7eb;
     padding: 1.6rem 0 2rem;
     text-align: center;
     border-top: 1px solid rgba(148, 163, 184, 0.45);
     margin-top: auto;
}

.footer-content {
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 0.55rem;
}

.footer-links {
     display: flex;
     gap: 0.9rem;
     flex-wrap: wrap;
     justify-content: center;
     font-size: 0.9rem;
}

.footer-links a {
     color: #e5e7eb;
     position: relative;
     padding-bottom: 2px;
}

.footer-links a::after {
     content: "";
     position: absolute;
     left: 0;
     bottom: 0;
     width: 0;
     height: 1px;
     background: linear-gradient(90deg,
               var(--color-accent),
               var(--color-blue-soft));
     transition: width var(--transition-fast);
}

.footer-links a:hover::after {
     width: 100%;
}

.footer-copy {
     margin-top: 2px;
     font-size: 0.94rem;
     color: #cbd5f5;
}
/* SOCIAL ICONS */
.footer-social {
     display: flex;
     gap: 1rem;
     margin-bottom: 1rem;
     justify-content: flex-start;
}

.footer-social a {
     color: #ffffff;
     padding: 6px;
     display: flex;
     align-items: center;
     justify-content: center;
     transition: 0.25s ease;
}

.footer-social a:hover {
     color: var(--color-accent);
     transform: translateY(-3px) scale(1.12);
}

/* Icon size */
.footer-social i {
     font-size: 22px;
}

@media (max-width: 600px) {
     .footer-social i {
          font-size: 26px;
          /* a bit bigger on mobile */
     }
}

/* =========================
   RESPONSIVE
   ========================= */

@media (max-width: 900px) {
     .header-content {
          flex-direction: column;
          align-items: flex-start;
          padding-block: 0.8rem;
     }

     .main-nav {
          flex-wrap: wrap;
          gap: 0.8rem;
     }

     .home-hero {
          padding: 2.3rem 1.7rem;
     }

     .cards-section {
          grid-template-columns: repeat(2, minmax(0, 1fr));
     }

     .page-section,
     .detail-section {
          padding: 1.7rem 1.6rem;
     }
}

@media (max-width: 600px) {
     .container {
          padding-inline: 1rem;
     }

     .home-hero {
          text-align: left;
          padding: 2rem 1.4rem 2.2rem;
     }

     .home-hero h1 {
          font-size: 2.1rem;
     }

     .home-hero h2 {
          font-size: 1.25rem;
     }

     .cards-section {
          grid-template-columns: 1fr;
     }

     .primary-btn {
          width: 100%;
     }

     .page-section,
     .detail-section,
     .form-section {
          padding: 1.6rem 1.4rem;
     }
}

/* HERO LAYOUT TIGHTER & CENTERED */
.home-hero {
     text-align: center;
     display: flex;
     flex-direction: column;
     align-items: center;
     padding: 4rem 3rem 4.5rem;
}

/* MAIN TITLE "Free!" – gradient + glow */
.home-hero h1 {
     font-size: 3.4rem;
     font-weight: 800;
     letter-spacing: 0.08em;
     text-transform: uppercase;
     margin-bottom: 1rem;

     background: linear-gradient(120deg, #ffffff, #F39422, #ffffff);
     -webkit-background-clip: text;
     color: transparent;
     text-shadow: 0 10px 25px rgba(0, 0, 0, 0.45);

     animation: heroFadeUp 0.7s ease-out forwards;
}

/* THREE LINES: Get Genuine Project Leads / No Ad Spend / No Marketing */
.home-hero h2 {
     font-size: 2.1rem;
     font-weight: 700;
     margin: 0.25rem 0;
     color: #ffffff;
     text-shadow: 0 6px 16px rgba(0, 0, 0, 0.45);
     animation: heroFadeUp 0.8s ease-out forwards;
}

.home-hero h2:nth-of-type(2) {
     animation-delay: 0.1s;
}

.home-hero h2:nth-of-type(3) {
     animation-delay: 0.2s;
}

/* HERO PARAGRAPHS */
.hero-sub {
     margin-top: 1.2rem;
     font-size: 1.05rem;
     line-height: 1.9;
     max-width: 820px;
     text-align: center;
     margin-left: auto;
     margin-right: auto;
     color: #e5ecff;
     text-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
     animation: heroFadeUp 0.95s ease-out forwards;
}

/* CTA BUTTON – modern pill with gradient */
.home-hero .primary-btn {
     margin-top: 2rem;
     padding: 0.9rem 2.7rem;
     border-radius: 999px;
     border: none;
     font-size: 1rem;
     font-weight: 600;
     background: linear-gradient(135deg, #F39422, #ffcd78);
     color: #1f2937;
     box-shadow: 0 16px 35px rgba(0, 0, 0, 0.45);
     transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.home-hero .primary-btn:hover {
     transform: translateY(-3px) scale(1.03);
     box-shadow: 0 22px 40px rgba(0, 0, 0, 0.6);
     background: linear-gradient(135deg, #ffb24a, #ffe1a3);
}

/* SIMPLE FADE-UP ANIMATION */
@keyframes heroFadeUp {
     from {
          opacity: 0;
          transform: translateY(18px);
     }

     to {
          opacity: 1;
          transform: translateY(0);
     }
}
/* =========================
   CARDS (BUILD / RENOVATE / RELOCATE)
   ========================= */

.cards-section {
     display: flex;
     gap: 1.5rem;
     margin: 2.4rem 0 2.7rem;
     padding: 0.75rem 0.3rem 1rem;
     overflow-x: auto;
     /* horizontal scroll */
     scroll-snap-type: x mandatory;
     /* snap to each card */
}

/* visible custom scrollbar (required) */
.cards-section::-webkit-scrollbar {
     height: 8px;
}

.cards-section::-webkit-scrollbar-track {
     background: rgba(15, 23, 42, 0.9);
     border-radius: 999px;
}

.cards-section::-webkit-scrollbar-thumb {
     background: linear-gradient(to right, #f39422, #537ec5);
     border-radius: 999px;
}

.cards-section::-webkit-scrollbar-thumb:hover {
     background: linear-gradient(to right, #ffb24a, #7fa4ff);
}

/* Firefox scrollbar */
.cards-section {
     scrollbar-width: thin;
     scrollbar-color: #f39422 rgba(15, 23, 42, 0.9);
}

.info-card {
     position: relative;
     flex: 0 0 420px;
     /* card width */
     min-width: 420px;
     scroll-snap-align: start;
     padding: 1.6rem 1.4rem;
     border-radius: var(--radius-md);
     background: radial-gradient(circle at top left,
               rgba(255, 255, 255, 0.95),
               rgba(241, 245, 249, 0.98));
     border: 1px solid rgba(148, 163, 184, 0.5);
     box-shadow: 0 16px 35px rgba(15, 23, 42, 0.16);
     transition:
          transform var(--transition-med),
          box-shadow var(--transition-med),
          border-color var(--transition-med),
          background var(--transition-med);
     overflow: hidden;
     background: rgba(255, 255, 255, 0.12);
          /* transparent glass look */
          border: 1px solid rgba(255, 255, 255, 0.18);
          backdrop-filter: blur(18px);
          color: #ffffff;
}
.info-card h3,
.info-card p,
.info-card h4,
.info-card ul li {
     color: #ffffff !important;
}

@media (min-width: 1024px) {
     .info-card {
          flex: 0 0 420px;
     }
}

.info-card::before {
     content: "";
     position: absolute;
     inset: -20%;
     background: radial-gradient(circle at top left,
               rgba(243, 148, 34, 0.15),
               transparent 55%);
     opacity: 0;
     transition: opacity var(--transition-med);
}

.info-card h3 {
     margin-bottom: 0.6rem;
     color: var(--color-navy);
     font-size: 1.15rem;
     letter-spacing: 0.08em;
}

.info-card h4 {
     margin: 0.9rem 0 0.4rem;
     font-size: 0.9rem;
     font-weight: 600;
     color: var(--color-text-main);
}

.info-card p {
     color: var(--color-text-soft);
     line-height: 1.6;
     font-size: 0.9rem;
}

.info-card ul {
     margin-left: 1.1rem;
     margin-top: 0.3rem;
     font-size: 0.88rem;
     line-height: 1.7;
     color: var(--color-text-soft);
}

.info-card:hover {
     transform: translateY(-6px) scale(1.01);
     box-shadow: 0 20px 45px rgba(15, 23, 42, 0.26);
     border-color: rgba(243, 148, 34, 0.9);
     /* background: linear-gradient(135deg,
               rgba(255, 255, 255, 0.99),
               rgba(249, 250, 251, 1)); */
}

.info-card:hover::before {
     opacity: 1;
}
/* MOBILE SCROLL ARROW HINT */
/* Arrow hint on right-center of each card */
.card-swipe-edge {
     position: absolute;
     right: -4px;
     /* slightly outside card */
     top: 50%;
     transform: translateY(-50%);
     font-size: 1.6rem;
     font-weight: 700;
     color: #ffffff;
     opacity: 0.65;
     pointer-events: none;
     /* so arrow doesn't block scrolling */
     animation: arrowPulse 1.6s infinite ease-in-out;
     display: none;
     /* hidden on desktop */
}

/* Mobile only */
@media (max-width: 600px) {
     .card-swipe-edge {
          display: block;
     }
}

/* Soft glowing movement */
@keyframes arrowPulse {
     0% {
          transform: translateY(-50%) translateX(0);
          opacity: 0.6;
     }

     50% {
          transform: translateY(-50%) translateX(6px);
          opacity: 1;
     }

     100% {
          transform: translateY(-50%) translateX(0);
          opacity: 0.6;
     }
}
/* DESKTOP: hide scrollbar but keep horizontal layout clean */
@media (min-width: 768px) {
     .cards-section {
          overflow-x: hidden;
          /* no scrolling on desktop */
     }

     /* Optional: adjust card width for neat 3-column layout */
     .info-card {
          flex: 1;
          min-width: 0;
     }
}
/* MOBILE: make cards swipeable, one per view */
@media (max-width: 600px) {
     .cards-section {
          display: flex;
          /* keep flex row */
          gap: 1rem;
          padding: 0.5rem 0;
          /* smaller padding */
          overflow-x: auto;
          /* ensure horizontal scroll */
          scroll-snap-type: x mandatory;
     }

     .info-card {
          flex: 0 0 88vw;
          /* each card ~full screen width */
          min-width: 88vw;
          /* important for overflow */
          scroll-snap-align: start;
     }
}
/* ===== HERO CUSTOM FONTS ===== */

/* "FREE!" – bold, chunky but still premium */
.hero-title-free {
     font-family: "Baloo 2", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
     
     font-weight: 800;
     letter-spacing: 0.22em;
     text-transform: uppercase;
}
.home-hero h1 {
     font-size: clamp(3.2rem, 7vw, 5rem);
}

/* Main hero lines (Get Genuine Project Leads, No …) */
.hero-line-main,
.hero-line {
     font-family: "Baloo 2", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Script-style part: "Ad Spend." & "Marketing." */
.hero-line-script {
     font-family: "Pacifico", cursive;
     font-weight: 400;
     letter-spacing: 0.04em;
     display: inline-block;
     color: #ffedd5;
     /* soft warm highlight */
     text-shadow: 0 6px 18px rgba(0, 0, 0, 0.55);
}

/* Small tweak on mobile so script text doesn’t look too big */
@media (max-width: 600px) {
     .hero-title-free {
          letter-spacing: 0.14em;
     }

     .hero-line-script {
          font-size: 1.05em;
     }
}
/* FORCE "FREE!" TO BECOME HUGE AND FULL-WIDTH */
.home-hero h1 {
     font-size: clamp(4.5rem, 14vw, 6rem) !important;
     /* SUPER BIG */
     font-weight: 900 !important;
     width: 100%;
     text-align: center;
     letter-spacing: 0.11em;
     display: block;
     line-height: 1.1;
}

/* MOBILE VERSION */
@media (max-width: 600px) {
     .home-hero h1 {
          font-size: 5.5 rem !important;
          letter-spacing: 0.04em;
     }
}
/* PREMIUM STYLING FOR HERO SUB-HEADINGS */
.home-hero h2 {
     font-family: "Poppins", sans-serif !important;
     /* premium modern font */
     font-size: 2 rem !important;
     /* bigger text */
     font-weight: 400 !important;
     letter-spacing: 0.02em;
     margin: 0.35rem 0;
     color: #ffffff !important;
     text-shadow: 0 6px 20px rgba(0, 0, 0, 0.55);
     line-height: 1.2;
}

/* MOBILE SIZE */
@media (max-width: 600px) {
     .home-hero h2 {
          
          font-size: 2.4rem !important;
          letter-spacing: 0.01em;
     }
}
@media (max-width: 600px) {

     /* Target ONLY the 2 lines you want */
     .home-hero h2:nth-of-type(2),
     .home-hero h2:nth-of-type(3) {
          white-space: nowrap;
          /* prevents breaking into multiple lines */
          font-size: 1.8rem !important;
          /* adjust size so it fits */
          line-height: 1.2;
     }
}

/* =========================
   MOBILE HEADER COLLAPSE ON SCROLL
   ========================= */
@media (max-width: 600px) {

     /* Default mobile header: logo centered, nav below */
     .header-content {
          flex-direction: column;
          align-items: center;
          justify-content: center;
          gap: 0.35rem;
          padding-block: 0.8rem;
          text-align: center;
     }

     .logo-box {
          display: flex;
          justify-content: center;
          width: 100%;
          transition: transform 0.25s ease, margin 0.25s ease;
     }

     .site-logo {
          height: 60px;
          transition: height 0.25s ease;
     }

     .main-nav {
          display: flex;
          gap: 1rem;
          transition: transform 0.25s ease;
     }

     /* AFTER SCROLL: header shrinks, logo goes left, nav moves up */
     .site-header.scrolled .header-content {
          flex-direction: row;
          align-items: center;
          justify-content: space-between;
          padding-block: 0.4rem;
          /* smaller height */
     }

     .site-header.scrolled .logo-box {
          justify-content: flex-start;
          width: auto;
          transform: translateX(-4px);
     }

     .site-header.scrolled .site-logo {
          height: 40px;
          /* smaller logo */
     }

     .site-header.scrolled .main-nav {
          justify-content: center;
     }

     .site-header.scrolled .nav-link {
          padding: 0.35rem 0.6rem;
          font-size: 0.8rem;
     }
}

@media (max-width: 600px) {
     .header-content {
          flex-direction: column;
          align-items: center;
          justify-content: center;
          gap: 0.35rem;
          padding-block: 0.8rem;
          text-align: center;
     }

     .logo-box {
          display: flex;
          justify-content: center;
          width: 100%;
          transition: transform 0.25s ease, margin 0.25s ease;
     }

     .site-logo {
          height: 60px;
          transition: height 0.25s ease;
     }

     .main-nav {
          display: flex;
          gap: 1rem;
          transition: transform 0.25s ease;
     }

     .site-header.scrolled .header-content {
          flex-direction: row;
          align-items: center;
          justify-content: space-between;
          padding-block: 0.4rem;
     }

     .site-header.scrolled .logo-box {
          justify-content: flex-start;
          width: auto;
          transform: translateX(-4px);
     }

     .site-header.scrolled .site-logo {
          height: 40px;
     }

     .site-header.scrolled .main-nav {
          justify-content: center;
     }

     .site-header.scrolled .nav-link {
          padding: 0.35rem 0.6rem;
          font-size: 0.8rem;
     }
}