/* ============================================
   INVOGENPRO SHOPIFY THEME — Clean White
   Primary: #2563eb | Font: Plus Jakarta Sans
   ============================================ */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=DM+Mono:wght@400;500&display=swap');

:root {
  --primary:      #2563eb;
  --primary-dark: #1d4ed8;
  --primary-dim:  rgba(37,99,235,0.08);
  --primary-mid:  rgba(37,99,235,0.2);
  --primary-light:#eff6ff;
  --text-primary: #0f172a;
  --text-secondary:#475569;
  --text-muted:   #94a3b8;
  --bg:           #f8fafc;
  --bg-white:     #ffffff;
  --bg-subtle:    #f1f5f9;
  --border:       #e2e8f0;
  --border-dark:  #cbd5e1;
  --success:      #16a34a;
  --success-bg:   #f0fdf4;
  --danger:       #dc2626;
  --warning:      #d97706;
  --radius:       8px;
  --radius-lg:    14px;
  --radius-xl:    20px;
  --shadow-sm:    0 1px 3px rgba(0,0,0,0.06),0 1px 2px rgba(0,0,0,0.04);
  --shadow-md:    0 4px 16px rgba(0,0,0,0.08),0 2px 4px rgba(0,0,0,0.04);
  --shadow-lg:    0 10px 40px rgba(0,0,0,0.1),0 4px 8px rgba(0,0,0,0.04);
  --shadow-xl:    0 20px 60px rgba(0,0,0,0.12);
  --font-body:    'Plus Jakarta Sans',sans-serif;
  --font-mono:    'DM Mono',monospace;
  --max-width:    1160px;
  --gutter:       clamp(1.25rem,4vw,2.5rem);
  --transition:   0.2s cubic-bezier(0.4,0,0.2,1);
}

/* ── RESET ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{font-size:16px;scroll-behavior:smooth;}
body{background:var(--bg-white);color:var(--text-primary);font-family:var(--font-body);font-weight:400;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;}
button{cursor:pointer;border:none;background:none;font-family:inherit;}
input,textarea,select{font-family:inherit;}

/* ── TYPOGRAPHY ── */
h1,h2,h3,h4,h5{font-family:var(--font-body);font-weight:700;line-height:1.15;color:var(--text-primary);letter-spacing:-0.02em;}
h1{font-size:clamp(2.2rem,5vw,3.6rem);font-weight:800;}
h2{font-size:clamp(1.7rem,3.5vw,2.6rem);}
h3{font-size:1.2rem;font-weight:600;}
h4{font-size:1rem;font-weight:600;}
p{color:var(--text-secondary);line-height:1.75;font-size:1rem;}
.mono{font-family:var(--font-mono);}
.text-primary-color{color:var(--primary);}
.text-center{text-align:center;}
.text-muted{color:var(--text-muted);}

/* ── LAYOUT ── */
.container{max-width:var(--max-width);margin:0 auto;padding:0 var(--gutter);}
.section{padding:clamp(4rem,9vw,7rem) 0;}
.section-alt{background:var(--bg);}
.section-white{background:var(--bg-white);}

