/* Template 0 | startup personality | gradient-fill btns | gradient-text headers | diagonal-gradient cta | speech-bubble testimonials | bold-dark hero | accent nav | numbered features | single-featured layout | waves decor | gradient-fade pattern */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800;900&family=Rubik:wght@300;400;500;600&display=swap');

:root {
  --primary: oklch(0.5 0.14 200);
  --primary-fg: oklch(0.98 0.005 200);
  --accent: oklch(0.6 0.16 340);
  --bg: oklch(0.985 0.005 200);
  --fg: oklch(0.18 0.02 200);
  --muted: oklch(0.95 0.008 90);
  --muted-fg: oklch(0.5 0.02 50);
  --border: oklch(0.91 0.01 90);
  --card-bg: white;
  --radius: 1rem;
  --shadow: 0 4px 20px color-mix(in oklch, oklch(0.5 0.14 200) 18%, transparent);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Rubik',system-ui,sans-serif;background:var(--bg);color:var(--fg);line-height:1.8;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,h5,h6{font-family:'Archivo',system-ui,sans-serif;line-height:1.15;font-weight:900}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
.container{width:100%;max-width:1200px;margin:0 auto;padding:0 1.5rem}

/* ═══ SECTION BG PATTERNS ═══ */
.section-pattern{background:linear-gradient(180deg,transparent 0%,color-mix(in oklch,var(--primary) 3%,transparent) 50%,transparent 100%)}

/* ═══ SCROLL ANIMATIONS ═══ */
.animate-on-scroll{opacity:0;transform:translateY(30px);transition:opacity 0.7s ease-out,transform 0.7s ease-out}
.animate-on-scroll.is-visible{opacity:1;transform:translateY(0)}
.animate-on-scroll.slide-left{transform:translateX(-40px)}
.animate-on-scroll.slide-left.is-visible{transform:translateX(0)}
.animate-on-scroll.slide-right{transform:translateX(40px)}
.animate-on-scroll.slide-right.is-visible{transform:translateX(0)}
.animate-on-scroll.scale-up{transform:scale(0.95)}
.animate-on-scroll.scale-up.is-visible{transform:scale(1)}
.delay-1{transition-delay:0.1s}.delay-2{transition-delay:0.2s}.delay-3{transition-delay:0.3s}
.delay-4{transition-delay:0.4s}.delay-5{transition-delay:0.5s}.delay-6{transition-delay:0.6s}

@keyframes gradientShift{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.5}}
@keyframes slideUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes ticker{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
@keyframes typing{from{width:0}to{width:100%}}
@keyframes blink{0%,100%{border-color:var(--primary)}50%{border-color:transparent}}
@keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
@keyframes fadeInStagger{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}

/* ═══ ANNOUNCEMENT BAR ═══ */
.announcement-bar{background:var(--primary);color:var(--primary-fg);text-align:center;padding:0.5rem 1rem;font-size:0.82rem;font-weight:500;letter-spacing:0.02em;position:relative;z-index:100;overflow:hidden}
.announcement-bar a{color:var(--primary-fg);text-decoration:underline;text-underline-offset:2px;font-weight:600;margin-left:0.5rem}
.announcement-bar .announcement-close{position:absolute;right:1rem;top:50%;transform:translateY(-50%);background:none;border:none;color:var(--primary-fg);cursor:pointer;opacity:0.7;font-size:1.1rem;line-height:1}
.announcement-bar .announcement-close:hover{opacity:1}
.announcement-bar::before{content:'';position:absolute;top:0;left:-100%;width:200%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.08),transparent);animation:shimmer 3s ease-in-out infinite}

/* ═══ SCROLLING LOGO TICKER ═══ */
.trusted-ticker{overflow:hidden;position:relative}
.trusted-ticker::before,.trusted-ticker::after{content:'';position:absolute;top:0;width:80px;height:100%;z-index:2;pointer-events:none}
.trusted-ticker::before{left:0;background:linear-gradient(90deg,var(--bg),transparent)}
.trusted-ticker::after{right:0;background:linear-gradient(-90deg,var(--bg),transparent)}
.ticker-track{display:flex;width:max-content;animation:ticker 25s linear infinite;gap:3rem;align-items:center}
.ticker-track:hover{animation-play-state:paused}
.ticker-track span{font-family:'Archivo',system-ui,sans-serif;font-size:1.1rem;font-weight:700;color:color-mix(in oklch,var(--fg) 22%,transparent);white-space:nowrap;transition:color 0.3s}
.ticker-track span:hover{color:color-mix(in oklch,var(--fg) 50%,transparent)}

/* ═══ STAGGERED FADE-IN ═══ */
.stagger-children > *{opacity:0;animation:fadeInStagger 0.5s ease-out forwards}
.stagger-children > *:nth-child(1){animation-delay:0.05s}
.stagger-children > *:nth-child(2){animation-delay:0.1s}
.stagger-children > *:nth-child(3){animation-delay:0.15s}
.stagger-children > *:nth-child(4){animation-delay:0.2s}
.stagger-children > *:nth-child(5){animation-delay:0.25s}
.stagger-children > *:nth-child(6){animation-delay:0.3s}

/* ═══ HERO TYPING EFFECT ═══ */
.hero-typed{display:inline-block;overflow:hidden;white-space:nowrap;border-right:3px solid var(--primary);animation:typing 2.5s steps(30) 0.5s forwards,blink 0.8s step-end infinite;width:0;max-width:100%}

/* ═══ STATUS INDICATOR ═══ */
.status-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#22c55e;margin-right:0.4rem;animation:pulse 2s ease-in-out infinite}

