/* ============================================================
   IWV Digital Solutions — Main Stylesheet v2.0
   Design: Trust-forward, privacy-first, professional
   Colors: Deep navy + emerald accent + clean whites
   Updated: April 2, 2026 for commercial launch
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@300;400;500;600;700;800&family=DM+Sans:ital,wght@0,300..700;1,300..700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  --navy-950:#0A0F1C; --navy-900:#0F1B2D; --navy-800:#1A2744; --navy-700:#1E3A5F; --navy-600:#2563EB;
  --emerald-500:#10B981; --emerald-400:#34D399; --emerald-600:#059669; --emerald-glow:rgba(16,185,129,0.12);
  --cyan-400:#22D3EE; --amber-400:#FBBF24; --rose-400:#FB7185;
  --white:#FFF; --gray-50:#F8FAFC; --gray-100:#F1F5F9; --gray-200:#E2E8F0; --gray-300:#CBD5E1;
  --gray-400:#94A3B8; --gray-500:#64748B; --gray-600:#475569; --gray-700:#334155; --gray-800:#1E293B;
  --success:#10B981; --warning:#F59E0B; --error:#EF4444; --info:#3B82F6;
  --font-display:'Sora',sans-serif; --font-body:'DM Sans',sans-serif; --font-mono:'JetBrains Mono',monospace;
  --max-width:1200px; --header-height:64px; --radius:8px; --radius-lg:16px;
  --transition:250ms ease;
}

/* Reset */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--font-body);color:var(--gray-200);background:var(--navy-950);line-height:1.7;font-size:16px;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:var(--emerald-400);text-decoration:none;transition:color var(--transition)}
a:hover{color:var(--emerald-500)}
h1,h2,h3,h4,h5,h6{font-family:var(--font-display);color:var(--white);line-height:1.2;font-weight:600}
h1{font-size:clamp(2.2rem,5vw,3.5rem)} h2{font-size:clamp(1.6rem,3vw,2.4rem)} h3{font-size:clamp(1.2rem,2vw,1.6rem)}

/* Layout */
.container{width:100%;max-width:var(--max-width);margin:0 auto;padding:0 24px}
.section{padding:80px 0} .section-sm{padding:48px 0} .section-lg{padding:100px 0}
.grid{display:grid;gap:24px}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.text-center{text-align:center}

/* Navigation */
.site-nav{position:sticky;top:0;z-index:1000;background:rgba(10,15,28,0.92);backdrop-filter:blur(16px);border-bottom:1px solid rgba(255,255,255,0.06);height:var(--header-height)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:var(--header-height);max-width:var(--max-width);margin:0 auto;padding:0 24px}
.nav-logo{font-family:var(--font-display);font-weight:700;font-size:1.15rem;color:var(--white);display:flex;align-items:center;gap:10px}
.nav-logo span{color:var(--emerald-400)}
.nav-links{display:flex;gap:28px;align-items:center;list-style:none}
.nav-links a{color:var(--gray-300);font-size:0.9rem;font-weight:500;transition:color var(--transition)}
.nav-links a:hover,.nav-links a.active{color:var(--emerald-400)}
.nav-cta{background:var(--emerald-500);color:var(--navy-950)!important;padding:8px 20px;border-radius:var(--radius);font-weight:600;font-size:0.85rem;transition:background var(--transition)}
.nav-cta:hover{background:var(--emerald-400)}
.mobile-toggle{display:none;background:none;border:none;color:var(--white);font-size:1.5rem;cursor:pointer}

/* Hero */
.hero{padding:100px 0 80px;text-align:center;position:relative;overflow:hidden}
.hero::before{content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(ellipse at 50% 0%,rgba(16,185,129,0.06) 0%,transparent 60%);pointer-events:none}
.hero h1{margin-bottom:20px;position:relative} .hero h1 span{color:var(--emerald-400)}
.hero p{font-size:1.15rem;color:var(--gray-400);max-width:640px;margin:0 auto 32px}
.hero-badges{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:32px}
.badge{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border-radius:20px;font-size:0.8rem;font-weight:500;border:1px solid rgba(255,255,255,0.1);color:var(--gray-300);background:rgba(255,255,255,0.03)}
.badge--green{border-color:rgba(16,185,129,0.3);color:var(--emerald-400);background:var(--emerald-glow)}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 28px;border-radius:var(--radius);font-family:var(--font-display);font-weight:600;font-size:0.95rem;cursor:pointer;border:none;transition:all var(--transition)}
.btn--primary{background:var(--emerald-500);color:var(--navy-950)} .btn--primary:hover{background:var(--emerald-400);transform:translateY(-1px)}
.btn--secondary{background:rgba(255,255,255,0.06);color:var(--white);border:1px solid rgba(255,255,255,0.1)} .btn--secondary:hover{background:rgba(255,255,255,0.1);border-color:rgba(255,255,255,0.2)}
.btn--outline{background:transparent;color:var(--emerald-400);border:1px solid var(--emerald-500)} .btn--outline:hover{background:var(--emerald-glow)}
.btn-group{display:flex;gap:12px;flex-wrap:wrap}