/* ── BUTTONS ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:0.5rem;padding:0.7rem 1.6rem;border-radius:var(--radius);font-family:var(--font-body);font-size:0.9rem;font-weight:600;transition:var(--transition);white-space:nowrap;cursor:pointer;border:1.5px solid transparent;letter-spacing:0.01em;}
.btn-primary{background:var(--primary);color:#fff;border-color:var(--primary);box-shadow:0 1px 3px rgba(37,99,235,0.3);}
.btn-primary:hover{background:var(--primary-dark);border-color:var(--primary-dark);box-shadow:0 4px 12px rgba(37,99,235,0.35);transform:translateY(-1px);}
.btn-outline{background:#fff;border-color:var(--border-dark);color:var(--text-primary);box-shadow:var(--shadow-sm);}
.btn-outline:hover{border-color:var(--primary);color:var(--primary);box-shadow:var(--shadow-md);transform:translateY(-1px);}
.btn-ghost{background:transparent;border-color:transparent;color:var(--text-secondary);}
.btn-ghost:hover{color:var(--primary);}
.btn-lg{padding:0.875rem 2rem;font-size:0.95rem;border-radius:var(--radius-lg);}
.btn-sm{padding:0.45rem 1rem;font-size:0.82rem;border-radius:6px;}
.btn:disabled{opacity:0.5;cursor:not-allowed;transform:none!important;}

/* ── BADGES ── */
.badge{display:inline-flex;align-items:center;gap:0.35rem;padding:0.3rem 0.85rem;border-radius:100px;font-size:0.72rem;font-weight:700;letter-spacing:0.04em;text-transform:uppercase;}
.badge-primary{background:var(--primary-light);color:var(--primary);border:1px solid rgba(37,99,235,0.18);}
.badge-success{background:#f0fdf4;color:#15803d;border:1px solid #bbf7d0;}
.badge-warning{background:#fffbeb;color:#b45309;border:1px solid #fde68a;}
.badge-grey{background:var(--bg);color:var(--text-secondary);border:1px solid var(--border);}

/* ── CARDS ── */
.card{background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);padding:1.75rem;box-shadow:var(--shadow-sm);transition:var(--transition);}
.card:hover{box-shadow:var(--shadow-md);border-color:var(--primary-mid);transform:translateY(-2px);}
.card-icon{width:46px;height:46px;border-radius:10px;background:var(--primary-light);border:1px solid rgba(37,99,235,0.15);display:flex;align-items:center;justify-content:center;margin-bottom:1.1rem;font-size:1.2rem;}
.card h3{margin-bottom:0.5rem;font-size:1rem;}
.card p{font-size:0.88rem;}

/* ── SECTION HEADER ── */
.section-header{margin-bottom:3rem;}
.section-header.centered{text-align:center;}
.section-header.centered p{max-width:540px;margin:0.75rem auto 0;}
.section-header .badge{margin-bottom:0.85rem;}
.section-header h2{margin-bottom:0.75rem;}
.section-header p{font-size:1.05rem;max-width:520px;margin-top:0.75rem;}

/* ── DIVIDER ── */
.divider{height:1px;background:var(--border);}

/* ── HEADER / NAV ── */
.site-header{position:fixed;top:0;left:0;right:0;z-index:999;padding:0 var(--gutter);height:64px;display:flex;align-items:center;justify-content:space-between;background:rgba(255,255,255,0.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--border);transition:var(--transition);}
.site-header.scrolled{box-shadow:var(--shadow-sm);}
.logo{font-family:var(--font-body);font-size:1.25rem;font-weight:800;letter-spacing:-0.02em;color:var(--text-primary);display:flex;align-items:center;gap:0.25rem;}
.logo span{color:var(--primary);}
.nav-links{display:flex;align-items:center;gap:0.25rem;}
.nav-links a{font-size:0.875rem;font-weight:500;color:var(--text-secondary);padding:0.4rem 0.75rem;border-radius:6px;transition:var(--transition);}
.nav-links a:hover,.nav-links a.active{color:var(--text-primary);background:var(--bg);}
.nav-cta{display:flex;align-items:center;gap:0.6rem;}
.hamburger{display:none;flex-direction:column;gap:4.5px;padding:4px;cursor:pointer;}
.hamburger span{display:block;width:22px;height:1.5px;background:var(--text-primary);border-radius:2px;transition:var(--transition);}
.mobile-nav{display:none;position:fixed;top:64px;left:0;right:0;bottom:0;background:#fff;z-index:998;flex-direction:column;align-items:center;justify-content:center;gap:1rem;padding:2rem;}
.mobile-nav.open{display:flex;}
.mobile-nav a{font-size:1.5rem;font-weight:700;color:var(--text-secondary);transition:var(--transition);letter-spacing:-0.02em;}
.mobile-nav a:hover{color:var(--primary);}
.mobile-nav-cta{display:flex;flex-direction:column;gap:0.75rem;width:100%;max-width:280px;margin-top:1.5rem;}
.mobile-nav-cta .btn{width:100%;justify-content:center;}
@media(max-width:860px){.nav-links,.nav-cta{display:none;}.hamburger{display:flex;}}

/* ── HERO ── */
.hero{padding:clamp(7rem,14vw,10rem) 0 clamp(4rem,8vw,6rem);background:#fff;position:relative;overflow:hidden;}
.hero-inner{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center;}
.hero-eyebrow{display:flex;align-items:center;gap:0.75rem;margin-bottom:1.5rem;}
.hero-eyebrow .line{width:32px;height:2px;background:var(--primary);display:block;border-radius:2px;}
.hero h1{margin-bottom:1.25rem;}
.hero-desc{font-size:1.05rem;max-width:480px;margin-bottom:2rem;line-height:1.8;}
.hero-actions{display:flex;flex-wrap:wrap;gap:0.75rem;align-items:center;margin-bottom:2.5rem;}
.hero-social-proof{display:flex;align-items:center;gap:0.85rem;flex-wrap:wrap;}
.hero-avatars{display:flex;}
.hero-avatars span{width:32px;height:32px;border-radius:50%;border:2px solid #fff;background:var(--primary-light);display:flex;align-items:center;justify-content:center;font-size:0.7rem;font-weight:700;color:var(--primary);margin-left:-8px;box-shadow:var(--shadow-sm);}
.hero-avatars span:first-child{margin-left:0;}
.hero-social-text{font-size:0.82rem;color:var(--text-secondary);}
.hero-social-text strong{color:var(--text-primary);font-weight:600;}
.hero-visual{display:flex;justify-content:center;align-items:center;position:relative;}

/* Invoice mockup */
.invoice-mockup{background:#fff;border:1px solid var(--border);border-radius:var(--radius-xl);padding:1.75rem;width:100%;max-width:400px;box-shadow:var(--shadow-xl);animation:float 6s ease-in-out infinite;position:relative;}
.invoice-mockup::before{content:'';position:absolute;top:-1px;left:32px;right:32px;height:3px;background:var(--primary);border-radius:0 0 3px 3px;}
@keyframes float{0%,100%{transform:translateY(0);}50%{transform:translateY(-10px);}}
.mockup-badge{position:absolute;top:-13px;right:20px;background:var(--primary);color:#fff;font-size:0.68rem;font-weight:700;font-family:var(--font-mono);padding:0.2rem 0.7rem;border-radius:100px;letter-spacing:0.05em;}
.mockup-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:1.25rem;padding-bottom:1.25rem;border-bottom:1px solid var(--border);}
.mockup-brand{font-weight:800;font-size:1rem;color:var(--text-primary);letter-spacing:-0.01em;}
.mockup-brand span{color:var(--primary);}
.mockup-no{text-align:right;font-family:var(--font-mono);font-size:0.72rem;color:var(--text-muted);}
.mockup-no strong{color:var(--primary);font-size:0.8rem;display:block;margin-bottom:1px;}
.mockup-row{display:flex;justify-content:space-between;padding:0.55rem 0;border-bottom:1px solid var(--bg-subtle);font-size:0.84rem;}
.mockup-row .label{color:var(--text-secondary);}
.mockup-row .value{font-family:var(--font-mono);font-weight:500;color:var(--text-primary);}
.mockup-total{display:flex;justify-content:space-between;align-items:center;margin-top:1rem;padding:0.9rem 1rem;background:var(--primary-light);border:1px solid rgba(37,99,235,0.15);border-radius:var(--radius);}
.mockup-total .total-label{font-weight:700;font-size:0.88rem;}
.mockup-total .total-value{font-family:var(--font-mono);font-size:1.2rem;font-weight:700;color:var(--primary);}
.mockup-status{display:inline-flex;align-items:center;gap:0.4rem;margin-top:0.75rem;padding:0.25rem 0.75rem;background:#f0fdf4;border:1px solid #bbf7d0;border-radius:100px;font-size:0.7rem;font-weight:600;color:#15803d;font-family:var(--font-mono);}
.mockup-status::before{content:'';width:5px;height:5px;border-radius:50%;background:#16a34a;}

/* Hero decorative bg */
.hero-bg-dots{position:absolute;right:-60px;top:-60px;width:400px;height:400px;background-image:radial-gradient(circle,var(--border) 1.5px,transparent 1.5px);background-size:24px 24px;opacity:0.6;pointer-events:none;}
@media(max-width:900px){.hero-inner{grid-template-columns:1fr;gap:3rem;}.hero-visual{order:-1;}.invoice-mockup{max-width:360px;}}

/* ── STATS BAR ── */
.stats-bar{background:#fff;border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:2rem 0;}
.stats-bar-inner{display:flex;align-items:center;justify-content:center;gap:clamp(2rem,6vw,5rem);flex-wrap:wrap;}
.stats-bar-item{text-align:center;}
.stats-value{font-family:var(--font-body);font-size:1.9rem;font-weight:800;color:var(--text-primary);letter-spacing:-0.03em;line-height:1;}
.stats-value span{color:var(--primary);}
.stats-label{font-size:0.75rem;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:0.06em;margin-top:0.25rem;}
.stats-divider{width:1px;height:40px;background:var(--border);}
@media(max-width:600px){.stats-divider{display:none;}}

/* ── FEATURES ── */
.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.25rem;}

/* ── HOW IT WORKS ── */
.steps-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.5rem;counter-reset:steps;}
.step-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);padding:1.75rem;box-shadow:var(--shadow-sm);counter-increment:steps;position:relative;transition:var(--transition);}
.step-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px);}
.step-card::before{content:counter(steps,decimal-leading-zero);position:absolute;top:-13px;left:1.5rem;font-family:var(--font-mono);font-size:0.72rem;font-weight:500;color:var(--primary);background:#fff;border:1px solid rgba(37,99,235,0.2);padding:0.2rem 0.6rem;border-radius:100px;}
.step-icon{font-size:1.75rem;margin-bottom:0.9rem;}
.step-card h3{font-size:1rem;margin-bottom:0.5rem;}

/* ── PRICING ── */
.pricing-wrapper{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.5rem;max-width:780px;margin:0 auto;}
.pricing-card{background:#fff;border:1.5px solid var(--border);border-radius:var(--radius-xl);padding:2.25rem;position:relative;box-shadow:var(--shadow-sm);transition:var(--transition);}
.pricing-card.featured{border-color:var(--primary);box-shadow:0 0 0 4px rgba(37,99,235,0.08),var(--shadow-md);}
.pricing-card.featured::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--primary);border-radius:var(--radius-xl) var(--radius-xl) 0 0;}
.pricing-badge{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--primary);color:#fff;font-size:0.7rem;font-weight:700;font-family:var(--font-mono);padding:0.25rem 1rem;border-radius:100px;white-space:nowrap;letter-spacing:0.04em;}
.plan-name{font-size:0.72rem;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:0.1em;margin-bottom:0.9rem;}
.plan-price{display:flex;align-items:flex-end;gap:0.4rem;margin-bottom:0.4rem;}
.plan-price .amount{font-family:var(--font-body);font-size:3rem;font-weight:800;color:var(--text-primary);line-height:1;letter-spacing:-0.03em;}
.plan-price .currency{font-size:1.2rem;color:var(--text-secondary);margin-bottom:0.4rem;}
.plan-price .period{font-size:0.85rem;color:var(--text-muted);margin-bottom:0.4rem;}
.plan-was{font-size:0.8rem;color:var(--text-muted);margin-bottom:0.25rem;}
.plan-was s{text-decoration:line-through;}
.plan-promo{font-size:0.78rem;color:var(--danger);font-weight:600;margin-bottom:1.25rem;}
.plan-desc{font-size:0.88rem;color:var(--text-secondary);margin-bottom:1.5rem;padding-bottom:1.5rem;border-bottom:1px solid var(--border);line-height:1.6;}
.plan-features{display:flex;flex-direction:column;gap:0.8rem;margin-bottom:1.75rem;}
.plan-feature{display:flex;align-items:flex-start;gap:0.7rem;font-size:0.88rem;}
.check-icon{width:18px;height:18px;border-radius:50%;background:var(--primary-light);border:1px solid rgba(37,99,235,0.2);display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px;color:var(--primary);font-size:0.6rem;font-weight:700;}
.cross-icon{width:18px;height:18px;border-radius:50%;background:var(--bg);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px;color:var(--text-muted);font-size:0.6rem;}
.plan-feature.included span{color:var(--text-primary);}
.plan-feature:not(.included) span{color:var(--text-muted);}
.plan-limit-note{background:var(--primary-light);border:1px solid rgba(37,99,235,0.15);border-radius:var(--radius);padding:0.6rem 0.85rem;font-size:0.78rem;color:var(--primary);margin-bottom:1.25rem;font-weight:500;}

/* ── PLATFORMS ── */
.platform-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.25rem;}
.platform-card{background:#fff;border:1.5px solid var(--border);border-radius:var(--radius-lg);padding:1.75rem;text-align:center;box-shadow:var(--shadow-sm);position:relative;transition:var(--transition);}
.platform-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px);}
.platform-icon{font-size:2.4rem;margin-bottom:0.9rem;}
.platform-card h3{font-size:1rem;margin-bottom:0.5rem;}
.platform-card p{font-size:0.85rem;margin-bottom:1.25rem;}
.coming-soon-overlay{position:absolute;inset:0;background:rgba(255,255,255,0.75);border-radius:var(--radius-lg);display:flex;align-items:center;justify-content:center;backdrop-filter:blur(2px);}