/* ═══ BLOG SECTION ═══ */
.blog-section{padding:4rem 0}
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.75rem}
.blog-card{background:var(--card-bg);border-radius:1rem;border:1px solid transparent;box-shadow:0 4px 20px color-mix(in oklch, oklch(0.5 0.14 200) 18%, transparent);overflow:hidden;transition:all 0.35s}
.blog-card:hover{transform:translateY(-4px);box-shadow:0 12px 40px rgba(0,0,0,0.1)}
.blog-card-img{width:100%;aspect-ratio:16/9;overflow:hidden;background:var(--muted)}
.blog-card-img img{width:100%;height:100%;object-fit:cover;transition:transform 0.5s}
.blog-card:hover .blog-card-img img{transform:scale(1.05)}
.blog-card-body{padding:1.5rem}
.blog-card-meta{display:flex;align-items:center;gap:0.75rem;margin-bottom:0.75rem;font-size:0.78rem;color:var(--muted-fg)}
.blog-card-category{display:inline-block;padding:0.2rem 0.6rem;border-radius:9999px;background:color-mix(in oklch,var(--primary) 10%,transparent);color:var(--primary);font-weight:600;font-size:0.72rem;text-transform:uppercase;letter-spacing:0.04em}
.blog-card-body h3{font-family:'Archivo',system-ui,sans-serif;font-size:1.05rem;font-weight:600;margin-bottom:0.5rem;color:var(--fg);line-height:1.35}
.blog-card-body p{font-size:0.88rem;color:var(--muted-fg);line-height:1.6;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.blog-card-footer{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.5rem;border-top:1px solid var(--border);font-size:0.78rem;color:var(--muted-fg)}
.blog-card-author{display:flex;align-items:center;gap:0.5rem}
.blog-card-author-avatar{width:24px;height:24px;border-radius:50%;background:var(--primary);color:var(--primary-fg);display:flex;align-items:center;justify-content:center;font-size:0.6rem;font-weight:700}
.blog-view-all{text-align:center;margin-top:2.5rem}

/* ═══ BLOG PAGE ═══ */
.blog-page-hero{padding:3rem 0 2rem;text-align:center}
.blog-page-hero h1{font-size:2.5rem;margin-bottom:0.75rem}
.blog-page-hero p{font-size:1.1rem;color:var(--muted-fg);max-width:600px;margin:0 auto}
.blog-categories{display:flex;justify-content:center;gap:0.75rem;margin:2rem 0 3rem;flex-wrap:wrap}
.blog-categories button{padding:0.4rem 1.2rem;border-radius:9999px;border:1px solid var(--border);background:transparent;font-size:0.82rem;font-weight:500;color:var(--muted-fg);cursor:pointer;transition:all 0.2s}
.blog-categories button:hover,.blog-categories button.active{background:var(--primary);color:var(--primary-fg);border-color:var(--primary)}
.blog-page-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;margin-bottom:4rem}

/* ═══ NAV ═══ */
.nav{position:sticky;top:0;z-index:50;background:oklch(0.5 0.14 200);border-bottom:none;transition:box-shadow 0.3s}
.nav .container{display:flex;align-items:center;justify-content:space-between;height:4.5rem}
.nav-brand{display:flex;align-items:center;gap:0.625rem}
.nav-logo{width:2.25rem;height:2.25rem;border-radius:1rem;background:rgba(255,255,255,0.2);display:flex;align-items:center;justify-content:center;color:white;font-weight:700;font-size:0.8rem}
.nav-name{font-family:'Archivo',system-ui,sans-serif;font-size:1.2rem;font-weight:700;color:var(--primary-fg)}
.nav-links{display:flex;align-items:center;gap:2rem;list-style:none}
.nav-links a{font-size:0.9rem;font-weight:500;color:oklch(0.98 0.005 200);transition:color 0.2s}
.nav-links a:hover,.nav-links a.active{color:white}
.nav-cta{display:flex;align-items:center;gap:0.75rem}
#nav-toggle{display:none;background:none;border:none;cursor:pointer;padding:0.5rem;color:var(--primary-fg)}
.nav-scrolled{box-shadow:0 2px 20px rgba(0,0,0,0.08)!important}
#mobile-nav{display:none}

/* ═══ BUTTONS — gradient-fill personality ═══ */
.btn{display:inline-flex;align-items:center;gap:0.5rem;padding:0.8rem 2rem;border-radius:1rem;font-size:0.9375rem;font-weight:600;border:none;cursor:pointer;transition:all 0.35s;text-decoration:none;font-family:'Rubik',system-ui,sans-serif}
.btn-primary{background:linear-gradient(135deg,var(--primary),color-mix(in oklch,var(--primary) 70%,var(--accent)));color:var(--primary-fg);box-shadow:0 4px 15px color-mix(in oklch,var(--primary) 25%,transparent)}
.btn-primary:hover{transform:translateY(-3px) scale(1.02);box-shadow:0 8px 25px color-mix(in oklch,var(--primary) 30%,transparent)}
.btn-outline{background:transparent;color:var(--fg);border:2px solid var(--border)}
.btn-outline:hover{border-color:var(--primary);color:var(--primary);box-shadow:0 0 0 3px color-mix(in oklch,var(--primary) 8%,transparent)}
.btn-ghost{background:transparent;color:var(--muted-fg);padding:0.5rem 1rem}
.btn-ghost:hover{color:var(--fg)}
.btn-white{background:white;color:var(--primary);border:none;box-shadow:0 4px 12px rgba(0,0,0,0.1)}
.btn-white:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,0.15)}
.btn-sm{padding:0.5rem 1.25rem;font-size:0.85rem}
.btn-lg{padding:0.875rem 2rem;font-size:1rem}