/* Cards */
.card{background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);border-radius:var(--radius-lg);padding:32px;transition:all var(--transition)}
.card:hover{border-color:rgba(16,185,129,0.2);background:rgba(255,255,255,0.05);transform:translateY(-2px)}
.card h3{margin-bottom:12px} .card p{color:var(--gray-400);font-size:0.95rem}
.card-icon{width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;margin-bottom:16px;font-size:1.5rem}
.card-icon--green{background:var(--emerald-glow);color:var(--emerald-400)}
.card-icon--blue{background:rgba(37,99,235,0.12);color:var(--navy-600)}
.card-icon--amber{background:rgba(251,191,36,0.12);color:var(--amber-400)}
.card-icon--rose{background:rgba(251,113,133,0.12);color:var(--rose-400)}
.card-icon--cyan{background:rgba(34,211,238,0.12);color:var(--cyan-400)}

/* Product Cards */
.product-card{position:relative;overflow:hidden}
.product-card .badge-corner{position:absolute;top:16px;right:16px}
.product-card h3{font-size:1.3rem}
.product-card .product-desc{margin:8px 0 16px;min-height:48px}
.product-card .product-meta{display:flex;gap:16px;flex-wrap:wrap;margin-top:auto;font-size:0.82rem;color:var(--gray-500)}
.product-card .product-meta span{display:flex;align-items:center;gap:4px}

/* Pricing */
.pricing-card{text-align:center;padding:40px 32px}
.pricing-card.featured{border-color:var(--emerald-500);background:rgba(16,185,129,0.04);position:relative}
.pricing-card.featured::before{content:'BEST VALUE';position:absolute;top:0;left:50%;transform:translateX(-50%) translateY(-50%);background:var(--emerald-500);color:var(--navy-950);padding:4px 16px;border-radius:12px;font-size:0.7rem;font-weight:700;letter-spacing:0.05em}
.pricing-price{font-family:var(--font-display);font-size:2.8rem;font-weight:800;color:var(--white);margin:16px 0 4px}
.pricing-price span{font-size:0.9rem;font-weight:400;color:var(--gray-400)}
.pricing-period{color:var(--gray-500);font-size:0.85rem;margin-bottom:24px}
.pricing-features{list-style:none;text-align:left;margin-bottom:32px}
.pricing-features li{padding:8px 0;border-bottom:1px solid rgba(255,255,255,0.04);font-size:0.9rem;color:var(--gray-300);display:flex;align-items:flex-start;gap:8px}
.pricing-features li::before{content:'✓';color:var(--emerald-400);font-weight:700;flex-shrink:0}
.pricing-features li.locked::before{content:'🔒';color:var(--gray-500)}

/* Section headers */
.section-header{text-align:center;max-width:640px;margin:0 auto 48px}
.section-header p{color:var(--gray-400);margin-top:12px}
.section-label{display:inline-block;font-family:var(--font-display);font-size:0.75rem;font-weight:600;text-transform:uppercase;letter-spacing:0.12em;color:var(--emerald-400);margin-bottom:12px}

/* Feature grid */
.feature-row{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;padding:48px 0}
.feature-row:nth-child(even){direction:rtl} .feature-row:nth-child(even) > *{direction:ltr}
.feature-text h3{margin-bottom:12px} .feature-text p{color:var(--gray-400)}

/* Footer */
.site-footer{border-top:1px solid rgba(255,255,255,0.06);padding:48px 0 24px;background:var(--navy-950)}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:32px;margin-bottom:40px}
.footer-brand p{color:var(--gray-500);font-size:0.85rem;margin-top:8px;max-width:280px}
.footer-col h4{font-size:0.8rem;text-transform:uppercase;letter-spacing:0.1em;color:var(--gray-400);margin-bottom:16px}
.footer-col ul{list-style:none} .footer-col li{margin-bottom:10px}
.footer-col a{color:var(--gray-500);font-size:0.85rem} .footer-col a:hover{color:var(--emerald-400)}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:24px;border-top:1px solid rgba(255,255,255,0.04);font-size:0.8rem;color:var(--gray-600)}
.footer-bottom a{color:var(--gray-500)}

/* Page headers */
.page-header{padding:80px 0 40px;text-align:center;border-bottom:1px solid rgba(255,255,255,0.04)}
.page-header p{color:var(--gray-400);margin-top:12px;max-width:600px;margin-left:auto;margin-right:auto}