/* ── TESTIMONIALS ── */
.testimonials-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.25rem;}
.testimonial-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);padding:1.75rem;box-shadow:var(--shadow-sm);transition:var(--transition);}
.testimonial-card:hover{box-shadow:var(--shadow-md);}
.stars{color:#f59e0b;font-size:0.85rem;margin-bottom:0.9rem;letter-spacing:1px;}
.testimonial-text{font-size:0.92rem;color:var(--text-secondary);margin-bottom:1.25rem;font-style:italic;line-height:1.7;}
.testimonial-author{display:flex;align-items:center;gap:0.75rem;}
.author-avatar{width:38px;height:38px;border-radius:50%;background:var(--primary-light);border:1.5px solid rgba(37,99,235,0.15);display:flex;align-items:center;justify-content:center;font-size:0.9rem;}
.author-name{font-weight:600;font-size:0.88rem;color:var(--text-primary);}
.author-role{font-size:0.75rem;color:var(--text-muted);}

/* ── FAQ ── */
.faq-list{max-width:720px;margin:0 auto;display:flex;flex-direction:column;gap:0;}
.faq-item{border-bottom:1px solid var(--border);}
.faq-item:first-child{border-top:1px solid var(--border);}
.faq-question{width:100%;display:flex;align-items:center;justify-content:space-between;padding:1.1rem 0;font-family:var(--font-body);font-size:0.95rem;font-weight:600;color:var(--text-primary);text-align:left;background:none;border:none;cursor:pointer;gap:1rem;transition:var(--transition);}
.faq-question:hover{color:var(--primary);}
.faq-icon{width:22px;height:22px;border-radius:50%;border:1.5px solid var(--border-dark);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:0.8rem;color:var(--text-secondary);transition:var(--transition);}
.faq-item.open .faq-icon{border-color:var(--primary);color:var(--primary);transform:rotate(45deg);}
.faq-answer{max-height:0;overflow:hidden;transition:max-height 0.35s ease,padding 0.25s ease;}
.faq-answer-inner{padding:0 0 1.1rem;font-size:0.9rem;color:var(--text-secondary);line-height:1.75;}

/* ── CTA BANNER ── */
.cta-banner{background:var(--primary);border-radius:var(--radius-xl);padding:clamp(3rem,6vw,4.5rem) clamp(2rem,5vw,4rem);text-align:center;position:relative;overflow:hidden;}
.cta-banner::before{content:'';position:absolute;top:-80px;right:-80px;width:320px;height:320px;border-radius:50%;background:rgba(255,255,255,0.06);}
.cta-banner::after{content:'';position:absolute;bottom:-60px;left:-60px;width:240px;height:240px;border-radius:50%;background:rgba(255,255,255,0.04);}
.cta-banner h2{color:#fff;margin-bottom:0.75rem;position:relative;z-index:1;}
.cta-banner p{color:rgba(255,255,255,0.8);margin-bottom:2rem;position:relative;z-index:1;font-size:1.05rem;}
.cta-actions{display:flex;gap:0.75rem;justify-content:center;flex-wrap:wrap;position:relative;z-index:1;}
.btn-white{background:#fff;color:var(--primary);border-color:#fff;}
.btn-white:hover{background:#f8faff;box-shadow:0 4px 16px rgba(0,0,0,0.12);transform:translateY(-1px);}
.btn-outline-white{background:transparent;border-color:rgba(255,255,255,0.5);color:#fff;}
.btn-outline-white:hover{background:rgba(255,255,255,0.1);border-color:#fff;}

/* ── FOOTER ── */
.site-footer{background:#fff;border-top:1px solid var(--border);padding:clamp(3rem,6vw,4.5rem) 0 1.75rem;}
.footer-grid{display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:3rem;margin-bottom:3rem;}
.footer-brand p{font-size:0.875rem;margin-top:0.9rem;max-width:240px;color:var(--text-secondary);}
.footer-col h4{font-size:0.78rem;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;color:var(--text-primary);margin-bottom:1rem;}
.footer-col ul{display:flex;flex-direction:column;gap:0.6rem;}
.footer-col ul li a{font-size:0.875rem;color:var(--text-secondary);transition:var(--transition);}
.footer-col ul li a:hover{color:var(--primary);}
.footer-bottom{padding-top:1.75rem;border-top:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:0.75rem;}
.footer-bottom p{font-size:0.8rem;color:var(--text-muted);}
.footer-legal{display:flex;gap:1.5rem;}
.footer-legal a{font-size:0.8rem;color:var(--text-muted);transition:var(--transition);}
.footer-legal a:hover{color:var(--text-secondary);}
.footer-platform-badges{display:flex;gap:0.5rem;margin-top:1rem;flex-wrap:wrap;}
.platform-badge{font-size:0.72rem;font-weight:600;padding:0.25rem 0.7rem;border-radius:100px;background:var(--bg);border:1px solid var(--border);color:var(--text-secondary);}
.platform-badge.active{background:var(--primary-light);border-color:rgba(37,99,235,0.2);color:var(--primary);}
@media(max-width:900px){.footer-grid{grid-template-columns:1fr 1fr;}.footer-brand{grid-column:1/-1;}}
@media(max-width:480px){.footer-grid{grid-template-columns:1fr;}}

/* ── PAGE HEADER ── */
.page-header{padding:clamp(7rem,12vw,9rem) 0 clamp(3rem,5vw,4rem);background:#fff;border-bottom:1px solid var(--border);text-align:center;}
.page-header h1{margin-bottom:0.75rem;}
.page-header p{font-size:1.05rem;max-width:520px;margin:0 auto;}

/* ── BLOG ── */
.blog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1.5rem;}
.blog-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm);transition:var(--transition);}
.blog-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px);}
.blog-thumb{height:180px;background:var(--bg);display:flex;align-items:center;justify-content:center;font-size:2.5rem;border-bottom:1px solid var(--border);}
.blog-body{padding:1.25rem;}
.blog-meta{display:flex;align-items:center;gap:0.6rem;margin-bottom:0.6rem;}
.blog-tag{font-size:0.68rem;font-weight:700;padding:0.2rem 0.65rem;border-radius:100px;background:var(--primary-light);color:var(--primary);border:1px solid rgba(37,99,235,0.15);}
.blog-date{font-size:0.75rem;color:var(--text-muted);}
.blog-body h3{font-size:0.95rem;margin-bottom:0.5rem;transition:var(--transition);}
.blog-card:hover .blog-body h3{color:var(--primary);}
.blog-body p{font-size:0.84rem;}
.blog-read-more{display:inline-flex;align-items:center;gap:0.35rem;margin-top:0.85rem;font-size:0.82rem;font-weight:600;color:var(--primary);transition:var(--transition);}
.blog-read-more:hover{gap:0.55rem;}

/* ── CONTACT ── */
.contact-grid{display:grid;grid-template-columns:1fr 1.4fr;gap:4rem;align-items:start;}
.contact-info{display:flex;flex-direction:column;gap:1.25rem;}
.contact-detail{display:flex;gap:0.9rem;align-items:flex-start;}
.contact-icon{width:40px;height:40px;border-radius:var(--radius);background:var(--primary-light);border:1px solid rgba(37,99,235,0.15);display:flex;align-items:center;justify-content:center;font-size:1rem;flex-shrink:0;}
.contact-detail h4{font-size:0.875rem;margin-bottom:0.2rem;}
.contact-detail p{font-size:0.84rem;margin:0;}
.contact-form{display:flex;flex-direction:column;gap:1rem;}
.form-group{display:flex;flex-direction:column;gap:0.35rem;}
.form-group label{font-size:0.78rem;font-weight:700;color:var(--text-primary);}
.form-group input,.form-group textarea,.form-group select{background:#fff;border:1.5px solid var(--border-dark);border-radius:var(--radius);padding:0.7rem 0.9rem;color:var(--text-primary);font-family:var(--font-body);font-size:0.9rem;outline:none;transition:var(--transition);box-shadow:var(--shadow-sm);}
.form-group input:focus,.form-group textarea:focus,.form-group select:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(37,99,235,0.1);}
.form-group textarea{resize:vertical;min-height:130px;}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem;}
@media(max-width:760px){.contact-grid{grid-template-columns:1fr;gap:2.5rem;}.form-row{grid-template-columns:1fr;}}

/* ── ABOUT ── */
.about-intro{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center;}
.about-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:2rem;}
.stat-item{text-align:center;padding:1.25rem;background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);}
.stat-value{font-family:var(--font-body);font-size:2rem;font-weight:800;color:var(--primary);letter-spacing:-0.03em;}
.stat-label{font-size:0.78rem;color:var(--text-muted);margin-top:0.2rem;font-weight:500;}
.values-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.25rem;}
@media(max-width:768px){.about-intro{grid-template-columns:1fr;gap:2rem;}}