/* ═══ HERO VARIANTS ═══ */
.hero{position:relative;overflow:hidden}
.hero-split{padding:4rem 0 5rem}
.hero-split .container{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center}
.hero-split .hero-img{border-radius:1rem;overflow:hidden;box-shadow:var(--shadow);aspect-ratio:4/3}
.hero-split .hero-img img{width:100%;height:100%;object-fit:cover}
.hero-overlay{padding:0;position:relative;min-height:85vh;display:flex;align-items:center;justify-content:center;text-align:center}
.hero-overlay .hero-bg-img{position:absolute;inset:0;z-index:0}
.hero-overlay .hero-bg-img img{width:100%;height:100%;object-fit:cover}
.hero-overlay .hero-bg-img::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0.55) 0%,rgba(0,0,0,0.7) 100%)}
.hero-overlay .container{position:relative;z-index:1}
.hero-overlay h1,.hero-overlay p,.hero-overlay .hero-badge{color:white!important}
.hero-overlay .hero-badge{background:rgba(255,255,255,0.15)!important;color:white!important}
.hero-overlay .btn-outline{border-color:rgba(255,255,255,0.3);color:white}
.hero-overlay .optin-inline input{background:rgba(255,255,255,0.15);border-color:rgba(255,255,255,0.3);color:white}
.hero-overlay .optin-inline input::placeholder{color:rgba(255,255,255,0.6)}
.hero-gradient{padding:5rem 0 7rem;background:linear-gradient(135deg,color-mix(in oklch,var(--primary) 10%,var(--bg)),color-mix(in oklch,var(--accent) 8%,var(--bg)));background-size:200% 200%;animation:gradientShift 8s ease infinite}
.hero-minimal{padding:7rem 0 5rem;text-align:center}
.hero-minimal h1{max-width:52rem;margin:0 auto}
.hero-minimal p{max-width:36rem;margin:0 auto}
.hero-minimal .hero-ctas{justify-content:center}
.hero-bold{padding:5rem 0 6rem;background:var(--fg);color:var(--primary-fg)}
.hero-bold .container{display:grid;grid-template-columns:1.1fr 0.9fr;gap:3rem;align-items:center}
.hero-bold h1,.hero-bold p{color:var(--primary-fg)}
.hero-bold .hero-badge{background:rgba(255,255,255,0.1);color:var(--primary-fg)}
.hero-bold .btn-primary{background:white;color:var(--fg)}
.hero-bold .btn-outline{border-color:rgba(255,255,255,0.25);color:var(--primary-fg)}
.hero-bold .hero-img{border-radius:1rem;overflow:hidden;aspect-ratio:4/3;box-shadow:0 20px 60px rgba(0,0,0,0.3)}
.hero-bold .hero-img img{width:100%;height:100%;object-fit:cover}
.hero-bold .optin-inline input{background:rgba(255,255,255,0.15);border-color:rgba(255,255,255,0.3);color:white}
.hero-bold .optin-inline input::placeholder{color:rgba(255,255,255,0.6)}
.hero-asymmetric{padding:4rem 0 6rem}
.hero-asymmetric .container{display:grid;grid-template-columns:1.3fr 0.7fr;gap:3rem;align-items:center}
.hero-asymmetric .hero-card{background:var(--card-bg);border:1px solid transparent;border-radius:calc(1rem * 1.5);padding:2rem;box-shadow:var(--shadow);}
.hero-asymmetric .hero-card img{border-radius:1rem;width:100%;aspect-ratio:16/10;object-fit:cover;margin-top:1rem}

.hero-badge{display:inline-flex;align-items:center;gap:0.5rem;background:color-mix(in oklch,var(--primary) 8%,transparent);color:var(--primary);border-radius:9999px;padding:0.375rem 1rem;font-size:0.85rem;font-weight:500;margin-bottom:1.5rem}
.hero-badge::before{content:'';width:0.5rem;height:0.5rem;border-radius:50%;background:currentColor;animation:pulse 2s infinite}
h1{font-size:clamp(2.25rem,5vw,3.75rem);font-weight:800;margin-bottom:1.25rem;letter-spacing:-0.02em}
h1 span{color:var(--primary)}
.hero p{font-size:1.1rem;color:var(--muted-fg);max-width:32rem;margin-bottom:2rem;line-height:1.7}
.hero-ctas{display:flex;gap:1rem;flex-wrap:wrap;align-items:center}

/* ═══ OPT-IN FORMS ═══ */
.optin-inline{display:flex;gap:0.5rem;max-width:28rem;margin-top:1.5rem}
.optin-inline input[type="email"]{flex:1;padding:0.75rem 1rem;border:2px solid var(--border);border-radius:1rem;font-size:0.9rem;font-family:'Rubik',system-ui,sans-serif;background:var(--bg);color:var(--fg);transition:border-color 0.2s}
.optin-inline input[type="email"]:focus{outline:none;border-color:var(--primary)}
.optin-inline button{white-space:nowrap}
.optin-success{display:flex;align-items:center;gap:0.5rem;color:var(--primary);font-weight:500;animation:slideUp 0.4s ease-out}
.optin-success svg{color:var(--primary);flex-shrink:0}
.optin-note{font-size:0.75rem;color:var(--muted-fg);margin-top:0.5rem}

/* ═══ TRUSTED ═══ */
.trusted{padding:2rem 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border);background:color-mix(in oklch,var(--muted) 30%,transparent)}
.trusted p{text-align:center;font-size:0.8rem;font-weight:600;text-transform:uppercase;letter-spacing:0.08em;color:var(--muted-fg);margin-bottom:1.25rem}
.trusted-logos{display:flex;justify-content:center;align-items:center;gap:3rem;flex-wrap:wrap}
.trusted-logos span{font-family:'Archivo',system-ui,sans-serif;font-size:1.1rem;font-weight:700;color:color-mix(in oklch,var(--fg) 18%,transparent);transition:color 0.3s}
.trusted-logos span:hover{color:color-mix(in oklch,var(--fg) 40%,transparent)}

