/* ================================================================
   ROVIONICS — Complete Design System v2
   Modern Gradient | Premium Typography | Fluid Motion
   ================================================================ */

/* --- Google Fonts loaded in HTML:
   Sora (500,600,700) — Headlines: geometric, modern, premium
   DM Sans (400,500,600) — Body: clean, highly legible
   ------------------------------------------------------------ */

:root {
  /* Palette */
  --navy-950: #060a14;
  --navy-900: #0b1120;
  --navy-800: #111a33;
  --navy-700: #1a2750;
  --accent-blue: #3b82f6;
  --accent-cyan: #06b6d4;
  --accent-teal: #14b8a6;
  --accent-indigo: #818cf8;
  --white: #f8fafc;
  --text-primary: #e2e8f0;
  --text-secondary: #94a3b8;
  --text-muted: #64748b;
  --card-bg: rgba(255,255,255,0.04);
  --card-border: rgba(255,255,255,0.07);
  --glass-border: rgba(255,255,255,0.12);
  --surface-hover: rgba(255,255,255,0.06);
  --gradient-brand: linear-gradient(135deg, #3b82f6, #06b6d4);
  --gradient-text: linear-gradient(135deg, #60a5fa, #22d3ee, #2dd4bf);
  --gradient-cta: linear-gradient(135deg, #3b82f6, #6366f1);

  /* Type */
  --font-head: 'Sora', system-ui, sans-serif;
  --font-body: 'DM Sans', system-ui, sans-serif;

  /* Spacing (8px) */
  --s1:0.25rem; --s2:0.5rem; --s3:0.75rem; --s4:1rem; --s5:1.25rem;
  --s6:1.5rem; --s8:2rem; --s10:2.5rem; --s12:3rem; --s16:4rem;
  --s20:5rem; --s24:6rem; --s32:8rem;

  /* Radius */
  --r-sm:0.375rem; --r-md:0.5rem; --r-lg:0.75rem; --r-xl:1rem; --r-2xl:1.5rem; --r-full:9999px;

  /* Motion */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 200ms;
  --dur-base: 350ms;
  --dur-slow: 600ms;

  --nav-h: 72px;
  --max-w: 1280px;
}

/* === Reset === */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;font-size:16px;-webkit-text-size-adjust:100%}
body{font-family:var(--font-body);color:var(--text-primary);background:var(--navy-950);line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid var(--accent-cyan);outline-offset:2px}

/* === Utility === */
.container{width:100%;max-width:var(--max-w);margin-inline:auto;padding-inline:var(--s6)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
.gradient-text{background:var(--gradient-text);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.section-eyebrow{font-family:var(--font-head);font-size:0.8rem;font-weight:600;letter-spacing:0.18em;text-transform:uppercase;color:var(--accent-cyan);margin-bottom:var(--s4)}
.section-title{font-family:var(--font-head);font-size:clamp(1.75rem,4vw,2.75rem);font-weight:700;line-height:1.15;letter-spacing:-0.02em;margin-bottom:var(--s6)}
.section-desc{font-size:1.1rem;color:var(--text-secondary);max-width:600px;line-height:1.75}
.section{padding:var(--s24) 0;position:relative}
.section-dark{background:var(--navy-900)}
.section-divider{height:1px;background:linear-gradient(90deg,transparent,var(--card-border),transparent)}

/* === Buttons === */
.btn{display:inline-flex;align-items:center;gap:var(--s2);padding:0.8rem 1.8rem;font-family:var(--font-head);font-size:0.875rem;font-weight:600;border:none;border-radius:var(--r-lg);cursor:pointer;transition:all var(--dur-base) var(--ease-out-expo);min-height:48px;text-decoration:none;letter-spacing:0.01em}
.btn-primary{background:var(--gradient-cta);color:#fff;box-shadow:0 4px 20px rgba(59,130,246,0.3)}
.btn-primary:hover{transform:translateY(-3px) scale(1.02);box-shadow:0 12px 35px rgba(59,130,246,0.35)}
.btn-primary:active{transform:translateY(-1px) scale(0.99)}
.btn-outline{background:transparent;color:var(--text-primary);border:1px solid var(--glass-border);backdrop-filter:blur(8px)}
.btn-outline:hover{background:var(--surface-hover);border-color:var(--accent-blue);transform:translateY(-2px)}

/* ============================================================
   NAVIGATION
   ============================================================ */
.nav,.header{position:fixed;top:0;left:0;right:0;height:var(--nav-h);z-index:1000;transition:all var(--dur-base) var(--ease-out-expo)}
.nav.scrolled,.header.scrolled{background:rgba(6,10,20,0.92);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:0 1px 0 rgba(255,255,255,0.04)}
.header.header-hidden{transform:translateY(-100%)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:100%}

/* Text logo */
.nav-logo{font-family:var(--font-head);font-size:1.35rem;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;display:flex;align-items:center;gap:var(--s2)}
.nav-logo .logo-accent{background:var(--gradient-text);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.nav-logo .logo-dot{width:8px;height:8px;border-radius:50%;background:var(--gradient-brand);display:inline-block;margin-left:2px;animation:pulse-dot 2.5s ease-in-out infinite}
@keyframes pulse-dot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.7)}}

.nav-links{display:flex;align-items:center;gap:var(--s1);list-style:none}
.nav-links a{display:block;padding:0.5rem 1rem;font-size:0.875rem;font-weight:500;color:var(--text-secondary);border-radius:var(--r-md);transition:all var(--dur-fast)}
.nav-links a:hover,.nav-links a.active{color:var(--text-primary);background:var(--surface-hover)}
.nav-cta-wrap{margin-left:var(--s4)}
.nav-toggle,.mobile-menu-toggle{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:8px;min-width:44px;min-height:44px;align-items:center;justify-content:center}
.nav-toggle span,.mobile-menu-toggle span{display:block;width:22px;height:2px;background:var(--text-primary);border-radius:2px;transition:all var(--dur-fast)}

/* ============================================================
   HERO SLIDER
   ============================================================ */
.hero{position:relative;height:100vh;height:100dvh;overflow:hidden}
.hero-slide{position:absolute;inset:0;opacity:0;transition:opacity 1.4s var(--ease-out-expo);will-change:opacity}
.hero-slide.active{opacity:1}
.hero-slide img{width:100%;height:100%;object-fit:cover;transform:scale(1.05);transition:transform 8s linear}
.hero-slide.active img{transform:scale(1)}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(135deg,rgba(6,10,20,0.82) 0%,rgba(6,10,20,0.55) 50%,rgba(6,10,20,0.3) 100%)}
.hero-content{position:relative;z-index:2;height:100%;display:flex;align-items:center;padding-top:var(--nav-h)}
.hero-inner{max-width:680px}
.hero-badge{display:inline-flex;align-items:center;gap:var(--s2);padding:0.4rem 1.1rem;background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.12);border-radius:var(--r-full);font-size:0.8rem;font-weight:500;color:var(--accent-cyan);margin-bottom:var(--s8);backdrop-filter:blur(8px)}
.hero h1{font-family:var(--font-head);font-size:clamp(2.2rem,5.5vw,4rem);font-weight:700;line-height:1.08;letter-spacing:-0.03em;margin-bottom:var(--s6)}
.hero h1 .line{display:block}
.hero p.hero-desc{font-size:clamp(1rem,1.8vw,1.2rem);color:rgba(255,255,255,0.7);line-height:1.7;margin-bottom:var(--s10);max-width:520px}
.hero-actions{display:flex;gap:var(--s4);flex-wrap:wrap}

/* Slide indicators */
.hero-indicators{position:absolute;bottom:var(--s10);left:50%;transform:translateX(-50%);z-index:5;display:flex;gap:var(--s3)}
.hero-dot{width:32px;height:3px;border-radius:var(--r-full);background:rgba(255,255,255,0.25);border:none;cursor:pointer;transition:all var(--dur-base);padding:0;min-height:auto}
.hero-dot.active{background:var(--accent-cyan);width:48px}

/* Hero stats bar */
.hero-stats{position:absolute;bottom:0;left:0;right:0;z-index:4;background:rgba(6,10,20,0.7);backdrop-filter:blur(16px);border-top:1px solid rgba(255,255,255,0.06);padding:var(--s6) 0}
.hero-stats-inner{display:flex;justify-content:center;gap:var(--s16)}
.hero-stat{text-align:center}
.hero-stat-val{font-family:var(--font-head);font-size:1.75rem;font-weight:700;background:var(--gradient-text);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.hero-stat-label{font-size:0.8rem;color:var(--text-muted);margin-top:var(--s1);letter-spacing:0.03em}

/* ============================================================
   GLASS CARDS
   ============================================================ */
.glass-card{background:var(--card-bg);border:1px solid var(--card-border);border-radius:var(--r-xl);padding:var(--s8);transition:all var(--dur-base) var(--ease-out-expo);position:relative;overflow:hidden}
.glass-card::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.08),transparent)}
.glass-card:hover{background:var(--surface-hover);border-color:rgba(59,130,246,0.15);transform:translateY(-6px);box-shadow:0 20px 60px rgba(0,0,0,0.3),0 0 40px rgba(59,130,246,0.08)}
.card-icon{width:52px;height:52px;border-radius:var(--r-lg);display:flex;align-items:center;justify-content:center;margin-bottom:var(--s5)}
.card-icon-blue{background:rgba(59,130,246,0.1);color:var(--accent-blue)}
.card-icon-cyan{background:rgba(6,182,212,0.1);color:var(--accent-cyan)}
.card-icon-teal{background:rgba(20,184,166,0.1);color:var(--accent-teal)}
.card-icon-indigo{background:rgba(129,140,248,0.1);color:var(--accent-indigo)}
.glass-card h3{font-family:var(--font-head);font-size:1.15rem;font-weight:600;margin-bottom:var(--s3);letter-spacing:-0.01em}
.glass-card p{font-size:0.9rem;color:var(--text-secondary);line-height:1.75}

