:root{
  --bg-ink: #071027; /* navy color */
  --bg-charcoal: #0b0b10; /*special xnyxcolor */
  --glass: rgba(255,255,255,0.06);
  --muted: #dfe6ea; 
  --cream: #fbf7ef;
  --accent-1: 255 131 42; 
  --accent-2: 147 64 255;
  --accent-3: 255 193 68; 
  --card-bg: rgba(255,255,255,0.02);
  --glow-int: 0.28; 

  
  --space-xxs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 20px;
  --space-lg: 36px;
  --space-xl: 64px;


  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  --ff-display: 'Inter', 'Segoe UI', system-ui, sans-serif;
  --text-base: 1rem;


  --easing: cubic-bezier(0.4, 0, 0.2, 1);
  --slow: 800ms;
  --med: 420ms;
  --fast: 160ms;


  --max-width: 1200px;
}


@media (prefers-reduced-motion: reduce){
  :root{ --glow-int: 0.08; }
  *{ animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}


html{
  font-family: var(--font-sans);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-size: clamp(14px, 1.6vw, 18px);
  background: linear-gradient(180deg, var(--bg-ink), color-mix(in srgb, var(--bg-charcoal) 75%, transparent));
  color: var(--muted);
  height:100%;
}

body{
  min-height:100vh;
  margin:0;
  line-height:1.45;
  -webkit-text-size-adjust:100%;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding: clamp(16px, 3vw, 40px);
}

/* div container */
.stage{
  width: min(100%, var(--max-width));
  position:relative;
  isolation:isolate;
}


.row{ display:grid; grid-template-columns: 1fr; gap:var(--space-lg); }
@media(min-width:900px){ .row{ grid-template-columns: 1fr 420px; align-items:start; } }

.panel{
  border-radius:20px;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  padding: clamp(18px,2.5vw,32px);
  box-shadow: 0 10px 30px rgba(2,6,23,0.6), inset 0 1px 0 rgba(255,255,255,0.02);
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
}


.hero{
  min-height: clamp(60vh, 70vh, 80vh);
  position:relative;
  display:flex;
  align-items:center;
  gap:var(--space-lg);
  padding: clamp(28px,6vw,56px);
  overflow:visible;
}

/* glass panels */
.hero .layers{ position:absolute; inset:0; pointer-events:none; }
.layer{
  position:absolute;
  left:50%; transform:translateX(-50%);
  width:110%; height:120%;
  border-radius:36px;
  filter: drop-shadow(0 40px 80px rgba(0,0,0,0.55));
  transition: transform var(--slow) var(--easing), opacity var(--med) var(--easing);
}
.layer.l1{
  top:-6%; background: linear-gradient(135deg, rgba(var(--accent-2),0.06), rgba(255,255,255,0.01));
  transform: translateX(-50%) translateY(0) scale(1.04) rotate(-2deg);
  backdrop-filter: blur(18px) saturate(120%);
}
.layer.l2{
  top:6%; background: linear-gradient(120deg, rgba(var(--accent-1),0.08), rgba(var(--accent-3),0.04));
  transform: translateX(-50%) translateY(0) scale(0.98) rotate(1deg);
  mix-blend-mode: screen;
  opacity:0.95;
}
.layer.l3{
  top:18%; width:95%; height:90%; background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(0,0,0,0.02));
  border: 1px solid rgba(255,255,255,0.03);
}

/* floating motin */
@keyframes floatSlow{ 0%{ transform: translateX(-50%) translateY(-6px); } 50%{ transform: translateX(-50%) translateY(8px);} 100%{ transform: translateX(-50%) translateY(-6px);} }
.layer.l1{ animation: floatSlow 10s linear infinite; animation-timing-function: ease-in-out; }
.layer.l2{ animation: floatSlow 12s linear infinite reverse; }

.hero-grid{ position:relative; display:grid; grid-template-columns: 1fr; gap:var(--space-lg); align-items:center; z-index:10; }
@media(min-width:900px){ .hero-grid{ grid-template-columns: 1fr 420px; } }

.eyebrow{ font-size:0.85rem; letter-spacing:0.18em; text-transform:uppercase; color:color-mix(in srgb,var(--muted) 70%, transparent); }

.title{
  font-family: var(--ff-display);
  font-weight:800;
  line-height:0.95;
  margin:0 0 8px 0;
  font-size: clamp(2.1rem, 6.5vw, 4.2rem);
  color: var(--cream);
  letter-spacing:-0.02em;
  text-transform:none;
  transform-style:preserve-3d;
  perspective:1200px;
  position:relative;
}

/* 3D floating text shadow */
.title::after{
  content: attr(data-text);
  position:absolute; left:0; top:0; color:transparent; text-shadow:
    0 12px 28px rgba(0,0,0,0.6),
    0 4px 8px rgba(0,0,0,0.35);
  transform:translateZ(-24px) scale(1.01);
  filter: blur(0.6px);
  mix-blend-mode: multiply;
  pointer-events:none;
}

.hero .subtitle{
  color: color-mix(in srgb, var(--muted) 84%, transparent);
  max-width: 56ch;
  font-size: clamp(0.95rem, 1.8vw, 1.15rem);
}

/* light trails */
.hero .light-trail{
  position:absolute; right:6%; top:8%; width:360px; height:360px; border-radius:50%; transform:translateZ(-40px);
  background: conic-gradient(from 100deg, rgba(var(--accent-1),0.18), rgba(var(--accent-2),0.12), rgba(var(--accent-3),0.08));
  filter: blur(48px) saturate(140%);
  opacity:var(--glow-int);
  z-index:2;
  pointer-events:none;
  mix-blend-mode: screen;
  animation: slowSpin 24s linear infinite;
}
@keyframes slowSpin{ to{ transform: translateZ(-40px) rotate(360deg);} }