/* ═══ SECTION HEADERS — gradient-text ═══ */
.section-header{text-align:center;max-width:40rem;margin:0 auto 3rem}
.section-header h2{font-size:clamp(1.75rem,3vw,2.75rem);font-weight:900;margin-bottom:0.75rem;background:linear-gradient(135deg,var(--fg),var(--primary));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.section-header p{font-size:1.05rem;color:var(--muted-fg);line-height:1.6}

.section-label{display:inline-block;font-size:0.72rem;font-weight:700;text-transform:uppercase;letter-spacing:0.1em;color:var(--primary);margin-bottom:0.75rem;padding:0.25rem 0.75rem;border-radius:9999px;background:color-mix(in oklch,var(--primary) 8%,transparent)}

/* ═══ FEATURES ═══ */
.features-section{padding:5rem 0}
.feat-grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.feat-grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:2rem}
.feat-alternating .feat-row{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center;margin-bottom:4rem}
.feat-alternating .feat-row:nth-child(even){direction:rtl}
.feat-alternating .feat-row:nth-child(even)>*{direction:ltr}
.feat-alternating .feat-row-img{border-radius:1rem;overflow:hidden;aspect-ratio:16/10;box-shadow:var(--shadow)}
.feat-alternating .feat-row-img img{width:100%;height:100%;object-fit:cover}
.feat-icon-left .feat-item{display:flex;gap:1.25rem;align-items:flex-start;margin-bottom:2rem;padding:1.5rem;border-radius:1rem;transition:all 0.3s}
.feat-icon-left .feat-item:hover{background:color-mix(in oklch,var(--primary) 4%,transparent)}
.feat-numbered .feat-item{display:flex;gap:1.5rem;align-items:flex-start;margin-bottom:2.5rem}
.feat-numbered .feat-num{font-family:'Archivo',system-ui,sans-serif;font-size:3rem;font-weight:800;color:color-mix(in oklch,var(--primary) 15%,transparent);line-height:1;min-width:3rem}

/* feat-card — elevated */
.feat-card{padding:2.25rem;border-radius:1rem;background:var(--card-bg);border:none;box-shadow:0 2px 4px rgba(0,0,0,0.02),0 12px 40px rgba(0,0,0,0.06);transition:all 0.35s}
.feat-card:hover{transform:translateY(-6px);box-shadow:0 4px 8px rgba(0,0,0,0.04),0 20px 60px rgba(0,0,0,0.1)}
.feat-icon{width:3.5rem;height:3.5rem;border-radius:50%;background:color-mix(in oklch,var(--primary) 10%,transparent);display:flex;align-items:center;justify-content:center;margin-bottom:1.25rem;color:var(--primary);flex-shrink:0;transition:all 0.3s}
.feat-card:hover .feat-icon{background:var(--primary);color:var(--primary-fg);transform:scale(1.1)}
.feat-card h3{font-size:1.1rem;font-weight:600;margin-bottom:0.5rem}
.feat-card p,.feat-item p{font-size:0.9rem;color:var(--muted-fg);line-height:1.6}
.feat-item h3{font-size:1.1rem;font-weight:600;margin-bottom:0.375rem}

/* ═══ STATS ═══ */
.stats-section{padding:4rem 0;background:oklch(0.5 0.14 200);color:var(--primary-fg);position:relative;overflow:hidden}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem;text-align:center;position:relative;z-index:1}
.stat-item{padding:1rem}
.stat-value{font-family:'Archivo',system-ui,sans-serif;font-size:clamp(2rem,4vw,3.25rem);font-weight:800;margin-bottom:0.25rem}
.stat-label{font-size:0.9rem;opacity:0.75;font-weight:500}

/* ═══ PRICING ═══ */
.pricing-section{padding:5rem 0}
.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
/* pricing-card — elevated */
.pricing-card{padding:2.5rem 2rem;border-radius:1rem;background:var(--card-bg);border:none;box-shadow:0 2px 4px rgba(0,0,0,0.02),0 12px 40px rgba(0,0,0,0.06);transition:all 0.35s;position:relative}
.pricing-card:hover{transform:translateY(-6px);box-shadow:0 4px 8px rgba(0,0,0,0.04),0 20px 60px rgba(0,0,0,0.1)}
.pricing-card.highlighted{box-shadow:0 4px 8px rgba(0,0,0,0.04),0 20px 60px color-mix(in oklch,var(--primary) 15%,transparent);transform:scale(1.03)}
.pricing-card.highlighted:hover{transform:scale(1.05)}
.pricing-badge{position:absolute;top:-0.75rem;left:50%;transform:translateX(-50%);background:var(--primary);color:var(--primary-fg);font-size:0.75rem;font-weight:600;padding:0.25rem 1rem;border-radius:9999px;white-space:nowrap}
.pricing-card h3{font-size:1.2rem;font-weight:600;margin-bottom:0.5rem}
.pricing-price{font-family:'Archivo',system-ui,sans-serif;font-size:2.5rem;font-weight:700;color:var(--primary)}
.pricing-price span{font-size:1rem;color:var(--muted-fg);font-weight:400}
.pricing-desc{font-size:0.85rem;color:var(--muted-fg);margin:0.75rem 0 1.5rem}
.pricing-features{list-style:none;margin-bottom:2rem}
.pricing-features li{font-size:0.85rem;padding:0.375rem 0;display:flex;align-items:center;gap:0.5rem}
.pricing-features li::before{content:'✓';color:var(--primary);font-weight:700}

