@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700;800&display=swap');

:root {
  --bg-1: #0f172a; /* slate-900 */
  --accent-1: #6366f1; /* indigo-500 */
  --accent-2: #8b5cf6; /* purple-500 */
  --accent-3: #ec4899; /* pink-500 */
}

html, body, #root {
  height: 100%;
}

body {
  margin: 0;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  color: #ffffff;
  background: linear-gradient(135deg, var(--bg-1) 0%, #0b1220 40%, rgba(59,130,246,0.12) 100%);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Subtle centered card for the landing/hero */
.min-h-screen .max-w-3xl {
  padding: 2.25rem; /* 36px */
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
  border-radius: 16px;
  box-shadow: 0 12px 40px rgba(2,6,23,0.6), inset 0 1px 0 rgba(255,255,255,0.02);
  backdrop-filter: blur(6px) saturate(120%);
}

.min-h-screen .max-w-3xl h1 {
  letter-spacing: -0.01em;
}

.min-h-screen .max-w-3xl p { 
  color: rgba(255,255,255,0.95);
}

.min-h-screen .max-w-3xl button {
  transition: transform .18s ease, box-shadow .18s ease, background-color .12s;
  box-shadow: 0 8px 20px rgba(15,23,42,0.4);
}
.min-h-screen .max-w-3xl button:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 36px rgba(99,102,241,0.28);
}

/* Emoji / icon circle tweak */
.min-h-screen .max-w-3xl .w-24.h-24 {
  transform: translateY(-6px);
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.06);
}

/* Make form controls a bit cleaner if present */
input, textarea, select {
  font-family: inherit;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.02);
  color: #fff;
  padding: 0.6rem 0.8rem;
}

input::placeholder, textarea::placeholder {
  color: rgba(255,255,255,0.6);
}

/* Small responsive touch */
@media (max-width: 640px) {
  .min-h-screen .max-w-3xl { padding: 1.25rem; border-radius: 12px; }
  .min-h-screen .max-w-3xl h1 { font-size: 1.8rem; }
}
 
*{margin:0;padding:0;box-sizing:border-box}

/* -------------------------
   DESIGN TOKENS
   ------------------------- */
:root{
  --p1:#6366F1; --p2:#8B5CF6; --p3:#A855F7; --p4:#F472B6;
  --p5:#4ADE80; --p6:#FACC15; --p7:#14B8A6; --accent:#EC4899; --cyan:#06B6D4;

  --light-bg:#fdfdfd; --light-surface:#f6f8ff; --light-text:#0f172a; --light-border:rgba(15,23,42,0.06);
  --dark-bg:#050715; --dark-surface:rgba(12,18,32,0.82); --dark-text:#e6eefc; --dark-border:rgba(255,255,255,0.06);

  --radius:14px; --transition:300ms cubic-bezier(.2,.9,.2,1); --glass:rgba(255,255,255,0.14); --blur:16px;
  --shadow-1:0 8px 32px rgba(2,6,23,0.18); --shadow-2:0 22px 70px rgba(2,6,23,0.25);
}

/* -------------------------
   BASE LAYOUT & BACKGROUND
   ------------------------- */
html{scroll-behavior:smooth}
body{
  font-family:"Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color:var(--light-text); min-height:100vh; line-height:1.65; overflow-x:hidden;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;

  /* multiple layers of gradient + radial for alive feel */
  background:
    radial-gradient(1400px 700px at 10% 20%, rgba(255,255,255,0.06), transparent 8%),
    linear-gradient(135deg,var(--p1),var(--p2),var(--p3),var(--p4),var(--p5),var(--p6),var(--p7));
  background-size:1000% 1000%;
  animation:bgFast 5s linear forwards, bgNormal 22s ease-in-out 5s infinite;
}