/* Grids */
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s8)}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s8)}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s6)}

/* ============================================================
   SERVICE BLOCKS
   ============================================================ */
.service-block{padding:var(--s12) 0}
.service-block + .service-block{border-top:1px solid var(--card-border)}
.service-header{display:flex;align-items:flex-start;gap:var(--s6);margin-bottom:var(--s8)}
.service-num{font-family:var(--font-head);font-size:3rem;font-weight:700;background:var(--gradient-text);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1;opacity:.35;min-width:72px}
.service-items{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:var(--s3)}
.service-item{display:flex;align-items:center;gap:var(--s3);padding:var(--s3) var(--s4);border-radius:var(--r-md);transition:background var(--dur-fast)}
.service-item:hover{background:var(--surface-hover)}
.service-item::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--gradient-brand);flex-shrink:0}
.service-item span{font-size:0.9rem;color:var(--text-secondary)}

/* ============================================================
   COMPLIANCE BADGES
   ============================================================ */
.badge-row{display:flex;flex-wrap:wrap;gap:var(--s3)}
.badge{display:inline-flex;align-items:center;gap:var(--s2);padding:0.4rem 1rem;background:rgba(255,255,255,0.04);border:1px solid var(--glass-border);border-radius:var(--r-full);font-family:var(--font-head);font-size:0.8rem;font-weight:600;color:var(--accent-cyan);letter-spacing:0.04em;transition:all var(--dur-fast)}
.badge:hover{background:rgba(6,182,212,0.08);border-color:var(--accent-cyan)}