/* ═══ PRODUCTS (E-COMMERCE) ═══ */
.product-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.product-card{background:var(--card-bg);border-radius:1rem;border:1px solid transparent;box-shadow:0 4px 20px color-mix(in oklch, oklch(0.5 0.14 200) 18%, transparent);overflow:hidden;transition:all 0.35s;position:relative}
.product-card:hover{transform:translateY(-6px);box-shadow:0 12px 32px rgba(0,0,0,0.12)}
.product-badge{position:absolute;top:0.75rem;left:0.75rem;background:var(--primary);color:var(--primary-fg);font-size:0.7rem;font-weight:700;padding:0.25rem 0.75rem;border-radius:9999px;z-index:2;text-transform:uppercase;letter-spacing:0.05em}
.product-badge.sale{background:#e53e3e}
.product-img{width:100%;aspect-ratio:4/3;overflow:hidden;background:var(--muted)}
.product-img img{width:100%;height:100%;object-fit:cover;transition:transform 0.5s}
.product-card:hover .product-img img{transform:scale(1.08)}
.product-info{padding:1.25rem}
.product-info h3{font-family:'Archivo',system-ui,sans-serif;font-size:1rem;font-weight:600;margin-bottom:0.5rem;color:var(--fg)}
.product-rating{display:flex;align-items:center;gap:0.25rem;margin-bottom:0.5rem;font-size:0.8rem;color:var(--muted-fg)}
.product-rating svg{color:#f59e0b;fill:#f59e0b}
.product-price{display:flex;align-items:center;gap:0.75rem}
.current-price{font-family:'Archivo',system-ui,sans-serif;font-size:1.25rem;font-weight:700;color:var(--fg)}
.orig-price{font-size:0.9rem;color:var(--muted-fg);text-decoration:line-through}
.trust-badges-row{display:flex;flex-wrap:wrap;gap:1.5rem;margin-bottom:2rem}
.trust-badge-item{display:flex;align-items:center;gap:0.5rem;font-size:0.85rem;color:var(--muted-fg)}
.trust-badge-item svg{color:var(--primary);width:20px;height:20px}
.hero-trust-badges{display:flex;gap:1.5rem;flex-wrap:wrap;margin-top:1.5rem;font-size:0.875rem;color:var(--muted-fg)}
@media(max-width:768px){.product-grid{grid-template-columns:repeat(2,1fr);gap:1rem}}
.ecom-trust-strip{display:flex;flex-wrap:wrap;gap:2rem;justify-content:center;margin-bottom:2.5rem;padding:1.25rem 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.trust-item{display:flex;align-items:center;gap:0.5rem;font-size:0.9rem;font-weight:500;color:var(--muted-fg)}
.trust-item svg{width:20px;height:20px;color:var(--primary);flex-shrink:0}
@media(max-width:480px){.product-grid{grid-template-columns:1fr}.ecom-trust-strip{gap:1rem}}

/* ═══ TESTIMONIALS ═══ */
.testimonials-section{padding:5rem 0;background:color-mix(in oklch,var(--muted) 30%,transparent)}
.test-grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.test-featured{max-width:48rem;margin:0 auto;text-align:center}
.test-featured blockquote{font-size:1.35rem;font-style:italic;line-height:1.6;margin-bottom:2rem;color:var(--fg)}
.test-2col{display:grid;grid-template-columns:1fr 1fr;gap:2rem}
.test-2col .test-card:nth-child(2){margin-top:3rem}
.test-minimal .test-item{border-left:3px solid var(--primary);padding:1.5rem 2rem;margin-bottom:1.5rem;transition:all 0.3s}
.test-minimal .test-item:hover{background:color-mix(in oklch,var(--primary) 3%,transparent)}
/* test-card — speech-bubble */
.test-card{background:var(--card-bg);border-radius:1rem;padding:2rem;border:1px solid transparent;box-shadow:0 4px 20px color-mix(in oklch, oklch(0.5 0.14 200) 18%, transparent);transition:all 0.3s;position:relative}
.test-card::after{content:'';position:absolute;bottom:-10px;left:2rem;width:0;height:0;border-left:10px solid transparent;border-right:10px solid transparent;border-top:10px solid var(--card-bg)}
.test-card:hover{transform:translateY(-3px);box-shadow:0 12px 40px rgba(0,0,0,0.08)}
.test-quote{font-size:0.95rem;color:var(--fg);line-height:1.65;margin-bottom:1.5rem;font-style:italic}
.test-author{display:flex;align-items:center;gap:0.75rem}
.test-avatar{width:2.75rem;height:2.75rem;border-radius:50%;background:color-mix(in oklch,var(--primary) 10%,transparent);display:flex;align-items:center;justify-content:center;font-size:0.8rem;font-weight:600;color:var(--primary)}
.test-name{font-size:0.875rem;font-weight:600}
.test-role{font-size:0.75rem;color:var(--muted-fg)}

/* ═══ FAQ ═══ */
.faq-section{padding:5rem 0}
.faq-list{max-width:48rem;margin:0 auto}
.faq-item{border-bottom:1px solid var(--border);overflow:hidden}
.faq-question{width:100%;background:none;border:none;padding:1.25rem 0;display:flex;justify-content:space-between;align-items:center;cursor:pointer;font-family:'Rubik',system-ui,sans-serif;font-size:1rem;font-weight:600;color:var(--fg);text-align:left;transition:color 0.2s}
.faq-question:hover{color:var(--primary)}
.faq-question svg{width:1.25rem;height:1.25rem;transition:transform 0.3s;flex-shrink:0;color:var(--muted-fg)}
.faq-open .faq-question svg{transform:rotate(180deg);color:var(--primary)}
.faq-answer{max-height:0;overflow:hidden;transition:max-height 0.35s ease,padding 0.35s ease}
.faq-open .faq-answer{max-height:300px;padding-bottom:1.25rem}
.faq-answer p{font-size:0.9rem;color:var(--muted-fg);line-height:1.7}

/* ═══ IMAGE BREAK ═══ */
.image-break{padding:3rem 0}
.image-break-inner{display:grid;grid-template-columns:1fr 1fr;gap:2rem;align-items:center}
.image-break-img{border-radius:1rem;overflow:hidden;aspect-ratio:16/10;box-shadow:var(--shadow)}
.image-break-img img{width:100%;height:100%;object-fit:cover;transition:transform 0.5s}
.image-break-img:hover img{transform:scale(1.03)}
.image-break-text h2{font-size:clamp(1.5rem,3vw,2.25rem);font-weight:700;margin-bottom:1rem}
.image-break-text p{font-size:1rem;color:var(--muted-fg);line-height:1.7;margin-bottom:1.5rem}
.image-break-list{list-style:none}
.image-break-list li{display:flex;align-items:center;gap:0.5rem;font-size:0.9rem;padding:0.375rem 0;color:var(--fg)}
.image-break-list li::before{content:'';width:1.25rem;height:1.25rem;border-radius:50%;background:color-mix(in oklch,var(--primary) 12%,transparent);display:flex;align-items:center;justify-content:center;flex-shrink:0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='oklch(0.5%200.14%20200)' stroke-width='3'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:center;background-size:0.7rem}

/* ═══ CTA — diagonal-gradient ═══ */
.cta-section{padding:5rem 0}
.cta-box{position:relative;border-radius:1.5rem;background:linear-gradient(160deg,oklch(0.5 0.14 200) 0%,color-mix(in oklch,oklch(0.6 0.16 340) 80%,oklch(0.5 0.14 200)) 100%);padding:5rem 2rem;text-align:center;overflow:hidden}
.cta-box h2{font-size:clamp(1.75rem,3vw,2.75rem);font-weight:900;color:var(--primary-fg);margin-bottom:1rem}
.cta-box p{color:color-mix(in oklch,var(--primary-fg) 85%,transparent);font-size:1.05rem;max-width:32rem;margin:0 auto 2rem}
.cta-box .optin-inline{margin:0 auto;justify-content:center}
.cta-box .optin-inline input{background:rgba(255,255,255,0.15);border-color:rgba(255,255,255,0.3);color:white}
.cta-box .optin-inline input::placeholder{color:rgba(255,255,255,0.6)}
.cta-box .optin-success{color:white}
.cta-box .optin-success svg{color:white}
.cta-box .optin-note{color:rgba(255,255,255,0.6)}

/* ═══ AUTH PAGES (Sign In / Sign Up) ═══ */
.auth-page{min-height:100vh;display:flex}
.auth-split{display:grid;grid-template-columns:1fr 1fr;min-height:100vh;width:100%}
.auth-split-image{position:relative;overflow:hidden;display:flex;align-items:flex-end;padding:3rem}
.auth-split-image img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.auth-split-image::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.6) 100%)}
.auth-split-image .auth-image-text{position:relative;z-index:1;color:white}
.auth-split-image .auth-image-text h2{font-size:2rem;font-weight:700;margin-bottom:0.5rem}
.auth-split-image .auth-image-text p{font-size:1rem;opacity:0.85}
.auth-split-form{display:flex;align-items:center;justify-content:center;padding:3rem}
.auth-centered{display:flex;align-items:center;justify-content:center;min-height:100vh;width:100%;padding:2rem;background:color-mix(in oklch,var(--muted) 30%,transparent)}
.auth-minimal{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;width:100%;padding:2rem}
.auth-card-wrap{display:flex;align-items:center;justify-content:center;min-height:100vh;width:100%;padding:2rem;background:linear-gradient(135deg,color-mix(in oklch,var(--primary) 8%,var(--bg)),color-mix(in oklch,var(--accent) 5%,var(--bg)))}
.auth-form-box{width:100%;max-width:420px}
.auth-form-box .nav-brand{justify-content:center;margin-bottom:2rem}
.auth-form-box h1{font-size:1.75rem;font-weight:700;margin-bottom:0.5rem;text-align:center}
.auth-form-box .auth-subtitle{font-size:0.95rem;color:var(--muted-fg);text-align:center;margin-bottom:2rem}
.auth-form-card{background:var(--card-bg);border:1px solid transparent;border-radius:calc(1rem * 1.5);padding:2.5rem;box-shadow:0 4px 20px color-mix(in oklch, oklch(0.5 0.14 200) 18%, transparent)}
.auth-form-card .form-group{margin-bottom:1.25rem}
.auth-form-card .form-group label{display:block;font-size:0.85rem;font-weight:500;margin-bottom:0.375rem}
.auth-form-card .form-group input{width:100%;padding:0.75rem 1rem;border:1px solid var(--border);border-radius:1rem;font-size:0.9rem;font-family:'Rubik',system-ui,sans-serif;background:var(--bg);color:var(--fg);transition:border-color 0.2s,box-shadow 0.2s}
.auth-form-card .form-group input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px color-mix(in oklch,var(--primary) 10%,transparent)}
.auth-form-card .form-group select{width:100%;padding:0.75rem 1rem;border:1px solid var(--border);border-radius:1rem;font-size:0.9rem;font-family:'Rubik',system-ui,sans-serif;background:var(--bg);color:var(--fg)}
.auth-extras{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem;font-size:0.85rem}
.auth-extras label{display:flex;align-items:center;gap:0.5rem;cursor:pointer}
.auth-extras a{color:var(--primary);font-weight:500}
.auth-divider{display:flex;align-items:center;gap:1rem;margin:1.5rem 0;color:var(--muted-fg);font-size:0.85rem}
.auth-divider::before,.auth-divider::after{content:'';flex:1;height:1px;background:var(--border)}
.auth-social{display:flex;gap:0.75rem;margin-bottom:1.5rem}
.auth-social button{flex:1;display:flex;align-items:center;justify-content:center;gap:0.5rem;padding:0.75rem;border:1px solid var(--border);border-radius:1rem;background:var(--bg);cursor:pointer;font-size:0.85rem;font-weight:500;color:var(--fg);transition:all 0.2s;font-family:'Rubik',system-ui,sans-serif}
.auth-social button:hover{border-color:var(--primary);background:color-mix(in oklch,var(--primary) 3%,transparent)}
.auth-footer-text{text-align:center;font-size:0.85rem;color:var(--muted-fg);margin-top:1.5rem}
.auth-footer-text a{color:var(--primary);font-weight:500}
.pw-field{position:relative}
.pw-toggle{position:absolute;right:0.75rem;top:50%;transform:translateY(-50%);background:none;border:none;color:var(--muted-fg);cursor:pointer;font-size:0.8rem;font-family:'Rubik',system-ui,sans-serif;padding:0.25rem 0.5rem}
.auth-benefits{margin-top:2rem;padding-top:1.5rem;border-top:1px solid var(--border)}
.auth-benefits h4{font-size:0.85rem;font-weight:600;margin-bottom:0.75rem;color:var(--fg)}
.auth-benefits ul{list-style:none}
.auth-benefits li{font-size:0.8rem;color:var(--muted-fg);padding:0.25rem 0;display:flex;align-items:center;gap:0.5rem}
.auth-benefits li::before{content:'✓';color:var(--primary);font-weight:700;font-size:0.75rem}

