/* Robak’s Web — Modern site (scroll-reveal cards, motion, dark mode)
   Author: ChatGPT
*/

:root{
  --bg: #0b0c10;
  --panel: rgba(255,255,255,.06);
  --panel2: rgba(255,255,255,.09);
  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.68);
  --line: rgba(255,255,255,.10);
  --shadow: 0 24px 60px rgba(0,0,0,.55);

  --primary: #00AEEF;
  --primary2:#1F6FFF;
  --accent:#FF6A00;

  --max: 1120px;
  --r: 18px;

  --ease: cubic-bezier(.2,.8,.2,1);
}

:root[data-theme="light"]{
  --bg: #ffffff;
  --panel: rgba(2,6,23,.04);
  --panel2: rgba(2,6,23,.06);
  --text: rgba(2,6,23,.92);
  --muted: rgba(2,6,23,.65);
  --line: rgba(2,6,23,.10);
  --shadow: 0 18px 50px rgba(2,6,23,.12);

  --primary:#2563eb;
  --primary2:#1F6FFF;
  --accent:#FF6A00;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family: "Space Grotesk", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  background: var(--bg);
  color: var(--text);
  line-height: 1.55;
  overflow-x:hidden;
}

/* Futuristic typography */
h1, h2, h3, .brand span{
  font-family: "Sora", "Space Grotesk", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial;
}
h1{
  letter-spacing: -0.04em;
  text-transform: none;
}
.section__head h2{
  letter-spacing: -0.03em;
}
.card h3, .step h3, .project__meta h3, .price h3{
  letter-spacing: -0.02em;
}
.kicker{
  letter-spacing: .22em;
}
.nav__menu > a{
  letter-spacing: .02em;
}
.btn{
  letter-spacing: .02em;
  text-transform: uppercase;
  font-size: 13px;
}
.btn--ghost{ text-transform:none; letter-spacing:0; }
.pill, .tag, .chip, .logo{
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 11px;
}
.stat__num{
  font-family: "Sora", "Space Grotesk", ui-sans-serif, system-ui;
}


img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button, input, select, textarea{ font:inherit; color:inherit; }
::selection{ background: rgba(110,231,255,.25); }

.container{ max-width: var(--max); margin:0 auto; padding: 0 20px; }
.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; }

.progress{ position:fixed; top:0; left:0; right:0; height:3px; z-index:50; background: transparent; }
.progress__bar{
  height:100%;
  width:0%;
  background: linear-gradient(90deg, var(--primary), var(--primary2), var(--accent));
  transform-origin:left;
}

.announce{
  border-bottom: 1px solid var(--line);
  background: linear-gradient(90deg, rgba(110,231,255,.07), rgba(139,92,246,.06), rgba(249,115,22,.06));
  backdrop-filter: blur(10px);
}
.announce__inner{ display:flex; gap:12px; justify-content:space-between; align-items:center; padding: 10px 20px; font-size: 14px; }
.announce__left, .announce__right{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.announce__link{ color: var(--text); opacity:.9; }
.announce__link:hover{ opacity:1; text-decoration:underline; }
.dot{ width:5px; height:5px; border-radius:999px; background: var(--muted); opacity:.65; }

.pill{
  display:inline-flex; align-items:center; justify-content:center;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.06);
  font-weight: 800;
  font-size: 12px;
}
.pill--hot{
  background: linear-gradient(90deg, rgba(110,231,255,.18), rgba(139,92,246,.14));
  border-color: rgba(110,231,255,.25);
}

.header{
  position: sticky; top:0; z-index:40;
  background: rgba(0,0,0,.28);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(14px);
}
:root[data-theme="light"] .header{ background: rgba(255,255,255,.72); }

.header__inner{ display:flex; align-items:center; justify-content:space-between; padding: 14px 0; }

.brand{ display:flex; gap:10px; align-items:center; font-weight: 900; letter-spacing:.2px; }
.brand span{ font-size: 15px; }
.brand img{ filter: drop-shadow(0 8px 18px rgba(0,0,0,.25)); }

.nav{ display:flex; align-items:center; gap:12px; }
.nav__toggle{
  display:none;
  width:44px; height:44px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.06);
}
.burger{ width:18px; height:2px; background: var(--text); display:block; margin:0 auto; position:relative; border-radius:99px; }
.burger::before,.burger::after{
  content:""; position:absolute; left:0; right:0; height:2px; background: var(--text); border-radius:99px;
}
.burger::before{ top:-6px; }
.burger::after{ top:6px; }