/* ============================================================
   CTA BANNER
   ============================================================ */
.cta-banner{position:relative;padding:var(--s16) var(--s8);border-radius:var(--r-2xl);overflow:hidden;text-align:center}
.cta-banner-bg{position:absolute;inset:0;background:linear-gradient(135deg,rgba(59,130,246,0.12),rgba(6,182,212,0.08));border:1px solid rgba(59,130,246,0.15);border-radius:var(--r-2xl)}
.cta-banner-content{position:relative;z-index:1}
.cta-banner h2{font-family:var(--font-head);font-size:clamp(1.5rem,3vw,2rem);font-weight:700;margin-bottom:var(--s4);letter-spacing:-0.02em}
.cta-banner p{color:var(--text-secondary);margin-bottom:var(--s8);max-width:460px;margin-inline:auto}

/* ============================================================
   PAGE HEADER (inner pages)
   ============================================================ */
.page-header{padding:calc(var(--nav-h) + var(--s16)) 0 var(--s16);position:relative;overflow:hidden}
.page-header-bg{position:absolute;inset:0;background:linear-gradient(135deg,var(--navy-950),var(--navy-800),var(--navy-950))}
.page-header-bg::before{content:'';position:absolute;top:-30%;right:-10%;width:500px;height:500px;background:radial-gradient(circle,rgba(59,130,246,0.08) 0%,transparent 70%);border-radius:50%}
.page-header-content{position:relative;z-index:1}

