/* ============================================
   Kay IA — Design System v2
   Swiss Modernism · Premium · Kayliss Brand
   ============================================ */

:root {
  --brand:       #0080FF;
  --brand-hover: #0066DB;
  --brand-light: #E6F3FF;
  --deep:        #001E3D;
  --deep-light:  #002D5C;
  --bg:          #F8FAFC;
  --bg-alt:      #EDF2F7;
  --white:       #FFFFFF;
  --text:        #1A202C;
  --text-muted:  #5A6D80;
  --border:      #E2E8F0;
  --success:     #0CAF60;
  --radius:      6px;
  --radius-lg:   12px;
  --shadow:      0 1px 3px rgba(0,30,61,0.06);
  --shadow-md:   0 4px 16px rgba(0,30,61,0.08);
  --shadow-lg:   0 12px 40px rgba(0,30,61,0.10);
  --font:        'Inter', -apple-system, sans-serif;
  --max-w:       1240px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:16px;-webkit-font-smoothing:antialiased}
body{font-family:var(--font);color:var(--text);background:var(--bg);line-height:1.6}

h1,h2,h3,h4{font-weight:700;line-height:1.15;color:var(--deep);letter-spacing:-0.015em}
h1{font-size:clamp(2.5rem,5.5vw,4rem)}
h2{font-size:clamp(1.8rem,3.5vw,2.75rem)}
h3{font-size:clamp(1.25rem,2.5vw,1.5rem)}
h4{font-size:1.1rem}
p{margin-bottom:1rem;color:var(--text-muted)}

a{color:var(--brand);text-decoration:none}
a:hover{color:var(--brand-hover)}

.container{width:100%;max-width:var(--max-w);margin:0 auto;padding:0 1.5rem}

/* Nav */
.nav{position:fixed;top:0;left:0;right:0;z-index:1000;background:rgba(255,255,255,0.88);backdrop-filter:blur(16px);border-bottom:1px solid var(--border);transition:box-shadow .3s}
.nav.scrolled{box-shadow:var(--shadow-md)}
.nav .container{display:flex;align-items:center;justify-content:space-between;height:68px}
.nav-logo{font-weight:800;font-size:1.3rem;color:var(--deep);display:flex;align-items:center;gap:.5rem}
.nav-logo svg{width:32px;height:32px}
.nav-links{display:flex;gap:2rem;list-style:none}
.nav-links a{color:var(--text-muted);font-weight:500;font-size:.88rem;position:relative;padding:.25rem 0}
.nav-links a::after{content:'';position:absolute;bottom:0;left:0;width:0;height:2px;background:var(--brand);transition:width .25s}
.nav-links a:hover,.nav-links a.active{color:var(--brand)}
.nav-links a:hover::after,.nav-links a.active::after{width:100%}
.nav-cta{background:var(--deep);color:var(--white)!important;padding:.55rem 1.4rem!important;border-radius:var(--radius);font-weight:600;transition:background .2s!important}
.nav-cta::after{display:none!important}
.nav-cta:hover{background:var(--brand)!important}

.hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:4px;background:none;border:none}
.hamburger span{display:block;width:22px;height:2px;background:var(--deep);transition:.3s}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.9rem 1.8rem;border-radius:var(--radius);font-weight:600;font-size:.95rem;cursor:pointer;border:none;transition:all .2s;text-decoration:none}
.btn-primary{background:var(--brand);color:var(--white)}.btn-primary:hover{background:var(--brand-hover);color:var(--white)}
.btn-dark{background:var(--deep);color:var(--white)}.btn-dark:hover{background:var(--deep-light);color:var(--white)}
.btn-outline{background:transparent;color:var(--brand);border:2px solid var(--brand)}.btn-outline:hover{background:var(--brand);color:var(--white)}
.btn-white{background:var(--white);color:var(--brand);box-shadow:var(--shadow)}.btn-white:hover{background:var(--bg-alt);color:var(--brand-hover)}
.btn-lg{padding:1.1rem 2.4rem;font-size:1rem}

/* Sections */
.section{padding:clamp(4rem,8vw,7rem) 0}
.section-label{display:inline-flex;align-items:center;gap:.5rem;font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--brand);margin-bottom:.75rem}
.section-label::before{content:'';display:block;width:8px;height:8px;border-radius:50%;background:var(--brand)}
.section-title{margin-bottom:1rem}
.section-subtitle{font-size:1.1rem;color:var(--text-muted);max-width:540px;line-height:1.65}

/* Hero */
.hero{min-height:90vh;display:flex;align-items:center;background:var(--white);position:relative;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:3rem;align-items:center;position:relative;z-index:1}
.hero h1{font-size:clamp(2.5rem,5vw,3.75rem);line-height:1.1}
.hero h1 span{color:var(--brand)}
.hero p{font-size:1.15rem;color:var(--text-muted);max-width:480px;margin:1.25rem 0 2rem}
.hero-visual{position:relative;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-lg)}
.hero-visual img{width:100%;height:auto;display:block;object-fit:cover;aspect-ratio:4/3}