.nav__menu{ display:flex; align-items:center; gap:10px; }
.nav__menu > a{
  font-weight: 750;
  font-size: 14px;
  opacity:.9;
  padding: 10px 10px;
  border-radius: 12px;
}
.nav__menu > a:hover{ background: rgba(255,255,255,.06); opacity:1; }

.mode{
  width:44px; height:44px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.06);
  display:inline-flex; align-items:center; justify-content:center;
  cursor:pointer;
}
.mode:hover{ background: rgba(255,255,255,.10); }

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:10px;
  padding: 11px 14px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.06);
  font-weight: 850;
  font-size: 14px;
  box-shadow: none;
  transition: transform .16s var(--ease), background .16s var(--ease), border-color .16s var(--ease);
}
.btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.10); }
.btn:active{ transform: translateY(0px); }
.btn--primary{
  background: linear-gradient(90deg, var(--primary), var(--primary2));
  border-color: rgba(110,231,255,.25);
  color: rgba(2,6,23,.92);
}
:root[data-theme="light"] .btn--primary{ color: #fff; }
.btn--primary:hover{ filter: brightness(.98); }
.btn--ghost{ background: rgba(255,255,255,.04); }

.bg{ position:fixed; inset:0; pointer-events:none; z-index:-1; }
.blob{
  position:absolute; width: 540px; height: 540px;
  border-radius: 50%;
  filter: blur(40px);
  opacity:.55;
  transform: translate3d(0,0,0);
}
.blob--a{ left:-180px; top:-130px; background: radial-gradient(circle at 30% 30%, rgba(110,231,255,.8), transparent 65%); }
.blob--b{ right:-200px; bottom:-160px; background: radial-gradient(circle at 30% 30%, rgba(139,92,246,.78), transparent 65%); }
.gridlines{
  position:absolute; inset:0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(circle at 50% 10%, rgba(0,0,0,.9), transparent 70%);
  opacity:.28;
}

.hero{ padding: 64px 0 28px; }
.hero__inner{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 40px;
  align-items:center;
}
.kicker{
  display:inline-flex; gap:10px; align-items:center;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.05);
  font-weight: 850;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}
.kicker__dot{ width:9px; height:9px; border-radius:99px; background: linear-gradient(90deg, var(--primary), var(--primary2), var(--accent)); }

h1{ font-size: clamp(36px, 5vw, 58px); line-height: 1.03; margin: 16px 0 12px; letter-spacing: -0.02em; }
.text-grad{
  background: linear-gradient(90deg, var(--primary), var(--primary2), var(--accent));
  -webkit-background-clip:text;
  background-clip:text;
  color: transparent;
}
.lead{ color: var(--muted); font-size: 17px; max-width: 62ch; margin: 0 0 18px; }
.hero__cta{ display:flex; gap:10px; flex-wrap:wrap; margin: 18px 0 18px; }

.hero__stats{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 18px;
}
.stat{
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(255,255,255,.05);
  padding: 12px 12px;
}
.stat__num{ font-weight: 950; font-size: 22px; letter-spacing:-0.02em; }
.stat__label{ color: var(--muted); font-size: 12.5px; margin-top: 2px; }

.trust{ margin-top: 18px; display:flex; flex-direction:column; gap:10px; }
.trust__label{ color: var(--muted); font-size: 13px; }
.logos{ display:flex; flex-wrap:wrap; gap:10px; }
.logo{
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.04);
  font-weight: 850;
  font-size: 13px;
  color: var(--muted);
}

.hero__art{ position:relative; }
.mock{
  border-radius: 28px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.04);
  box-shadow: var(--shadow);
  overflow:hidden;
}
.float{
  position:absolute;
  border-radius: 22px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.06);
  box-shadow: 0 22px 55px rgba(0,0,0,.35);
  animation: drift 7s var(--ease) infinite alternate;
}
.float--one{ width: 140px; height: 90px; left:-10px; bottom: 40px; }
.float--two{ width: 160px; height: 110px; right:-12px; top: 50px; animation-duration: 9.5s; }
@keyframes drift{
  from{ transform: translateY(0px); }
  to{ transform: translateY(-16px); }
}