/* Dark mode */
html.dark body{
  background:
    radial-gradient(1200px 600px at 10% 15%, rgba(10,20,40,0.28), transparent 8%),
    linear-gradient(160deg,#050715,#071025,#0e1a33,#0b1125,#1b1c3f,#071025,#0f1a45);
  color:var(--dark-text);
  animation:bgFastDark 5s linear forwards, bgNormalDark 26s ease-in-out 5s infinite;
}

/* -------------------------
   ANIMATIONS
   ------------------------- */
@keyframes bgFast{
  0%{background-position:0% 0%}
  100%{background-position:200% 200%}
}
@keyframes bgNormal{
  0%{background-position:0% 0%}
  50%{background-position:100% 100%}
  100%{background-position:0% 0%}
}
@keyframes bgFastDark{
  0%{background-position:0% 0%}
  100%{background-position:200% 200%}
}
@keyframes bgNormalDark{
  0%{background-position:0% 0%}
  50%{background-position:100% 100%}
  100%{background-position:0% 0%}
}

/* Floating tech elements */
@keyframes drift{0%{transform:translate(0,0)}50%{transform:translate(28px,-36px)}100%{transform:translate(0,0)}}
@keyframes pulse{0%,100%{opacity:.22}50%{opacity:.62}}

/* -------------------------
   BUTTONS - Alive moving neon gradient
   ------------------------- */
button{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  padding:14px 28px;border-radius:var(--radius);color:#fff;font-weight:700;letter-spacing:.3px;border:0;cursor:pointer;
  background:linear-gradient(135deg,var(--p1),var(--p3),var(--p5),var(--p7));
  background-size:400% 400%;
  animation:btnAlive 6s linear infinite;
  box-shadow:0 6px 22px rgba(99,102,241,0.18),0 0 32px rgba(99,102,241,0.14);
  transition:transform var(--transition),box-shadow var(--transition),filter var(--transition);
}
button:hover{
  transform:translateY(-6px) scale(1.02);
  box-shadow:0 14px 42px rgba(99,102,241,0.28),0 0 60px rgba(163,124,255,0.14);
  filter:brightness(1.04);
}
button:active{transform:translateY(-2px) scale(.985)}
button:disabled{opacity:.55;cursor:not-allowed}

/* Button unique alive gradient */
@keyframes btnAlive{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}

/* Accent variant */
.btn-accent{animation:btnAlive 5s linear infinite;background:linear-gradient(135deg,var(--accent),var(--p4),var(--p5),var(--p6))}

/* -------------------------
   CARDS / GLASS
   ------------------------- */
.card{
  background:var(--glass);backdrop-filter:blur(var(--blur)) saturate(180%);
  border-radius:var(--radius);padding:24px;border:1px solid rgba(255,255,255,0.2);
  box-shadow:var(--shadow-1);transition:transform var(--transition),box-shadow var(--transition),background var(--transition);
}
.card:hover{transform:translateY(-12px) scale(1.03);box-shadow:var(--shadow-2);}
html.dark .card{background:rgba(18,25,42,0.85);border:1px solid rgba(255,255,255,0.08);}

/* -------------------------
   INPUTS
   ------------------------- */
input,textarea,select{
  width:100%;padding:14px 16px;border-radius:14px;border:1px solid var(--light-border);
  background:var(--light-surface);color:var(--light-text);
  transition:box-shadow var(--transition),border-color var(--transition),background var(--transition);outline:none;font-size:1rem;
}
input:focus,textarea:focus,select:focus{
  border-color:var(--p1);box-shadow:0 6px 28px rgba(99,102,241,0.18),0 0 12px rgba(99,102,241,0.1) inset;
}
html.dark input,html.dark textarea,html.dark select{
  background:var(--dark-surface);color:var(--dark-text);border:1px solid var(--dark-border);
}

/* -------------------------
   LINKS
   ------------------------- */
a{position:relative;color:var(--p1);text-decoration:none;font-weight:600}
a::after{content:"";position:absolute;left:0;bottom:-4px;height:3px;width:0;background:linear-gradient(90deg,var(--accent),var(--p3),var(--p5),var(--p7));border-radius:3px;transition:width var(--transition)}
a:hover::after{width:100%}

/* -------------------------
   TOAST
   ------------------------- */
.toast{
  position:fixed;right:20px;bottom:24px;padding:14px 20px;border-radius:14px;
  background:linear-gradient(180deg, rgba(8,12,24,0.88), rgba(8,12,24,0.78));
  color:#fff;box-shadow:0 14px 45px rgba(2,6,23,0.6);z-index:9999;
}
html.dark .toast{background:linear-gradient(180deg, rgba(7,10,22,0.92), rgba(10,14,30,0.85))}

/* -------------------------
   UTILITIES & RESPONSIVE
   ------------------------- */
.container{max-width:1200px;margin:0 auto;padding:30px}
.row{display:flex;gap:22px;flex-wrap:wrap}
.col{flex:1 1 0;min-width:240px}
.center{display:flex;align-items:center;justify-content:center}
.p-20{padding:20px}
.mt-12{margin-top:12px}
.hover-lift{transition:transform var(--transition)}
.hover-lift:hover{transform:translateY(-10px)}
#hidden-preview{position:fixed;left:-9999px;top:0;width:210mm}

/* -------------------------
   TYPOGRAPHY SCALE
   ------------------------- */
.h1{font-size:clamp(1.7rem,3vw,2.6rem);font-weight:800;letter-spacing:-0.02em}
.h2{font-size:clamp(1.3rem,2.5vw,1.7rem);font-weight:700}
.lead{font-size:clamp(1rem,1.6vw,1.15rem);color:rgba(15,23,42,0.86)}
html.dark .lead{color:rgba(230,238,252,0.92)}

/* EOF - BLAD TEAM ULTRA ALIVE CSS */