/* Hero stats row */
.hero-stats{display:flex;gap:2.5rem;margin-top:3rem;padding-top:2rem;border-top:1px solid var(--border)}
.hero-stat{text-align:left}
.hero-stat-number{font-size:2.25rem;font-weight:800;color:var(--deep);line-height:1}
.hero-stat-label{font-size:.82rem;color:var(--text-muted);margin-top:.3rem}

/* Stats bar */
.stats-bar{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem;padding:2.5rem;background:var(--white);border:1px solid var(--border);border-radius:var(--radius-lg);margin-top:-3rem;position:relative;z-index:10;box-shadow:var(--shadow-lg)}
.stat-item{text-align:center}
.stat-number{font-size:2.5rem;font-weight:800;color:var(--deep)}
.stat-label{font-size:.85rem;color:var(--text-muted);margin-top:.3rem}

/* Visual cards */
.visual-card{background:var(--white);border:1px solid var(--border);border-radius:var(--radius-lg);padding:2.5rem 2rem;text-align:center;transition:all .3s;position:relative;overflow:hidden}
.visual-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:var(--brand)}
.visual-card-icon{display:flex;justify-content:center;margin-bottom:1.5rem}
.visual-card-icon svg{width:56px;height:56px}
.visual-card h3{font-size:1.2rem;margin-bottom:.5rem}
.visual-card p{font-size:.9rem;line-height:1.6}

.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem}

/* Packs */
.pack{background:var(--white);border:1px solid var(--border);border-radius:var(--radius-lg);padding:2.5rem 2rem;position:relative;transition:all .3s;display:flex;flex-direction:column}
.pack:hover{box-shadow:var(--shadow-lg)}
.pack.featured{border-color:var(--brand);box-shadow:0 0 0 1px var(--brand),var(--shadow-lg)}
.pack-badge{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--brand);color:var(--white);padding:.3rem 1.2rem;border-radius:99px;font-size:.75rem;font-weight:700;white-space:nowrap;text-transform:uppercase;letter-spacing:.05em}
.pack-header{text-align:center;margin-bottom:1.5rem}
.pack-name{font-size:1.3rem;font-weight:700;color:var(--deep)}
.pack-price{font-size:3rem;font-weight:800;color:var(--deep);margin:.5rem 0;line-height:1}
.pack-price small{font-size:.9rem;font-weight:400;color:var(--text-muted);display:block}
.pack-features{list-style:none;flex:1;margin:1.5rem 0}
.pack-features li{padding:.6rem 0;border-bottom:1px solid var(--border);font-size:.9rem;display:flex;align-items:center;gap:.6rem}
.pack-features li::before{content:'';width:18px;height:18px;background:var(--success);border-radius:50%;flex-shrink:0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='white' d='M12.2 4.8a.6.6 0 0 1 0 .8l-5.5 5.5a.6.6 0 0 1-.8 0L3.8 9a.6.6 0 0 1 .8-.8l1.7 1.7L11.4 4.8a.6.6 0 0 1 .8 0z'/%3E%3C/svg%3E");background-size:14px;background-position:center;background-repeat:no-repeat}
.pack .btn{margin-top:auto;justify-content:center;width:100%}
.disclaimer{text-align:center;font-size:.8rem;color:var(--text-muted);padding-top:1.5rem;margin-top:2rem;border-top:1px solid var(--border)}

/* Dark section */
.dark-section{background:var(--deep);color:var(--white)}
.dark-section h2,.dark-section h3,.dark-section .stat-number{color:var(--white)}
.dark-section p,.dark-section .stat-label{color:rgba(255,255,255,0.7)}
.dark-section .section-label::before{background:var(--brand)}
.dark-section .visual-card{background:rgba(255,255,255,0.04);border-color:rgba(255,255,255,0.08)}
.dark-section .visual-card h3{color:var(--white)}
.dark-section .visual-card:hover{background:rgba(255,255,255,0.08)}

/* Use case alternating */
.use-case{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center;padding:2rem 0}
.use-case+.use-case{border-top:1px solid var(--border);padding-top:4rem}
.use-case:nth-child(even) .use-case-img{order:-1}
.use-case-img{background:var(--deep);border-radius:var(--radius-lg);overflow:hidden;position:relative;min-height:260px}
.use-case-img img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.use-case-img .use-case-stat{position:relative;z-index:2;text-align:center;padding:2.5rem;background:linear-gradient(180deg,rgba(0,30,61,0) 0%,rgba(0,30,61,0.85) 100%);display:flex;flex-direction:column;justify-content:flex-end;height:100%}
.use-case-stat .big{font-size:3.5rem;font-weight:800;color:var(--white);line-height:1}
.use-case-stat .label{font-size:.9rem;color:rgba(255,255,255,0.7);margin-top:.5rem}
.use-case-content .section-label{margin-bottom:.5rem}

/* Testimonials */
.testimonial{border:1px solid var(--border);border-radius:var(--radius-lg);padding:2rem;background:var(--white);transition:all .3s}
.testimonial:hover{box-shadow:var(--shadow-md)}
.testimonial-stars{color:#F59E0B;font-size:1rem;letter-spacing:.1em;margin-bottom:1rem}
.testimonial-text{font-size:.95rem;color:var(--text-muted);font-style:italic;line-height:1.7;margin-bottom:1.5rem}
.testimonial-author{display:flex;align-items:center;gap:.75rem}
.testimonial-avatar{width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,var(--brand),var(--deep));display:flex;align-items:center;justify-content:center;color:white;font-weight:700;font-size:.9rem}
.testimonial-name{font-weight:700;font-size:.9rem;color:var(--deep)}
.testimonial-role{font-size:.8rem;color:var(--text-muted)}

/* Contact */
.contact-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:4rem}
.form-group{margin-bottom:1.25rem}
.form-group label{display:block;font-size:.85rem;font-weight:600;color:var(--deep);margin-bottom:.4rem}
.form-group input,.form-group select,.form-group textarea{width:100%;padding:.85rem 1rem;border:1px solid var(--border);border-radius:var(--radius);font-family:var(--font);font-size:.93rem;background:var(--white);transition:border-color .2s}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(0,128,255,0.08)}
.info-card{background:var(--brand-light);border-radius:var(--radius-lg);padding:2rem;margin-top:1.5rem}
.info-card h4{color:var(--brand);margin-bottom:.5rem}
.info-card p{font-size:.9rem;margin-bottom:.25rem}