.section{ padding: 72px 0; }
.section--alt{ background: rgba(255,255,255,.03); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.section__head{ max-width: 70ch; margin-bottom: 18px; }
.section__head h2{ margin:0 0 6px; font-size: clamp(28px, 3.2vw, 38px); letter-spacing:-0.02em; }
.muted{ color: var(--muted); }

.cards{
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 14px;
  margin-top: 18px;
}
.card{
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: rgba(255,255,255,.05);
  padding: 18px 16px;
  box-shadow: none;
  transition: transform .22s var(--ease), background .22s var(--ease), border-color .22s var(--ease);
}
.card:hover{ transform: translateY(-3px); background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.18); }
.card__icon{
  width:44px; height:44px;
  border-radius: 14px;
  display:grid; place-items:center;
  border:1px solid var(--line);
  background: rgba(255,255,255,.06);
  margin-bottom: 12px;
}
.card h3{ margin: 0 0 6px; font-size: 17px; letter-spacing:-0.01em; }
.card p{ margin:0 0 10px; color: var(--muted); }

.list{ margin: 0; padding-left: 18px; color: var(--muted); }
.list li{ margin: 7px 0; }

.strip{
  margin-top: 20px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: linear-gradient(90deg, rgba(110,231,255,.10), rgba(139,92,246,.08), rgba(249,115,22,.07));
  padding: 18px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap: 14px;
}
.strip__right{ display:flex; gap:10px; flex-wrap:wrap; }
.strip h3{ margin:0 0 4px; }
.strip p{ margin:0; }

.timeline{
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 14px;
  margin-top: 18px;
}
.step{
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: rgba(255,255,255,.05);
  padding: 18px 16px;
}
.step__num{
  width: 44px; height: 44px;
  border-radius: 14px;
  display:grid; place-items:center;
  background: linear-gradient(90deg, rgba(110,231,255,.22), rgba(139,92,246,.20));
  border: 1px solid rgba(110,231,255,.24);
  font-weight: 950;
  color: var(--text);
  margin-bottom: 10px;
}
.step h3{ margin: 0 0 6px; }
.step p{ margin:0; color: var(--muted); }

.callout{
  margin-top: 18px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: rgba(255,255,255,.05);
  padding: 18px;
}
.callout__inner{ display:flex; align-items:center; justify-content:space-between; gap: 14px; flex-wrap:wrap; }
.callout__chips{ display:flex; gap:10px; flex-wrap:wrap; }
.chip{
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.05);
  color: var(--muted);
  font-weight: 800;
  font-size: 13px;
}

.work{ display:grid; gap: 14px; margin-top: 18px; }
.project{
  border: 1px solid var(--line);
  border-radius: 22px;
  overflow:hidden;
  background: rgba(255,255,255,.05);
}
.project img{ width:100%; height:auto; background: rgba(255,255,255,.03); }
.project__meta{
  padding: 16px;
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap: 12px;
  flex-wrap:wrap;
}
.project__meta h3{ margin:0 0 6px; }
.project__meta p{ margin:0; }
.tags{ display:flex; gap:8px; flex-wrap:wrap; }
.tag{
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.04);
  color: var(--muted);
  font-weight: 850;
  font-size: 12px;
}

.cta2{
  margin-top: 18px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: rgba(255,255,255,.05);
  padding: 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
  flex-wrap:wrap;
}
.cta2 h3{ margin:0 0 4px; }
.cta2 p{ margin:0; }

.pricing{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 14px;
  margin-top: 18px;
}
.price{
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: rgba(255,255,255,.05);
  padding: 18px 16px;
}
.price--hot{
  background: linear-gradient(180deg, rgba(110,231,255,.10), rgba(139,92,246,.08));
  border-color: rgba(110,231,255,.25);
  box-shadow: 0 22px 60px rgba(110,231,255,.08);
}
.price h3{ margin: 0 0 8px; }
.price__big{ margin:0 0 8px; font-weight: 950; font-size: 34px; letter-spacing:-0.02em; }

.slider{
  border: 1px solid var(--line);
  border-radius: 22px;
  background: rgba(255,255,255,.05);
  overflow:hidden;
}
.slider__track{
  display:flex;
  /* REMOVE width: 300%; */
  transition: transform .6s var(--ease);
  will-change: transform;
}
.slider__track{ scroll-snap-type: x mandatory;
}
.quote{ scroll-snap-align: start;
}

.quote{
  flex: 0 0 100%;   /* each slide = exactly 1 viewport width */
  margin:0;
  padding: 18px 16px;
  border-right: 1px solid var(--line);
}