/* Tables */
.table-wrap{overflow-x:auto;margin:24px 0}
table{width:100%;border-collapse:collapse;font-size:0.9rem}
th{text-align:left;padding:12px 16px;background:rgba(255,255,255,0.03);color:var(--gray-300);font-weight:600;border-bottom:1px solid rgba(255,255,255,0.08)}
td{padding:12px 16px;border-bottom:1px solid rgba(255,255,255,0.04);color:var(--gray-400)}
tr:hover td{background:rgba(255,255,255,0.02)}

/* Legal pages */
.legal-content{max-width:800px;margin:0 auto;padding:40px 0}
.legal-content h2{margin-top:40px;margin-bottom:16px;padding-top:24px;border-top:1px solid rgba(255,255,255,0.06)}
.legal-content h3{margin-top:24px;margin-bottom:12px;font-size:1.1rem}
.legal-content p,.legal-content li{color:var(--gray-300);line-height:1.8}
.legal-content ul{padding-left:24px;margin:12px 0}

/* Forms */
.form-group{margin-bottom:20px}
.form-group label{display:block;font-size:0.85rem;font-weight:500;color:var(--gray-300);margin-bottom:6px}
.form-group input,.form-group textarea,.form-group select{width:100%;padding:12px 16px;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.1);border-radius:var(--radius);color:var(--white);font-family:var(--font-body);font-size:0.95rem;transition:border-color var(--transition)}
.form-group input:focus,.form-group textarea:focus{outline:none;border-color:var(--emerald-500)}
.form-group textarea{min-height:120px;resize:vertical}

/* Coming soon badge */
.coming-soon{display:inline-block;padding:3px 10px;border-radius:12px;font-size:0.7rem;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;background:rgba(251,191,36,0.12);color:var(--amber-400);border:1px solid rgba(251,191,36,0.2)}

/* Free badge */
.free-badge{display:inline-block;padding:3px 10px;border-radius:12px;font-size:0.7rem;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;background:var(--emerald-glow);color:var(--emerald-400);border:1px solid rgba(16,185,129,0.2)}

/* Responsive */
@media(max-width:768px){
  .nav-links{display:none;position:absolute;top:var(--header-height);left:0;right:0;background:var(--navy-900);flex-direction:column;padding:16px 24px;gap:12px;border-bottom:1px solid rgba(255,255,255,0.06)}
  .nav-links.open{display:flex}
  .mobile-toggle{display:block}
  .footer-grid{grid-template-columns:1fr 1fr}
  .feature-row{grid-template-columns:1fr;gap:32px}
  .feature-row:nth-child(even){direction:ltr}
  .hero{padding:60px 0 40px}
  .section{padding:48px 0}
  .btn-group{flex-direction:column}
}
@media(max-width:480px){
  .footer-grid{grid-template-columns:1fr}
}

/* ============================================================
   Cookie Consent Banner
   ============================================================ */
