/* styles.css — modern responsive landing page */
/* Base resets and variables */
:root{
  --bg:#0f1226;
  --card:#0f1724;
  --muted:#9aa4c0;
  --accent1:#7b61ff;
  --accent2:#3ec6ff;
  --glass: rgba(255,255,255,0.04);
  --radius:14px;
  --container:1100px;
  --max-width:1100px;
  --gap:20px;
  --ff-sans: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--ff-sans);
  background: linear-gradient(180deg, #0b0d18 0%, #0f1226 60%);
  color: #eaf0ff;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.45;
  -webkit-tap-highlight-color: transparent;
}

/* container */
.container{
  width:90%;
  max-width:var(--container);
  margin:0 auto;
}

/* header */
.site-header{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:60;
  backdrop-filter: blur(6px);
  background: linear-gradient(180deg, rgba(15,17,38,0.6), rgba(15,17,38,0.22));
  border-bottom:1px solid rgba(255,255,255,0.02);
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 0;
}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit}
.brand-name{font-weight:700;letter-spacing:0.2px}
.primary-nav ul{list-style:none;margin:0;padding:0;display:flex;gap:18px;align-items:center}
.primary-nav a{color:var(--muted);text-decoration:none;padding:8px 6px;border-radius:8px;transition:color .22s, background .22s}
.primary-nav a:hover{color:#fff;background:rgba(255,255,255,0.02)}
.cta-small{background:linear-gradient(90deg,var(--accent1),var(--accent2));color:#051027;padding:8px 12px;border-radius:10px;font-weight:600}

/* mobile nav toggle */
.nav-toggle{display:none;background:none;border:0;padding:8px;border-radius:8px;cursor:pointer}
.hamburger{
  width:22px;height:2px;background:linear-gradient(90deg,var(--accent1),var(--accent2));display:block;position:relative;transition:transform .25s;
}
.hamburger::before,.hamburger::after{content:"";position:absolute;left:0;right:0;height:2px;background:inherit;border-radius:2px}
.hamburger::before{top:-7px}
.hamburger::after{top:7px}

/* HERO */
.hero{
  padding-top:110px; /* account for fixed header */
  padding-bottom:64px;
  position:relative;
  overflow:hidden;
}
.hero-bg{position:absolute;inset:0;pointer-events:none;z-index:0}
.orb{
  position:absolute;border-radius:999px;filter:blur(44px);opacity:.35;transform-origin:center;
  animation: float 8s ease-in-out infinite;
}
.orb-1{width:360px;height:360px;left:-80px;top:-120px;background:linear-gradient(135deg,var(--accent1),var(--accent2));animation-duration:10s;opacity:.26}
.orb-2{width:220px;height:220px;right:-60px;top:40px;background:linear-gradient(135deg,#ff7bbf,#7b61ff);animation-duration:12s;opacity:.18}
.orb-3{width:160px;height:160px;left:20%;bottom:-60px;background:linear-gradient(135deg,#00d2ff,#3ec6ff);animation-duration:9s;opacity:.14}
@keyframes float{
  0%{transform:translateY(0) rotate(0deg)}
  50%{transform:translateY(-18px) rotate(6deg)}
  100%{transform:translateY(0) rotate(0deg)}
}

/* hero inner content layout */
.hero-inner{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:1fr 480px;
  gap:var(--gap);
  align-items:center;
  padding:48px 0;
}
.hero-content{max-width:640px}
.hero-title{
  margin:0 0 14px 0;
  font-size:clamp(28px,6vw,44px);
  line-height:1.02;
  letter-spacing:-0.6px;
  background:linear-gradient(90deg,var(--accent1),var(--accent2));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  font-weight:800;
}
.hero-sub{color:var(--muted);font-size:16px;margin-bottom:20px}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:18px}
.btn{
  display:inline-flex;align-items:center;gap:8px;padding:12px 16px;border-radius:12px;font-weight:600;text-decoration:none;border:0;cursor:pointer
}
.btn.primary{
  background:linear-gradient(90deg,var(--accent1),var(--accent2));
  color:#051027;
  box-shadow: 0 8px 30px rgba(123,97,255,0.12), 0 2px 6px rgba(0,0,0,0.4);
  transition:transform .18s ease, box-shadow .18s;
}
.btn.primary:active{transform:translateY(1px)}
.btn.ghost{background:transparent;border:1px solid rgba(255,255,255,0.06);color:var(--muted)}
.trust{display:flex;align-items:center;gap:12px;font-size:13px;color:var(--muted)}
.logos{display:flex;gap:8px;align-items:center}
.tiny-logo{width:34px;height:28px;border-radius:6px;background:rgba(255,255,255,0.06);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700}

/* illustration */
.hero-illustration{display:block;max-width:100%;padding:12px}

/* FEATURES */
.features{padding:56px 0 40px}
.section-title{font-size:20px;margin:0 0 8px;color:#fff}
.section-note{color:var(--muted);margin-bottom:22px}
.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.feature-card{background:var(--card);padding:18px;border-radius:14px;box-shadow: 0 6px 24px rgba(2,6,23,0.6);transition:transform .22s, box-shadow .22s}
.feature-card:hover{transform:translateY(-6px);box-shadow: 0 12px 36px rgba(2,6,23,0.8)}
.icon{font-size:28px;margin-bottom:10px}

/* ABOUT */
.about{padding:48px 0;background:linear-gradient(180deg, rgba(255,255,255,0.02), transparent)}
.about-inner{display:flex;gap:20px;align-items:stretch;flex-wrap:wrap}
.about-text{flex:1;min-width:230px}
.about-card{width:380px;min-width:260px;position:relative;border-radius:18px;padding:24px;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));box-shadow: 0 10px 40px rgba(2,6,23,0.6)}
.card-shape{position:absolute;right:-50px;top:-40px;width:160px;height:160px;background:linear-gradient(135deg,var(--accent2),var(--accent1));border-radius:20px;opacity:.12;filter:blur(20px)}
.card-content{position:relative;color:var(--muted)}
.card-content h3{color:#fff;margin-top:0}

/* CONTACT */
.contact{padding:48px 0}
.contact-form{max-width:840px;background:rgba(255,255,255,0.02);padding:18px;border-radius:12px}
.contact-form .row{display:flex;gap:12px;margin-bottom:12px;flex-wrap:wrap}
.contact-form input, .contact-form textarea{
  background:transparent;border:1px solid rgba(255,255,255,0.04);padding:12px;border-radius:10px;color:inherit;width:100%;
  outline:none;transition:border-color .16s, box-shadow .16s;
}
.contact-form input:focus, .contact-form textarea:focus{
  border-color:rgba(62,198,255,0.4);
  box-shadow:0 6px 18px rgba(62,198,255,0.06);
}
.form-actions{display:flex;gap:12px;margin-top:10px}

/* footer */
.site-footer{padding:26px 0;color:var(--muted);border-top:1px solid rgba(255,255,255,0.02)}
.footer-inner{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}

/* small screens */
@media (max-width:920px){
  .hero-inner{grid-template-columns:1fr;gap:26px;padding:36px 0}
  .hero-illustration{order:-1}
  .feature-grid{grid-template-columns:repeat(2,1fr)}
  .about-inner{flex-direction:column}
  .about-card{width:100%}
}

/* very small screens */
@media (max-width:620px){
  .header-inner{padding:8px 0}
  .primary-nav{display:none}
  .nav-toggle{display:block}
  .primary-nav.open{display:block;position:absolute;right:16px;top:64px;background:linear-gradient(180deg, rgba(10,12,22,0.95), rgba(10,12,22,0.9));padding:12px;border-radius:12px}
  .primary-nav.open ul{flex-direction:column;gap:8px}
  .hero{padding-top:88px}
  .feature-grid{grid-template-columns:1fr}
  .hero-title{font-size:28px}
}

/* reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .orb, .hero-illustration, .feature-card, .btn{transition:none;animation:none}
}

/* small finishing flourish: subtle entry animations */
.hero-content, .hero-illustration, .feature-card, .about-card, .contact-form{
  transform:translateY(8px);
  opacity:0;
  animation: appear .9s cubic-bezier(.2,.9,.2,1) forwards;
}
.hero-content{animation-delay:.12s}
.hero-illustration{animation-delay:.18s}
.feature-card{animation-delay:.24s}
.about-card{animation-delay:.28s}
.contact-form{animation-delay:.3s}
@keyframes appear{
  to{transform:none;opacity:1}
}