/* ═══ RICH SERVICES PAGE ═══ */
.services-hero-img{position:relative;margin-bottom:3rem;border-radius:1rem;overflow:hidden;max-height:400px}
.services-hero-img img{width:100%;height:100%;object-fit:cover}
.service-detail-card{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center;margin-bottom:4rem;padding:2rem;border-radius:1rem;background:var(--card-bg);border:1px solid transparent;box-shadow:0 4px 20px color-mix(in oklch, oklch(0.5 0.14 200) 18%, transparent);transition:all 0.3s}
.service-detail-card:nth-child(even){direction:rtl}
.service-detail-card:nth-child(even)>*{direction:ltr}
.service-detail-card:hover{box-shadow:0 12px 40px rgba(0,0,0,0.08)}
.service-detail-img{border-radius:1rem;overflow:hidden;aspect-ratio:16/10}
.service-detail-img img{width:100%;height:100%;object-fit:cover}
.service-detail-text h3{font-size:1.3rem;font-weight:600;margin-bottom:0.75rem}
.service-detail-text p{font-size:0.95rem;color:var(--muted-fg);line-height:1.7;margin-bottom:1rem}
.service-process{padding:3rem 0}
.process-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem;counter-reset:step}
.process-step{text-align:center;position:relative}
.process-step::before{counter-increment:step;content:counter(step);display:flex;align-items:center;justify-content:center;width:3rem;height:3rem;border-radius:50%;background:var(--primary);color:var(--primary-fg);font-weight:700;font-size:1.1rem;margin:0 auto 1rem}
.process-step h4{font-size:1rem;font-weight:600;margin-bottom:0.5rem}
.process-step p{font-size:0.85rem;color:var(--muted-fg);line-height:1.6}