/* Footer */
.footer{background:var(--deep);color:var(--white);padding:4rem 0 2rem}
.footer a{color:rgba(255,255,255,0.65)}.footer a:hover{color:var(--white)}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:3rem}
.footer h4{color:var(--white);margin-bottom:1rem;font-size:.95rem}
.footer p,.footer li{color:rgba(255,255,255,0.55);font-size:.88rem;line-height:1.8}
.footer-links{list-style:none}
.footer-bottom{border-top:1px solid rgba(255,255,255,0.08);margin-top:2.5rem;padding-top:1.5rem;display:flex;justify-content:space-between;font-size:.82rem;color:rgba(255,255,255,0.35)}

/* Page header */
.page-header{background:var(--white);border-bottom:1px solid var(--border);padding:120px 0 3rem;text-align:center}
.page-header h1{font-size:clamp(2rem,4vw,3.25rem)}
.page-header p{max-width:560px;margin:.75rem auto 0;font-size:1.05rem}

/* Process */
.process-step{display:grid;grid-template-columns:60px 1fr;gap:1.5rem;padding:1.5rem 0;border-bottom:1px solid var(--border);align-items:start}
.process-step:last-child{border-bottom:none}
.process-num{width:48px;height:48px;border-radius:50%;background:var(--brand-light);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1.1rem;color:var(--brand);flex-shrink:0}
.process-step h4{margin-bottom:.25rem}
.process-step p{font-size:.9rem;margin-bottom:0}

/* Animation */
[data-animate]{will-change:transform,opacity}

/* CTA bar */
.cta-bar{background:linear-gradient(135deg,var(--deep),var(--deep-light));padding:4rem 0;text-align:center;border-radius:var(--radius-lg);margin:0 1.5rem;position:relative;overflow:hidden}
.cta-bar::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 70% 30%,rgba(0,128,255,0.15),transparent)}
.cta-bar>*{position:relative}
.cta-bar h2{color:var(--white);font-size:clamp(1.8rem,3vw,2.5rem)}
.cta-bar p{color:rgba(255,255,255,0.7);max-width:500px;margin:1rem auto 1.5rem}

/* Responsive */
@media(max-width:1024px){
  .grid-3{grid-template-columns:repeat(2,1fr)}
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .hero-grid{grid-template-columns:1fr}
  .hero-visual{display:none}
  .contact-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
  .use-case{grid-template-columns:1fr;gap:2rem}
  .use-case:nth-child(even) .use-case-img{order:0}
  .stats-bar{grid-template-columns:repeat(2,1fr);margin-top:2rem}
}
@media(max-width:768px){
  .hamburger{display:flex}
  .nav-links{position:fixed;top:68px;left:0;right:0;background:var(--white);flex-direction:column;padding:1.5rem;border-bottom:1px solid var(--border);transform:translateY(-110%);opacity:0;pointer-events:none;transition:all .3s}
  .nav-links.open{transform:translateY(0);opacity:1;pointer-events:all}
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
  .hero-stats{flex-wrap:wrap;gap:1.5rem}
  .cta-bar{margin:0}
}