.cookie-banner{position:fixed;bottom:0;left:0;right:0;z-index:9999;background:var(--navy-900);border-top:1px solid rgba(16,185,129,0.2);padding:16px 0;box-shadow:0 -4px 24px rgba(0,0,0,0.4)}
.cookie-inner{max-width:var(--max-width);margin:0 auto;padding:0 24px;display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.cookie-inner p{flex:1;min-width:280px;font-size:0.85rem;color:var(--gray-300);margin:0;line-height:1.5}
.cookie-actions{display:flex;gap:10px;flex-shrink:0}
.btn--sm{padding:8px 18px;font-size:0.82rem}

/* ============================================================
   Article Styles
   ============================================================ */
.article-grid{display:grid;gap:24px;grid-template-columns:repeat(auto-fit,minmax(340px,1fr))}
.article-card{display:flex;flex-direction:column}
.article-card .card{display:flex;flex-direction:column;height:100%}
.article-meta{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-bottom:12px}
.article-tag{display:inline-block;padding:2px 10px;border-radius:10px;font-size:0.7rem;font-weight:600;text-transform:uppercase;letter-spacing:0.04em;margin-right:4px}
.article-tag--philosophy{background:rgba(34,211,238,0.12);color:var(--cyan-400);border:1px solid rgba(34,211,238,0.2)}
.article-tag--product{background:var(--emerald-glow);color:var(--emerald-400);border:1px solid rgba(16,185,129,0.2)}
.article-tag--technical{background:rgba(37,99,235,0.12);color:#60A5FA;border:1px solid rgba(37,99,235,0.2)}
.article-tag--benchmark{background:rgba(251,191,36,0.12);color:var(--amber-400);border:1px solid rgba(251,191,36,0.2)}
.article-date{font-size:0.78rem;color:var(--gray-600)}
.article-card h3{margin-bottom:8px;font-size:1.15rem}
.article-card p{color:var(--gray-400);font-size:0.9rem;flex:1}
.article-card .read-more{margin-top:16px;color:var(--emerald-400);font-size:0.85rem;font-weight:500}
.article-card .read-more:hover{color:var(--emerald-500)}

.article-nav{display:flex;justify-content:space-between;align-items:center;padding:32px 0;margin-top:40px;border-top:1px solid rgba(255,255,255,0.06)}

/* Legal page improvements for stub pages */
.legal-content hr{border:none;border-top:1px solid rgba(255,255,255,0.06);margin:32px 0}

@media(max-width:768px){
  .cookie-inner{flex-direction:column;text-align:center}
  .article-grid{grid-template-columns:1fr}
}

/* ============================================================
   Articles
   ============================================================ */
.article-grid{display:grid;gap:24px}
.article-card{display:block;color:inherit;text-decoration:none}
.article-card:hover{border-color:rgba(16,185,129,0.3);transform:translateY(-2px)}
.article-card .article-meta{display:grid;grid-template-columns:1fr;gap:4px;align-items:start;margin-bottom:12px;font-size:0.78rem;color:var(--gray-500)}
.article-card .article-meta span{display:flex;align-items:center;gap:4px}
.article-card h3{color:var(--white);margin-bottom:8px;transition:color 250ms ease}
.article-card:hover h3{color:var(--emerald-400)}
.article-card p{color:var(--gray-400);font-size:0.92rem}
.article-tag{display:inline-block;padding:2px 10px;border-radius:12px;font-size:0.7rem;font-weight:600;text-transform:uppercase;letter-spacing:0.04em;border:1px solid rgba(255,255,255,0.08);color:var(--gray-400);background:rgba(255,255,255,0.03);margin-right:4px}
.article-tag--product{border-color:rgba(16,185,129,0.2);color:var(--emerald-400);background:var(--emerald-glow)}
.article-tag--engineering{border-color:rgba(37,99,235,0.2);color:var(--navy-600);background:rgba(37,99,235,0.12)}
.article-tag--benchmark{border-color:rgba(251,191,36,0.2);color:var(--amber-400);background:rgba(251,191,36,0.12)}

/* Article content (long-form) */
.article-content{max-width:800px;margin:0 auto;padding:40px 0}
.article-content h2{margin-top:48px;margin-bottom:16px;padding-top:24px;border-top:1px solid rgba(255,255,255,0.06)}
.article-content h3{margin-top:32px;margin-bottom:12px;font-size:1.15rem}
.article-content h4{margin-top:24px;margin-bottom:8px;font-size:1rem}
.article-content p,.article-content li{color:var(--gray-300);line-height:1.8;margin-bottom:24px}
.article-content ul,.article-content ol{padding-left:24px;margin:12px 0 20px}
.article-content li{margin-bottom:8px}
.article-content blockquote{border-left:3px solid var(--emerald-500);margin:24px 0;padding:12px 24px;background:rgba(16,185,129,0.04);border-radius:0 var(--radius) var(--radius) 0}
.article-content blockquote p{color:var(--gray-300);margin-bottom:0}
.article-content img{border-radius:var(--radius-lg);border:1px solid rgba(255,255,255,0.06);margin:24px 0;width:100%}
.article-content .img-caption{text-align:center;font-size:0.82rem;color:var(--gray-500);margin-top:-16px;margin-bottom:24px;font-style:italic}
.article-content code{font-family:var(--font-mono);background:rgba(255,255,255,0.06);padding:2px 6px;border-radius:4px;font-size:0.88rem;color:var(--emerald-400)}
.article-content pre{background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);border-radius:var(--radius);padding:20px;overflow-x:auto;margin:20px 0}
.article-content pre code{background:none;padding:0;font-size:0.85rem;color:var(--gray-300)}
.article-content table{width:100%;border-collapse:collapse;margin:20px 0}
.article-content th{text-align:left;padding:10px 14px;background:rgba(255,255,255,0.03);color:var(--gray-300);font-weight:600;border-bottom:1px solid rgba(255,255,255,0.08);font-size:0.88rem}
.article-content td{padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.04);color:var(--gray-400);font-size:0.88rem}
.article-content strong{color:var(--white)}
.article-content em{color:var(--gray-300)}
.article-content hr{border:none;border-top:1px solid rgba(255,255,255,0.06);margin:32px 0}
.article-back{display:inline-flex;align-items:center;gap:6px;font-size:0.88rem;color:var(--gray-400);margin-bottom:24px}
.article-back:hover{color:var(--emerald-400)}