/* ═══ FOOTER ═══ */
.footer{background:oklch(0.18 0.02 200);color:var(--primary-fg);padding:4rem 0 2rem;}
.footer-grid{display:flex;flex-direction:column;align-items:center;gap:1.5rem;margin-bottom:2rem;text-align:center}.footer-links{display:flex;gap:2rem;flex-wrap:wrap;justify-content:center}.footer-links a{font-size:0.875rem;opacity:0.7;transition:opacity 0.2s}.footer-links a:hover{opacity:1}
.footer-brand p{color:color-mix(in oklch,var(--primary-fg) 60%,transparent);font-size:0.875rem;margin-top:0.75rem;max-width:20rem;line-height:1.6}
.footer-col h4{font-size:0.8rem;font-weight:600;margin-bottom:0.75rem;text-transform:uppercase;letter-spacing:0.06em}
.footer-col ul{list-style:none}.footer-col li{margin-bottom:0.4rem}
.footer-col a{font-size:0.875rem;color:color-mix(in oklch,var(--primary-fg) 60%,transparent);transition:color 0.2s}
.footer-col a:hover{color:var(--primary-fg)}
.footer-newsletter{margin-top:1.5rem}
.footer-newsletter h4{font-size:0.85rem;font-weight:600;margin-bottom:0.75rem}
.footer-newsletter .optin-inline{max-width:100%}
.footer-newsletter .optin-inline input{font-size:0.85rem;padding:0.6rem 0.75rem}
.footer-newsletter .optin-inline button{font-size:0.8rem;padding:0.6rem 1rem}
.footer-bottom{border-top:1px solid color-mix(in oklch,var(--primary-fg) 10%,transparent);padding-top:1.5rem;margin-top:2rem;display:flex;justify-content:space-between;align-items:center;font-size:0.8rem;color:color-mix(in oklch,var(--primary-fg) 50%,transparent)}

/* ═══ COOKIE CONSENT ═══ */
#cookie-consent{position:fixed;bottom:-200px;left:1rem;right:1rem;max-width:480px;z-index:999;background:var(--card-bg);border:1px solid var(--border);border-radius:1rem;padding:1.25rem 1.5rem;box-shadow:0 -4px 30px rgba(0,0,0,0.1);transition:bottom 0.5s cubic-bezier(0.4,0,0.2,1);backdrop-filter:blur(12px)}
#cookie-consent.cc-show{bottom:1rem}
.cc-text{font-size:0.85rem;color:var(--muted-fg);line-height:1.5;margin-bottom:1rem}
.cc-text a{color:var(--primary);text-decoration:underline}
.cc-buttons{display:flex;gap:0.5rem}

/* ═══ BACK TO TOP ═══ */
#back-to-top{position:fixed;bottom:2rem;right:2rem;width:3rem;height:3rem;border-radius:50%;background:var(--primary);color:var(--primary-fg);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:0;transform:translateY(20px);transition:all 0.3s;z-index:90;box-shadow:0 4px 12px rgba(0,0,0,0.15)}
#back-to-top.btt-show{opacity:1;transform:translateY(0)}
#back-to-top:hover{transform:translateY(-3px);box-shadow:0 6px 20px rgba(0,0,0,0.2)}

/* ═══ INNER PAGES ═══ */
.page-hero{padding:4rem 0 3rem;text-align:center}
.page-hero h1{font-size:clamp(2rem,4vw,3rem);font-weight:700;margin-bottom:0.75rem}
.page-hero p{font-size:1.05rem;color:var(--muted-fg);max-width:36rem;margin:0 auto}