/* ── LEGAL ── */
.legal-content{max-width:720px;margin:0 auto;padding:clamp(3rem,6vw,5rem) 0;}
.legal-content h2{font-size:1.3rem;margin:2.5rem 0 0.85rem;color:var(--primary);}
.legal-content h3{font-size:1.05rem;margin:1.5rem 0 0.65rem;}
.legal-content p{margin-bottom:0.9rem;font-size:0.93rem;}
.legal-content ul{padding-left:1.5rem;list-style:disc;display:flex;flex-direction:column;gap:0.45rem;margin-bottom:1rem;}
.legal-content ul li{font-size:0.9rem;color:var(--text-secondary);}

/* ── SCROLL ANIMATIONS ── */
.reveal{opacity:0;transform:translateY(24px);transition:opacity 0.55s ease,transform 0.55s ease;}
.reveal.visible{opacity:1;transform:translateY(0);}

/* ── TOAST ── */
#toast-container{position:fixed;bottom:1.5rem;right:1.5rem;z-index:999;display:flex;flex-direction:column;gap:0.5rem;}
.toast{background:#fff;border:1px solid var(--border);border-radius:10px;padding:0.7rem 1rem;font-size:0.85rem;display:flex;align-items:center;gap:0.6rem;box-shadow:var(--shadow-lg);animation:slideIn 0.2s ease;min-width:200px;}
.toast.success{border-color:#bbf7d0;}
.toast.error{border-color:#fecaca;}
@keyframes slideIn{from{opacity:0;transform:translateX(14px);}to{opacity:1;transform:translateX(0);}}

/* ── UTILITIES ── */
.mt-2{margin-top:2rem;}.mt-3{margin-top:3rem;}.mb-2{margin-bottom:2rem;}
.grid-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.5rem;}
.grid-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.25rem;}

/* ── SOCIAL LINKS ── */
.social-link{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:8px;border:1px solid var(--border);color:var(--text-secondary);transition:var(--transition);}
.social-link:hover{color:var(--primary);border-color:var(--primary-mid);background:var(--primary-light);}

/* ══════════════════════════════════════════════
   PREMIUM GLASS BUTTON EFFECT
   Shimmering edges, depth, and glass refraction
   ══════════════════════════════════════════════ */

/* Primary button — glass shimmer effect */
.btn-primary {
  position: relative;
  overflow: hidden;
  background: var(--primary);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.25) inset,
    0 -1px 0 rgba(0,0,0,0.15) inset,
    0 2px 8px rgba(37,99,235,0.35),
    0 1px 3px rgba(37,99,235,0.25);
  border-color: rgba(37,99,235,0.9);
  transition: all 0.25s cubic-bezier(0.4,0,0.2,1);
}