.quote blockquote{ margin:0 0 10px; font-size: 18px; letter-spacing:-0.01em; }
.quote figcaption{ color: var(--muted); font-weight: 800; font-size: 14px; }
.slider__controls{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding: 12px 14px;
  border-top: 1px solid var(--line);
  background: rgba(255,255,255,.03);
}
.iconbtn{
  width:44px; height:44px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.05);
  cursor:pointer;
  font-size: 22px;
  font-weight: 900;
}
.iconbtn:hover{ background: rgba(255,255,255,.10); }
.dots{ display:flex; gap:8px; align-items:center; justify-content:center; flex:1; }
.dotbtn{
  width:10px; height:10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.10);
  cursor:pointer;
}
.dotbtn[aria-current="true"]{
  background: linear-gradient(90deg, var(--primary), var(--primary2));
  border-color: rgba(110,231,255,.25);
}

.faq{ display:grid; gap: 10px; margin-top: 18px; }
.faq__item{
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255,255,255,.05);
  padding: 14px 14px;
}
.faq__item summary{
  cursor:pointer;
  font-weight: 900;
  list-style:none;
}
.faq__item summary::-webkit-details-marker{ display:none; }
.faq__item p{ margin: 10px 0 0; color: var(--muted); }

.contact{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items:start;
}
.contact__cards{ display:grid; gap: 10px; margin-top: 16px; }
.mini{
  display:flex; gap:10px; align-items:center;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255,255,255,.05);
  padding: 12px 12px;
}
.mini__icon{
  width:44px; height:44px;
  border-radius: 14px;
  display:grid; place-items:center;
  background: rgba(255,255,255,.06);
  border:1px solid var(--line);
}

.form{
  border: 1px solid var(--line);
  border-radius: 22px;
  background: rgba(255,255,255,.05);
  padding: 16px;
}
.form label{ display:block; font-weight: 850; font-size: 13px; }
.form input, .form select, .form textarea{
  width:100%;
  margin-top: 8px;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.04);
  color: var(--text);
  outline:none;
}
.form input:focus, .form select:focus, .form textarea:focus{
  border-color: rgba(110,231,255,.35);
  box-shadow: 0 0 0 4px rgba(110,231,255,.10);
}
.form__row{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.form__row--end{
  margin-top: 10px;
  align-items:center;
}
/* Fix dropdown / option text visibility */
.form select{
  color: var(--text);
  background-color: var(--bg);
}

/* The actual dropdown options */
.form select option{
  color: rgba(2,6,23,.92);
  background-color: #ffffff;
}

/* If you want the dropdown to stay dark instead, use this version instead:
.form select option{
  color: rgba(255,255,255,.92);
  background-color: #0b0c10;
}
*/

.check{ display:flex; gap:10px; align-items:center; font-weight: 750; color: var(--muted); }
.check input{ width:18px; height:18px; margin-top:0; }
.tiny{ font-size: 12.5px; margin: 10px 0 0; }

.footer{
  border-top: 1px solid var(--line);
  padding: 44px 0 18px;
  background: rgba(255,255,255,.02);
}
.footer__inner{
  display:flex;
  justify-content:space-between;
  gap: 18px;
  flex-wrap:wrap;
  align-items:flex-start;
}
.footer__brand{ max-width: 48ch; }
.footer__cols{ display:flex; gap: 36px; flex-wrap:wrap; }
.footer h4{ margin: 0 0 10px; }
.footer a{ display:block; padding: 6px 0; color: var(--muted); font-weight: 750; }
.footer a:hover{ color: var(--text); }
.footer__bottom{
  display:flex;
  justify-content:space-between;
  gap: 10px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 13px;
}

/* Scroll-reveal animation (cards slide in as you scroll) */
.reveal{
  opacity: 0;
  transform: translateY(18px);
  filter: blur(6px);
  transition:
    opacity .7s var(--ease),
    transform .7s var(--ease),
    filter .7s var(--ease);
  will-change: opacity, transform, filter;
}
.reveal.in{
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .reveal{ transition:none; transform:none; filter:none; opacity:1; }
  .float{ animation:none; }
  .slider__track{ transition:none; }
}

/* Responsive */
@media (max-width: 980px){
  .hero__inner{ grid-template-columns: 1fr; }
  .cards{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .timeline{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .pricing{ grid-template-columns: 1fr; }
  .contact{ grid-template-columns: 1fr; }
  .form__row{ grid-template-columns: 1fr; }
  .header{ background: rgba(0,0,0,.42); }
}
@media (max-width: 560px){
  .announce__inner{ padding: 10px 14px; }
  .cards{ grid-template-columns: 1fr; }
  .timeline{ grid-template-columns: 1fr; }
  .nav__toggle{ display:inline-flex; align-items:center; justify-content:center; cursor:pointer; }
  .nav__menu{
    position:absolute;
    top: 62px;
    right: 20px;
    left: 20px;
    display:none;
    flex-direction:column;
    gap: 8px;
    padding: 12px;
    border-radius: 18px;
    border: 1px solid var(--line);
    background: rgba(0,0,0,.55);
    backdrop-filter: blur(14px);
  }
  :root[data-theme="light"] .nav__menu{ background: rgba(255,255,255,.92); }
  .nav__menu.open{ display:flex; }
  .nav__menu > a{ width:100%; }
  .mode{ align-self:flex-end; }
}


/* Subtle animated scanlines + drifting grid (futuristic) */
.bg::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(255,255,255,.05) 0px,
      rgba(255,255,255,.05) 1px,
      rgba(255,255,255,0) 4px,
      rgba(255,255,255,0) 10px
    );
  opacity:.12;
  mix-blend-mode: overlay;
  animation: scan 8s linear infinite;
  mask-image: radial-gradient(circle at 50% 15%, rgba(0,0,0,.9), transparent 72%);
}
@keyframes scan{
  from{ transform: translateY(0); }
  to{ transform: translateY(24px); }
}

/* Add a gentle "drift" to gridlines for life (very subtle) */
.gridlines{
  animation: gridDrift 14s linear infinite;
}
@keyframes gridDrift{
  from{ background-position: 0 0, 0 0; }
  to{ background-position: 0 64px, 64px 0; }
}


/* Hero headline shimmer sweep (tiny + tasteful) */
.hero h1{
  position: relative;
}
.hero h1::after{
  content:"";
  position:absolute;
  inset:-10px -30px;
  background: linear-gradient(
    110deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.12) 45%,
    rgba(255,255,255,.26) 50%,
    rgba(255,255,255,.12) 55%,
    rgba(255,255,255,0) 100%
  );
  transform: translateX(-120%);
  pointer-events:none;
  mix-blend-mode: overlay;
  mask-image: linear-gradient(#000, #000);
  opacity: .65;
  animation: headlineShimmer 6.5s var(--ease) infinite;
}
:root[data-theme="light"] .hero h1::after{
  background: linear-gradient(
    110deg,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,.06) 45%,
    rgba(0,0,0,.12) 50%,
    rgba(0,0,0,.06) 55%,
    rgba(0,0,0,0) 100%
  );
  mix-blend-mode: multiply;
  opacity:.5;
}
@keyframes headlineShimmer{
  0%, 62% { transform: translateX(-120%); opacity: 0; }
  70% { opacity: .65; }
  84% { transform: translateX(120%); opacity: .65; }
  100% { transform: translateX(120%); opacity: 0; }
}