/* ============================================================
   FORMS
   ============================================================ */
.form-group{margin-bottom:var(--s5)}
.form-label{display:block;font-size:0.875rem;font-weight:500;color:var(--text-secondary);margin-bottom:var(--s2)}
.form-input,.form-select,.form-textarea{width:100%;padding:0.8rem 1rem;font-family:var(--font-body);font-size:1rem;color:var(--text-primary);background:rgba(255,255,255,0.03);border:1px solid var(--card-border);border-radius:var(--r-lg);transition:all var(--dur-fast);min-height:48px}
.form-input:focus,.form-select:focus,.form-textarea:focus{outline:none;border-color:var(--accent-blue);box-shadow:0 0 0 3px rgba(59,130,246,0.12)}
.form-textarea{min-height:140px;resize:vertical}
.form-select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%2394a3b8' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1rem center;padding-right:2.5rem}

/* ============================================================
   INDUSTRY CARDS
   ============================================================ */
.industry-card{position:relative;border-radius:var(--r-xl);overflow:hidden;background:var(--card-bg);border:1px solid var(--card-border);transition:all var(--dur-base) var(--ease-out-expo)}
.industry-card:hover{transform:translateY(-6px);box-shadow:0 20px 60px rgba(0,0,0,0.3),0 0 40px rgba(59,130,246,0.08);border-color:rgba(59,130,246,0.15)}
.industry-card-img{width:100%;height:180px;object-fit:cover}
.industry-card-body{padding:var(--s6) var(--s8) var(--s8)}
.industry-card-body h3{font-family:var(--font-head);font-size:1.15rem;font-weight:600;margin-bottom:var(--s3)}
.industry-card-body p{font-size:0.875rem;color:var(--text-secondary);line-height:1.7;margin-bottom:var(--s5)}

/* ============================================================
   FOOTER
   ============================================================ */
.footer{padding:var(--s16) 0 var(--s8);border-top:1px solid var(--card-border)}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:var(--s12);margin-bottom:var(--s12)}
.footer-brand p{color:var(--text-secondary);font-size:0.875rem;line-height:1.7;margin-top:var(--s4);max-width:320px}
.footer-heading{font-family:var(--font-head);font-size:0.8rem;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;color:var(--text-primary);margin-bottom:var(--s5)}
.footer-links{list-style:none;display:flex;flex-direction:column;gap:var(--s3)}
.footer-links a{font-size:0.875rem;color:var(--text-muted);transition:color var(--dur-fast)}
.footer-links a:hover{color:var(--accent-cyan)}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:var(--s8);border-top:1px solid var(--card-border);font-size:0.8rem;color:var(--text-muted)}
.footer-contact-item{display:flex;align-items:center;gap:var(--s2);font-size:0.875rem;color:var(--text-secondary);margin-bottom:var(--s3)}

/* ============================================================
   SCROLL REVEAL ANIMATIONS
   ============================================================ */
.reveal{opacity:0;transform:translateY(40px);transition:opacity var(--dur-slow) var(--ease-out-expo),transform var(--dur-slow) var(--ease-out-expo)}
.reveal.visible,.reveal.revealed{opacity:1;transform:translateY(0)}
.reveal-delay-1{transition-delay:.1s}
.reveal-delay-2{transition-delay:.2s}
.reveal-delay-3{transition-delay:.3s}
.reveal-delay-4{transition-delay:.4s}