/* Glass shine overlay */
.btn-primary::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 60%; height: 100%;
  background: linear-gradient(
    105deg,
    transparent 40%,
    rgba(255,255,255,0.18) 50%,
    transparent 60%
  );
  transition: left 0.5s cubic-bezier(0.4,0,0.2,1);
  pointer-events: none;
}

/* Top edge shine — simulates glass refraction */
.btn-primary::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 45%;
  background: linear-gradient(
    to bottom,
    rgba(255,255,255,0.18) 0%,
    rgba(255,255,255,0.04) 100%
  );
  border-radius: var(--radius) var(--radius) 0 0;
  pointer-events: none;
}

.btn-primary:hover {
  background: var(--primary-dark);
  transform: translateY(-2px);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.2) inset,
    0 -1px 0 rgba(0,0,0,0.2) inset,
    0 8px 20px rgba(37,99,235,0.4),
    0 3px 8px rgba(37,99,235,0.3);
}

/* Shimmer sweep on hover */
.btn-primary:hover::before {
  left: 150%;
}

.btn-primary:active {
  transform: translateY(0);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.12) inset,
    0 2px 4px rgba(37,99,235,0.2);
}

/* White button (on dark CTA) — same glass effect */
.btn-white {
  position: relative;
  overflow: hidden;
  background: #ffffff;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.9) inset,
    0 -1px 0 rgba(0,0,0,0.08) inset,
    0 2px 8px rgba(0,0,0,0.15),
    0 1px 3px rgba(0,0,0,0.1);
  border-color: rgba(255,255,255,0.9);
}

.btn-white::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 60%; height: 100%;
  background: linear-gradient(
    105deg,
    transparent 40%,
    rgba(255,255,255,0.6) 50%,
    transparent 60%
  );
  transition: left 0.5s cubic-bezier(0.4,0,0.2,1);
  pointer-events: none;
}

.btn-white:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.2), 0 3px 8px rgba(0,0,0,0.12);
}

.btn-white:hover::before { left: 150%; }

/* Outline button — subtle glass border effect */
.btn-outline {
  position: relative;
  overflow: hidden;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.8) inset,
    0 1px 3px rgba(0,0,0,0.06);
}

.btn-outline::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 60%; height: 100%;
  background: linear-gradient(
    105deg,
    transparent 40%,
    rgba(37,99,235,0.07) 50%,
    transparent 60%
  );
  transition: left 0.5s cubic-bezier(0.4,0,0.2,1);
  pointer-events: none;
}

.btn-outline:hover::before { left: 150%; }

/* Button with lg modifier preserves glass */
.btn-lg.btn-primary { border-radius: var(--radius-lg); }
.btn-lg.btn-primary::after { border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.btn-lg.btn-outline { border-radius: var(--radius-lg); }
.btn-lg.btn-white { border-radius: var(--radius-lg); }