/* Neon edge glow (tasteful) */
.card, .step, .project, .price, .form, .slider, .faq__item, .mini{
  position: relative;
}
.card::before, .step::before, .project::before, .price::before, .form::before, .slider::before, .faq__item::before, .mini::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(0,174,239,.55), rgba(31,111,255,.40), rgba(255,106,0,.35));
  opacity: 0;
  filter: blur(10px);
  transition: opacity .22s var(--ease);
  pointer-events:none;
  z-index:-1;
}
.card:hover::before,
.step:hover::before,
.project:hover::before,
.price:hover::before,
.form:hover::before,
.slider:hover::before,
.faq__item:hover::before,
.mini:hover::before{
  opacity: .55;
}

/* Buttons: subtle neon edge + lift */
.btn{
  position: relative;
}
.btn::after{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(0,174,239,.65), rgba(31,111,255,.45), rgba(255,106,0,.45));
  opacity: 0;
  filter: blur(12px);
  transition: opacity .18s var(--ease);
  pointer-events:none;
  z-index:-1;
}
.btn:hover::after{ opacity: .5; }
.btn--primary::after{ opacity: .35; }
.btn--primary:hover::after{ opacity: .6; }


/* Logo hover glow */
.brand img{
  transition: filter .25s var(--ease), transform .25s var(--ease);
}
.brand:hover img{
  --logoGlow: 1;
  transform: translateY(-1px) scale(1.02);
}