.about-content{padding:3rem 0 6rem}
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:4rem;margin-bottom:4rem;align-items:center}
.about-img{border-radius:1rem;overflow:hidden;aspect-ratio:4/3;box-shadow:var(--shadow)}
.about-img img{width:100%;height:100%;object-fit:cover}
.about-story h2{font-size:1.75rem;font-weight:700;margin-bottom:1.25rem}
.about-story p{color:var(--muted-fg);line-height:1.8;margin-bottom:1rem}
.about-stats{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}
.about-stat-card{background:var(--card-bg);border:1px solid transparent;border-radius:1rem;padding:1.5rem;text-align:center;box-shadow:0 4px 20px color-mix(in oklch, oklch(0.5 0.14 200) 18%, transparent);transition:all 0.3s}
.about-stat-card:hover{transform:translateY(-2px)}
.about-stat-card .value{font-family:'Archivo',system-ui,sans-serif;font-size:1.75rem;font-weight:700;color:var(--primary)}
.about-stat-card .label{font-size:0.8rem;color:var(--muted-fg);margin-top:0.25rem}
.values-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;margin-bottom:4rem}
.value-card{padding:1.5rem;border-radius:1rem;background:var(--card-bg);border:1px solid transparent;box-shadow:0 4px 20px color-mix(in oklch, oklch(0.5 0.14 200) 18%, transparent);transition:all 0.3s}
.value-card:hover{transform:translateY(-2px);border-color:color-mix(in oklch,var(--primary) 20%,transparent)}
.value-card h3{font-size:1rem;font-weight:600;margin-bottom:0.5rem}
.value-card p{font-size:0.85rem;color:var(--muted-fg);line-height:1.6}
.team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.team-card{text-align:center;padding:2rem;border-radius:1rem;background:var(--card-bg);border:1px solid transparent;box-shadow:0 4px 20px color-mix(in oklch, oklch(0.5 0.14 200) 18%, transparent);transition:all 0.3s}
.team-card:hover{transform:translateY(-3px);box-shadow:0 12px 40px rgba(0,0,0,0.08)}
.team-avatar{width:4rem;height:4rem;border-radius:50%;background:color-mix(in oklch,var(--primary) 10%,transparent);display:flex;align-items:center;justify-content:center;margin:0 auto 1rem;font-size:1.1rem;font-weight:600;color:var(--primary)}
.team-card h3{font-size:1rem;font-weight:600;margin-bottom:0.25rem}
.team-card p{font-size:0.8rem;color:var(--muted-fg)}

.contact-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:3rem;padding:3rem 0 6rem}
.contact-form-wrap{background:var(--card-bg);border:1px solid transparent;border-radius:1rem;padding:2rem;box-shadow:0 4px 20px color-mix(in oklch, oklch(0.5 0.14 200) 18%, transparent)}
.form-group{margin-bottom:1.25rem}
.form-group label{display:block;font-size:0.85rem;font-weight:500;margin-bottom:0.375rem}
.form-group input,.form-group textarea,.form-group select{width:100%;padding:0.75rem 1rem;border:1px solid var(--border);border-radius:1rem;font-size:0.9rem;font-family:'Rubik',system-ui,sans-serif;background:var(--bg);color:var(--fg);transition:border-color 0.2s,box-shadow 0.2s}
.form-group input:focus,.form-group textarea:focus,.form-group select:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px color-mix(in oklch,var(--primary) 10%,transparent)}
.form-group textarea{min-height:8rem;resize:vertical}
.contact-info h3{font-size:1.2rem;font-weight:600;margin-bottom:1rem}
.contact-info p{font-size:0.9rem;color:var(--muted-fg);margin-bottom:0.5rem}
.contact-info-block{margin-bottom:2rem}
.form-success{text-align:center;padding:3rem 1rem;animation:slideUp 0.5s ease-out}
.form-success svg{color:var(--primary);margin:0 auto 1rem}
.form-success h3{font-size:1.25rem;font-weight:600;margin-bottom:0.5rem}
.form-success p{color:var(--muted-fg);font-size:0.9rem}

.legal-content{max-width:48rem;margin:0 auto;padding:2rem 0 6rem}
.legal-content h2{font-size:1.4rem;font-weight:600;margin:2.5rem 0 1rem}
.legal-content p{font-size:0.9rem;color:var(--muted-fg);line-height:1.8;margin-bottom:1rem}
.legal-content ul{margin:1rem 0;padding-left:1.5rem}
.legal-content li{font-size:0.9rem;color:var(--muted-fg);line-height:1.8;margin-bottom:0.5rem}

/* ═══ RESPONSIVE ═══ */
@media(max-width:1024px){
  .hero-split .container,.hero-bold .container,.hero-asymmetric .container{grid-template-columns:1fr}
  .hero-split .hero-img,.hero-bold .hero-img{max-height:400px}
  .feat-grid3,.test-grid3{grid-template-columns:repeat(2,1fr)!important}
  .feat-alternating .feat-row,.service-detail-card{grid-template-columns:1fr!important}
  .feat-alternating .feat-row:nth-child(even),.service-detail-card:nth-child(even){direction:ltr}
  .stats-grid{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr!important}
  .pricing-grid{grid-template-columns:1fr}
  .blog-grid,.blog-page-grid{grid-template-columns:1fr 1fr}
  .about-grid{grid-template-columns:1fr}
  .image-break-inner{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr}
  .nav-links,.nav-cta{display:none}
  #nav-toggle{display:block}
  #mobile-nav{display:block;position:fixed;top:0;left:0;right:0;bottom:0;background:var(--bg);z-index:100;padding:5rem 2rem 2rem;transform:translateX(100%);transition:transform 0.3s ease}
  #mobile-nav.mobile-nav-open{transform:translateX(0)}
  #mobile-nav a{display:block;font-size:1.25rem;font-weight:600;padding:1rem 0;border-bottom:1px solid var(--border);color:var(--fg)}
  .test-2col{grid-template-columns:1fr}.test-2col .test-card:nth-child(2){margin-top:0}
  .auth-split{grid-template-columns:1fr}
  .auth-split-image{display:none}
  .process-steps{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:640px){
  .feat-grid3,.feat-grid2,.test-grid3{grid-template-columns:1fr!important}
  .stats-grid{grid-template-columns:1fr 1fr}
  .blog-grid,.blog-page-grid{grid-template-columns:1fr}
  .values-grid{grid-template-columns:1fr}
  .team-grid{grid-template-columns:1fr}
  .optin-inline{flex-direction:column}
  .optin-inline button{width:100%}
  .process-steps{grid-template-columns:1fr}
}