/* ============================================================
   SECURA WEB DATA LABS — Global Design System
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600;700&display=swap');

/* ── LIGHT THEME (default) ── */
:root {
  --orange:        #ff6b00;
  --orange-2:      #ff8c00;
  --orange-light:  #ffb347;
  --orange-glow:   rgba(255,107,0,0.3);
  --bg:            #f8f8fc;
  --bg-2:          #ffffff;
  --bg-card:       #ffffff;
  --bg-card-h:     rgba(255,107,0,0.05);
  --text:          #0a0a14;
  --text-2:        rgba(10,10,20,0.7);
  --text-3:        rgba(10,10,20,0.45);
  --border:        rgba(0,0,0,0.08);
  --border-o:      rgba(255,107,0,0.4);
  --grad-o:        linear-gradient(135deg,#ff6b00,#ffb347);
  --font-h:        'Space Grotesk',sans-serif;
  --font-b:        'Inter',sans-serif;
  --r-sm: 8px; --r-md: 16px; --r-lg: 24px; --r-xl: 32px; --r-full: 9999px;
  --shadow-o:      0 10px 40px rgba(255,107,0,0.15);
  --tr-fast:       .2s cubic-bezier(.4,0,.2,1);
  --tr-mid:        .4s cubic-bezier(.4,0,.2,1);
  --tr-slow:       .7s cubic-bezier(.4,0,.2,1);
  --nav-bg:        rgba(255,255,255,0.92);
  --form-bg:       #ffffff;
  --form-border:   rgba(0,0,0,0.1);
}

/* ── DARK THEME ── */
:root.dark {
  --bg:            #07070f;
  --bg-2:          #0d0d1a;
  --bg-card:       rgba(255,255,255,0.04);
  --bg-card-h:     rgba(255,255,255,0.08);
  --text:          #ffffff;
  --text-2:        rgba(255,255,255,0.68);
  --text-3:        rgba(255,255,255,0.38);
  --border:        rgba(255,255,255,0.08);
  --border-o:      rgba(255,107,0,0.35);
  --nav-bg:        rgba(7,7,15,0.85);
  --form-bg:       rgba(255,255,255,0.04);
  --form-border:   rgba(255,255,255,0.1);
  --shadow-o:      0 0 30px rgba(255,107,0,0.22);
}

/* ── Theme Toggle Button ── */
.theme-toggle {
  position: fixed;
  bottom: 84px;
  left: 30px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--bg-card);
  border: 1px solid var(--border);
  backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 500;
  transition: all .3s ease;
  color: var(--text);
}
.theme-toggle:hover {
  border-color: var(--border-o);
  box-shadow: var(--shadow-o);
  transform: scale(1.1);
}
.theme-toggle .moon-icon { display: none; }
.theme-toggle .sun-icon  { display: block; }
:root.dark .theme-toggle .moon-icon { display: block; }
:root.dark .theme-toggle .sun-icon  { display: none; }

@media(max-width:768px){
  .theme-toggle { left: 15px !important; bottom: 15px !important; width: 38px !important; height: 38px !important; }
}



*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;-webkit-text-size-adjust:100%;overflow-x:hidden}
body{font-family:var(--font-b);background:var(--bg);color:var(--text);line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased;min-width:0}
::-webkit-scrollbar{width:5px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--orange);border-radius:99px}
::selection{background:var(--orange);color:#fff}
h1,h2,h3,h4,h5,h6{font-family:var(--font-h);font-weight:700;line-height:1.15;letter-spacing:-.02em}
h1{font-size:clamp(2.4rem,5vw,5rem)}
h2{font-size:clamp(1.9rem,3.5vw,3.2rem)}
h3{font-size:clamp(1.3rem,2vw,1.9rem)}
h4{font-size:clamp(1.05rem,1.5vw,1.3rem)}
p{color:var(--text-2);line-height:1.7}
a{color:inherit;text-decoration:none}
img,svg{max-width:100%;display:block}
ul{list-style:none}
button{cursor:pointer;border:none;background:none;font-family:inherit}

.container{max-width:1280px;margin:0 auto;padding:0 clamp(20px,5vw,80px)}
section{padding:110px 0;position:relative;overflow:hidden}

/* Section header */
.section-header{text-align:center;margin-bottom:64px}
.section-tag{display:inline-flex;align-items:center;gap:8px;font-size:.72rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--orange);background:rgba(255,107,0,.1);border:1px solid rgba(255,107,0,.25);padding:6px 16px;border-radius:var(--r-full);margin-bottom:20px}
.section-tag::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--orange);animation:pulse-dot 2s ease-in-out infinite}
.section-title{font-size:clamp(1.9rem,3.5vw,3.1rem);margin-bottom:14px}
.section-sub{font-size:1.05rem;color:var(--text-2);max-width:580px;margin:0 auto;line-height:1.7}