/* cursor-proximity glow (tiny + premium) */
:root{
  --logoGlow: 0; /* 0..1 set by JS */
}
.brand img{
  /* already has transition; also add variable-driven glow */
  filter:
    drop-shadow(0 0 calc(8px * var(--logoGlow)) rgba(0,174,239, calc(.55 * var(--logoGlow))))
    drop-shadow(0 0 calc(16px * var(--logoGlow)) rgba(31,111,255, calc(.45 * var(--logoGlow))))
    drop-shadow(0 0 calc(24px * var(--logoGlow)) rgba(255,106,0, calc(.35 * var(--logoGlow))));
}
/* if reduced motion, don’t animate via JS */
@media (prefers-reduced-motion: reduce){
  :root{ --logoGlow: 0; }
}


/* Bigger logo */
.brand img{
  height:48px;
  width:auto;
}
@media (max-width:560px){
  .brand img{ height:40px; }
}

/* ===========================
   Fancy Toast Modal (FINAL)
   Put this at the VERY bottom
   =========================== */

.toast{
  position: fixed !important;
  inset: 0 !important;
  display: grid !important;
  place-items: center !important;
  padding: 18px !important;
  z-index: 2147483647 !important;
  pointer-events: none !important;
  opacity: 0 !important;
  transition: opacity .22s var(--ease) !important;
}

/* open state */
.toast.is-open{
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* backdrop */
.toast::before{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  background: rgba(0,0,0,.62) !important;
  backdrop-filter: blur(10px) saturate(140%) !important;
  z-index: 0 !important;
}

/* card */
.toast__card{
  position: relative !important;
  z-index: 1 !important;
  width: min(560px, calc(100vw - 36px)) !important;
  border-radius: 20px !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  background:
    radial-gradient(1200px 400px at 20% 0%, rgba(0,174,239,.20), transparent 55%),
    radial-gradient(900px 380px at 80% 30%, rgba(31,111,255,.18), transparent 55%),
    rgba(18,20,28,.86) !important;
  box-shadow: 0 30px 110px rgba(0,0,0,.65) !important;
  backdrop-filter: blur(18px) saturate(140%) !important;

  display: grid !important;
  grid-template-columns: 52px 1fr 44px !important;
  gap: 14px !important;
  align-items: center !important;

  padding: 18px 18px !important;

  transform: translateY(14px) scale(.98) !important;
  transition: transform .22s var(--ease) !important;
}

.toast.is-open .toast__card{
  transform: translateY(0) scale(1) !important;
}

/* neon border glow */
.toast__card::after{
  content:"" !important;
  position:absolute !important;
  inset:-2px !important;
  border-radius: inherit !important;
  background: linear-gradient(90deg,
    rgba(0,174,239,.55),
    rgba(31,111,255,.45),
    rgba(255,106,0,.35)
  ) !important;
  filter: blur(16px) !important;
  opacity: .55 !important;
  z-index: -1 !important;
  pointer-events:none !important;
}

/* icon pill */
.toast__icon{
  width: 52px !important;
  height: 52px !important;
  border-radius: 16px !important;
  display: grid !important;
  place-items: center !important;
  font-weight: 950 !important;
  font-size: 20px !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  background: rgba(255,255,255,.06) !important;
  box-shadow: 0 12px 30px rgba(0,0,0,.35) !important;
}

/* title/text */
.toast__title{
  font-weight: 950 !important;
  font-size: 16px !important;
  letter-spacing: -0.01em !important;
  margin: 0 !important;
}
.toast__text{
  font-size: 14px !important;
  color: var(--muted) !important;
  margin-top: 4px !important;
  line-height: 1.35 !important;
}

/* close button */
.toast__close{
  width: 44px !important;
  height: 44px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  background: rgba(255,255,255,.06) !important;
  cursor: pointer !important;
  display:grid !important;
  place-items:center !important;
  font-size: 16px !important;
  opacity: .9 !important;
  transition: transform .16s var(--ease), background .16s var(--ease) !important;
}
.toast__close:hover{
  background: rgba(255,255,255,.10) !important;
  transform: translateY(-1px) !important;
}

/* variants */
.toast[data-variant="success"] .toast__icon{
  background: linear-gradient(135deg, rgba(16,185,129,.28), rgba(0,174,239,.18)) !important;
  border-color: rgba(110,231,255,.22) !important;
}
.toast[data-variant="error"] .toast__icon{
  background: linear-gradient(135deg, rgba(239,68,68,.28), rgba(255,106,0,.16)) !important;
  border-color: rgba(255,106,0,.22) !important;
}

/* mobile */
@media (max-width: 520px){
  .toast__card{
    grid-template-columns: 46px 1fr 40px !important;
    padding: 16px !important;
  }
  .toast__icon{ width:46px !important; height:46px !important; }
}