/* Stagger children (used on grids) */
.stagger-children .reveal-child{opacity:0;transform:translateY(30px);transition:opacity var(--dur-slow) var(--ease-out-expo),transform var(--dur-slow) var(--ease-out-expo)}
.stagger-children.visible .reveal-child,.stagger-children.revealed .reveal-child{opacity:1;transform:translateY(0)}
.stagger-children.visible .reveal-child:nth-child(1),.stagger-children.revealed .reveal-child:nth-child(1){transition-delay:.05s}
.stagger-children.visible .reveal-child:nth-child(2),.stagger-children.revealed .reveal-child:nth-child(2){transition-delay:.1s}
.stagger-children.visible .reveal-child:nth-child(3),.stagger-children.revealed .reveal-child:nth-child(3){transition-delay:.15s}
.stagger-children.visible .reveal-child:nth-child(4),.stagger-children.revealed .reveal-child:nth-child(4){transition-delay:.2s}
.stagger-children.visible .reveal-child:nth-child(5),.stagger-children.revealed .reveal-child:nth-child(5){transition-delay:.25s}
.stagger-children.visible .reveal-child:nth-child(6),.stagger-children.revealed .reveal-child:nth-child(6){transition-delay:.3s}
.stagger-children.visible .reveal-child:nth-child(7),.stagger-children.revealed .reveal-child:nth-child(7){transition-delay:.35s}
.stagger-children.visible .reveal-child:nth-child(8),.stagger-children.revealed .reveal-child:nth-child(8){transition-delay:.4s}

/* Float-in from sides */
.reveal-left{opacity:0;transform:translateX(-50px);transition:opacity var(--dur-slow) var(--ease-out-expo),transform var(--dur-slow) var(--ease-out-expo)}
.reveal-right{opacity:0;transform:translateX(50px);transition:opacity var(--dur-slow) var(--ease-out-expo),transform var(--dur-slow) var(--ease-out-expo)}
.reveal-left.visible,.reveal-right.visible,.reveal-left.revealed,.reveal-right.revealed{opacity:1;transform:translateX(0)}

/* Scale-in */
.reveal-scale{opacity:0;transform:scale(0.92);transition:opacity var(--dur-slow) var(--ease-out-expo),transform var(--dur-slow) var(--ease-out-expo)}
.reveal-scale.visible,.reveal-scale.revealed{opacity:1;transform:scale(1)}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:0.01ms!important;animation-iteration-count:1!important;transition-duration:0.01ms!important;scroll-behavior:auto!important}
  .reveal,.reveal-left,.reveal-right,.reveal-scale,.stagger-children .reveal-child{opacity:1!important;transform:none!important}
  .hero-slide img{transition:none;transform:scale(1)!important}
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:1024px){
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr;gap:var(--s8)}
  .hero-stats-inner{gap:var(--s10)}
}
@media(max-width:768px){
  .nav-links,.nav-cta-wrap{display:none}
  .nav-toggle,.mobile-menu-toggle{display:flex}
  .nav-links.mobile-open{display:flex;flex-direction:column;position:absolute;top:var(--nav-h);left:0;right:0;background:rgba(6,10,20,0.98);backdrop-filter:blur(20px);padding:var(--s6);border-bottom:1px solid var(--card-border)}
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .footer-bottom{flex-direction:column;gap:var(--s4);text-align:center}
  .hero h1{font-size:clamp(1.8rem,7vw,2.8rem)}
  .hero-actions{flex-direction:column}.hero-actions .btn{width:100%;justify-content:center}
  .hero-stats-inner{flex-direction:row;gap:var(--s8);flex-wrap:wrap;justify-content:center}
  .service-header{flex-direction:column;gap:var(--s3)}
  .service-num{font-size:2rem;min-width:auto}
  .cta-banner{padding:var(--s10) var(--s6)}
}