/* Gradient text */
.g-text{background:var(--grad-o);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;padding:0 .08em;margin:0 -.08em}

/* Glass */
.glass{background:var(--bg-card);border:1px solid var(--border);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
.glass-o{background:rgba(255,107,0,.05);border:1px solid var(--border-o);backdrop-filter:blur(20px)}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:14px 32px;font-family:var(--font-h);font-size:.95rem;font-weight:600;border-radius:var(--r-full);transition:all var(--tr-mid);position:relative;overflow:hidden;cursor:pointer}
.btn-primary{background:var(--grad-o);color:#fff;box-shadow:0 4px 24px rgba(255,107,0,.35)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 40px rgba(255,107,0,.5)}
.btn-outline{background:transparent;color:var(--text);border:1px solid var(--border)}
.btn-outline:hover{border-color:var(--orange);color:var(--orange);transform:translateY(-2px);box-shadow:0 4px 24px rgba(255,107,0,.15)}

/* Blobs */
.blob{position:absolute;border-radius:50%;filter:blur(80px);opacity:.13;pointer-events:none}
.blob-1{width:600px;height:600px;background:radial-gradient(circle,#ff6b00,transparent);top:-200px;right:-100px;animation:blob-float 10s ease-in-out infinite}
.blob-2{width:400px;height:400px;background:radial-gradient(circle,#ff8c00,transparent);bottom:-120px;left:-80px;animation:blob-float 12s ease-in-out infinite;animation-delay:-5s}

/* Icon wrap */
.icon-wrap{width:56px;height:56px;border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;background:rgba(255,107,0,.1);border:1px solid rgba(255,107,0,.22);flex-shrink:0;font-size:1.5rem;transition:all var(--tr-mid)}

/* Theme Overrides */
.blob { opacity: .06; }
:root.dark .blob { opacity: .13; }

.navbar.scrolled { background: var(--nav-bg); border-bottom: 1px solid var(--border); }
.mobile-menu { background: var(--nav-bg); }

footer { background: #f4f4fa; border-top: 1px solid var(--border); }
:root.dark footer { background: #0a0a14; }

.loader { background: var(--bg); }
#hero { background: linear-gradient(135deg, #fff5ee 0%, #f8f8fc 100%); }
:root.dark #hero { background: var(--bg); }

/* Progress bar */

.progress-bar{width:100%;height:6px;background:rgba(255,255,255,.08);border-radius:99px;overflow:hidden}
.progress-fill{height:100%;background:var(--grad-o);border-radius:99px;width:0%;transition:width 1.5s cubic-bezier(.4,0,.2,1)}

/* Float util */
.float{animation:float 6s ease-in-out infinite}
.float-1{animation-delay:-2s}
.float-2{animation-delay:-4s}

/* Grid helpers */
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:30px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}

/* Divider accent */
.divider{width:56px;height:3px;background:var(--grad-o);border-radius:99px;margin:0 auto 22px}

/* stat */
.stat-num{font-family:var(--font-h);font-size:clamp(2.4rem,4vw,3.8rem);font-weight:700;line-height:1}
.stat-lbl{font-size:.85rem;color:var(--text-3);margin-top:5px;font-weight:500}

/* Logo glow */
.glow-logo {
    box-shadow: 0 0 25px rgba(255, 107, 0, 0.4);
    transition: box-shadow var(--tr-mid);
}
:root.light .glow-logo {
    box-shadow: none;
}