/* CTA part complete */
.cta{ display:inline-grid; grid-auto-flow:column; gap:var(--space-sm); align-items:center; }
.btn{
  --pad-y: 12px; --pad-x:20px;
  padding: var(--pad-y) var(--pad-x);
  border-radius:14px;
  background: linear-gradient(90deg, rgba(var(--accent-1),0.12), rgba(var(--accent-2),0.06));
  color:var(--cream);
  border:1px solid rgba(255,255,255,0.06);
  text-decoration:none; font-weight:700; letter-spacing:0.01em;
  box-shadow: 0 8px 30px rgba(0,0,0,0.45), 0 0 40px rgba(var(--accent-1), calc(var(--glow-int) * 0.42));
  transition: transform var(--med) var(--easing), box-shadow var(--med) var(--easing), filter var(--med) var(--easing);
  transform: translateZ(0);
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.btn:focus{ outline: 3px solid color-mix(in srgb, rgba(var(--accent-2),0.22), transparent); outline-offset:4px; }
.btn:hover{ transform: translateY(-6px) scale(1.01); filter: saturate(1.06); }
.btn.secondary{ background:linear-gradient(90deg, rgba(var(--accent-2),0.06), rgba(var(--accent-3),0.04)); color:var(--muted); }
.btn.footer-download{ margin-left:auto; margin-right:auto; }

/*  */
.btn:active{ transform: translateY(-2px) scale(0.998); }

/*cards */
.cards{ display:grid; grid-template-columns: 1fr; gap:var(--space-md); }
@media(min-width:900px){ .cards{ grid-template-columns: repeat(2, 1fr); } }

.card{
  position:relative; overflow:visible; border-radius:16px;
  padding:var(--space-md); background:var(--card-bg); border:1px solid rgba(255,255,255,0.03);
  transition: transform var(--med) var(--easing), box-shadow var(--med) var(--easing);
  transform-origin:center; transform-style:preserve-3d;
}

.card::before{
  content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.02));
  mix-blend-mode: overlay; transition: opacity var(--med) var(--easing);
}

.card:hover, .card:focus-within{
  transform: perspective(900px) translateY(-10px) rotateX(3deg) rotateY(-2deg) scale(1.01);
  box-shadow: 0 30px 80px rgba(2,6,20,0.6), 0 0 40px rgba(var(--accent-2), calc(var(--glow-int) * 0.36));
}

.card h3{ margin:0 0 6px 0; font-size:1.05rem; color:var(--cream); }
.card p{ color: color-mix(in srgb, var(--muted) 65%, transparent); margin:0; }

/* adding glow ffect*/
.card .accent{ position:absolute; right: -12%; top:-18%; width:300px; height:300px; border-radius:50%; background: radial-gradient(circle at 20% 30%, rgba(var(--accent-1),0.14), transparent 30%);
  filter: blur(30px); pointer-events:none; opacity:0.75; mix-blend-mode: screen; }


section{ margin-top: var(--space-xl); position:relative; }
.section-clip{
  clip-path: polygon(0 4%, 100% 0, 100% 96%, 0 100%);
  background: linear-gradient(180deg, rgba(12,14,22,0.28), transparent), repeating-linear-gradient(180deg, rgba(255,255,255,0.006), rgba(255,255,255,0.006) 6px);
  padding: clamp(36px,5vw,56px);
  border-radius:28px;
}

.fade-sep{ position:absolute; left:0; right:0; height:84px; top:-28px; pointer-events:none; background:linear-gradient(180deg, transparent, rgba(0,0,0,0.22)); mix-blend-mode:multiply; }

/* Footer */
.nav-strip{ display:flex; gap:var(--space-md); align-items:center; justify-content:flex-end; }
.nav-link{ color:var(--muted); text-decoration:none; font-weight:600; opacity:0.9; }
.nav-link:focus{ outline:2px solid rgba(255,255,255,0.06); outline-offset:3px; }

/* scrollbar type shi */
::-webkit-scrollbar{ height:10px; width:10px; }
::-webkit-scrollbar-thumb{ background:linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03)); border-radius:999px; }


@media(max-width:700px){
  .hero{ padding:18px; }
  .layer{ border-radius:22px; }
  .hero .light-trail{ display:none; }
  .row{ gap:var(--space-md); }
}

/* tweaks...*/
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.focus-ring:focus{ outline:3px solid color-mix(in srgb, rgba(var(--accent-3),0.22), transparent); outline-offset:4px; }


.profile-mini{ display:flex; gap:var(--space-sm); align-items:center; }
.avatar{ width:56px; height:56px; border-radius:12px; background: linear-gradient(135deg, rgba(var(--accent-2),0.12), rgba(var(--accent-1),0.08)); display:flex; align-items:center; justify-content:center; font-weight:800; color:var(--cream); font-family: var(--ff-display); }


h2{ font-size: clamp(1.2rem, 2.6vw, 1.6rem); margin:0 0 8px 0; color:var(--cream); display:flex; align-items:center; gap:10px; }
.muted-small{ color:color-mix(in srgb, var(--muted) 72%, transparent); font-size:0.95rem; }
.muted-list{ margin:12px 0 0 0; padding-left:18px; color:color-mix(in srgb, var(--muted) 72%, transparent); }
.spaced-block{ margin-top:18px; }

/* icons inside headings */
h2 i{ font-size:0.95rem; color:color-mix(in srgb, var(--muted) 82%, transparent); }

/*footer*/
.footer-panel{ display:block; border-radius:20px; padding:20px; text-align:center; }

a:focus, button:focus { outline-offset:4px; }


@media(max-width:520px){
  .cta{ gap:8px; grid-auto-flow:row; }
  .hero-grid{ gap:14px; }
}