@font-face{
  font-family:'Space Grotesk';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('fonts/space-grotesk-600.woff2') format('woff2');
}
@font-face{
  font-family:'Space Grotesk';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('fonts/space-grotesk-700.woff2') format('woff2');
}
@font-face{
  font-family:'Manrope';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('fonts/manrope-400.woff2') format('woff2');
}
@font-face{
  font-family:'Manrope';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('fonts/manrope-500.woff2') format('woff2');
}
@font-face{
  font-family:'Manrope';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('fonts/manrope-700.woff2') format('woff2');
}
@font-face{
  font-family:'Manrope';
  font-style:normal;
  font-weight:800;
  font-display:swap;
  src:url('fonts/manrope-800.woff2') format('woff2');
}
@font-face{
  font-family:'JetBrains Mono';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('fonts/jetbrains-mono-500.woff2') format('woff2');
}

:root{
  --bg:#ffffff;
  --ink:#14161c;
  --muted:#6b7280;
  --line:#e9eaf0;
  --shadow-soft:0 24px 60px -28px rgba(20,22,28,.20), 0 10px 24px -14px rgba(20,22,28,.12);
  --display:'Space Grotesk', sans-serif;
  --body-font:'Manrope', sans-serif;
  --mono:'JetBrains Mono', monospace;

  --g-start-a:#7c6ff0;   --g-start-b:#4f8cff;
  --g-web-a:#ff6f91;     --g-web-b:#ffb454;
  --g-mkt-a:#18b48c;     --g-mkt-b:#7ee787;
  --g-legal-a:#94a3b8;   --g-legal-b:#c7cfdb;
  --g-contact-a:#7c6ff0; --g-contact-b:#ff6f91;

  --p1:#7c6ff0; --p2:#ff6f91; --p3:#f59e0b; --p4:#18b48c;
}

*{ box-sizing:border-box; }

html{
  scroll-behavior:smooth;
  scroll-snap-type:y mandatory;
}

body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--body-font);
  overflow-x:hidden;
  position:relative;
}

body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:url("gfx/header.webp") center / cover no-repeat;
  opacity:.14;
}

body::before{
  content:"";
  position:fixed; inset:0;
  z-index:2000;
  pointer-events:none;
  opacity:.035;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

h1,h2,h3{
  font-family:var(--display);
  font-weight:700;
  letter-spacing:-0.02em;
  line-height:1.06;
  color:var(--ink);
}

a{ color:inherit; }

.gutter{
  position:relative; z-index:1;
  padding-left:clamp(1.25rem, 5vw, 5rem);
  padding-right:clamp(1.25rem, 5vw, 5rem);
}

.hero-copy{ max-width:34rem; color:var(--muted); font-size:1.08rem; }
.section-copy{ max-width:44rem; color:var(--muted); }
.contact-copy{ color:var(--muted); max-width:30rem; }
.browser-dot-red{ background:#ff6259; }
.browser-dot-yellow{ background:#ffbd2e; }
.browser-dot-green{ background:#28ca41; }

.h-hero{ font-size:clamp(2.6rem, 6vw, 5.2rem); }
.h-section{ font-size:clamp(2rem, 4.2vw, 3.4rem); }

.grad-text{
  background-image:linear-gradient(135deg,var(--gA),var(--gB));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.kicker{ display:inline-flex; align-items:center; gap:.65rem; margin-bottom:1.4rem; }
.kicker .bar{ width:26px; height:3px; border-radius:3px; background:linear-gradient(90deg,var(--gA),var(--gB)); }
.kicker span{ font-family:var(--mono); font-size:.76rem; letter-spacing:.04em; color:var(--muted); text-transform:lowercase; }

.tabbar-wrap{
  position:fixed; top:18px; left:0; right:0; z-index:1000;
  display:flex; justify-content:space-between; align-items:center;
  padding:0 clamp(1rem,4vw,2.5rem);
  pointer-events:none;
}

.brand{
  font-family:var(--display); font-weight:700; font-size:1.05rem;
  color:var(--ink); text-decoration:none; pointer-events:auto;
  display:flex; align-items:center; gap:.5rem;
}
.brand .dot-mark{
  width:9px; height:9px; border-radius:50%;
  background:linear-gradient(135deg,var(--g-start-a),var(--g-contact-b));
  display:inline-block;
}

.tabbar{
  pointer-events:auto;
  display:flex; align-items:center; gap:.15rem;
  background:rgba(255,255,255,.72);
  -webkit-backdrop-filter:blur(18px);
  backdrop-filter:blur(18px);
  border:1px solid rgba(20,22,28,.08);
  border-radius:999px;
  padding:.35rem;
  box-shadow:var(--shadow-soft);
  flex:none;
}

.tab{
  font-family:var(--body-font); font-weight:600; font-size:.82rem;
  color:var(--muted); padding:.6rem 1rem; border-radius:999px;
  display:flex; align-items:center; gap:.55rem;
  text-decoration:none; white-space:nowrap; transition:.2s;
}
.tab .tab-dot{ width:7px; height:7px; border-radius:50%; background:var(--dotA, #cbd0da); flex:none; }
.tab:hover{ color:var(--ink); background:rgba(20,22,28,.05); }
.tab.active{ color:#fff; background:linear-gradient(135deg,var(--dotA),var(--dotB)); }
.tab.active .tab-dot{ background:#fff; }
.tab:focus-visible{ outline:2px solid var(--ink); outline-offset:2px; }
.tab-start{ --dotA:var(--g-start-a); --dotB:var(--g-start-b); }
.tab-web{ --dotA:var(--g-web-a); --dotB:var(--g-web-b); }
.tab-mkt{ --dotA:var(--g-mkt-a); --dotB:var(--g-mkt-b); }
.tab-step{ --dotA:var(--g-legal-a); --dotB:var(--g-legal-b); }
.tab-faq{ --dotA:var(--g-legal-a); --dotB:var(--g-legal-b); }
.tab-contact{ --dotA:var(--g-contact-a); --dotB:var(--g-contact-b); }

@media (max-width: 1200px){
  .tab{ padding:.65rem; gap:0; }
  .tab .tab-label{ display:none; }
  .tab .tab-dot{ width:10px; height:10px; }
}

.hud{
  position:fixed; right:clamp(1rem,3vw,2rem); bottom:1.25rem; z-index:900;
  font-family:var(--mono); font-size:.72rem; color:var(--muted);
  background:rgba(255,255,255,.75);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
  padding:.4rem .8rem; border-radius:999px; border:1px solid var(--line);
  pointer-events:none;
}
.hud span{ color:var(--ink); font-weight:700; }

.artboard{
  position:relative;
  min-height:100svh;
  display:flex; align-items:center;
  scroll-snap-align:start;
  scroll-snap-stop:always;
  padding-top:6.5rem; padding-bottom:3rem;
  overflow:hidden;
  border-bottom:1px solid var(--line);
}

.is-start{ --gA:var(--g-start-a); --gB:var(--g-start-b); }
.is-web{ --gA:var(--g-web-a); --gB:var(--g-web-b); }
.is-mkt{ --gA:var(--g-mkt-a); --gB:var(--g-mkt-b); }
.is-legal{ --gA:var(--g-legal-a); --gB:var(--g-legal-b); }
.is-contact{ --gA:var(--g-contact-a); --gB:var(--g-contact-b); }

.legal-updated{
  margin-top:3rem; padding-top:2rem;
  border-top:1px solid var(--line);
  font-size:.9rem; color:var(--muted);
}

.blob{ position:absolute; border-radius:50%; filter:blur(80px); z-index:0; pointer-events:none; opacity:.5; }
.blob-a{ width:clamp(280px,32vw,520px); height:clamp(280px,32vw,520px); background:var(--gA); top:-10%; left:-8%; }
.blob-b{ width:clamp(240px,28vw,440px); height:clamp(240px,28vw,440px); background:var(--gB); bottom:-14%; right:-6%; }

.hero-image{
  width:140%;
  max-width:none;
  margin-left:-40%;
  height:auto;
  display:block;
  object-fit:contain;
}

.photo-wrap{ position:relative; }
.photo-halo{
  position:absolute; inset:-20px;
  background:linear-gradient(135deg,var(--gA),var(--gB));
  filter:blur(60px); opacity:.4; border-radius:44px; z-index:0;
}
.photo-frame{
  position:relative; z-index:1;
  border-radius:28px; overflow:hidden;
  box-shadow:var(--shadow-soft);
  aspect-ratio:4 / 5;
}
.is-web .photo-frame,
.is-mkt .photo-frame{ aspect-ratio:1 / 1; }
.photo-frame img,
.photo-frame video{ width:100%; height:100%; object-fit:cover; display:block; }
.webdesign-video{
  width:100%;
  height:auto;
  display:block;
  border-radius:28px;
  box-shadow:var(--shadow-soft);
}

.btn-solid{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.95rem 1.8rem; border-radius:999px;
  font-family:var(--body-font); font-weight:700; font-size:.95rem;
  color:#fff; background:linear-gradient(135deg,var(--gA),var(--gB));
  border:none; text-decoration:none;
  box-shadow:0 14px 30px -12px var(--gA);
  transition:transform .2s ease, box-shadow .2s ease;
}
.btn-solid:hover{ transform:translateY(-2px); box-shadow:0 18px 36px -12px var(--gA); }
.btn-solid:focus-visible{ outline:2px solid var(--ink); outline-offset:3px; }

.btn-ghost{
  display:inline-flex; align-items:center;
  padding:.95rem 1.8rem; border-radius:999px;
  border:1.5px solid var(--line); color:var(--ink);
  font-family:var(--body-font); font-weight:700; font-size:.95rem;
  text-decoration:none; transition:.2s;
}
.btn-ghost:hover{ border-color:var(--ink); background:rgba(20,22,28,.03); }
.btn-ghost:focus-visible{ outline:2px solid var(--ink); outline-offset:3px; }

.bento{
  border-radius:24px; padding:1.7rem; height:100%;
  background:color-mix(in srgb, var(--cardColor) 9%, white);
  border:1px solid color-mix(in srgb, var(--cardColor) 22%, white);
  transition:transform .25s ease, box-shadow .25s ease;
}
.bento:hover{ transform:translateY(-5px); box-shadow:var(--shadow-soft); }
.bento .tag{ font-family:var(--mono); font-size:.72rem; color:var(--cardColor); letter-spacing:.03em; margin:0; }
.bento h3{ font-family:var(--display); font-size:1.05rem; margin:.5rem 0 .4rem; }
.bento p{ color:var(--muted); font-size:.9rem; margin:0; }

.bento-1{ --cardColor:var(--p1); }
.bento-2{ --cardColor:var(--p2); }
.bento-3{ --cardColor:var(--p3); }
.bento-4{ --cardColor:var(--p4); }

.is-contact .bento-1{
  height:auto;
  background:linear-gradient(145deg,rgba(124,111,240,.12),rgba(255,111,145,.13));
  box-shadow:0 18px 42px -28px rgba(124,111,240,.55);
}
.is-contact .bento-1 .legal-placeholder{
  line-height:1.8;
}

.form-control-modern{
  width:100%; border:1.5px solid var(--line); border-radius:16px;
  padding:.9rem 1.1rem; font-family:var(--body-font); background:#fff; color:var(--ink);
}
.form-control-modern:focus{
  outline:none; border-color:var(--gA);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--gA) 16%, transparent);
}
.form-control-modern::placeholder{ color:#a5abb8; }
.honeypot{ position:absolute; left:-9999px; }
.form-status{ display:none; margin-top:1rem; font-weight:600; }
.contact-email{ margin-top:.6rem; }
.contact-line{ display:flex; align-items:baseline; }
.contact-label{ width:4.5rem; flex:none; }
label.form-label-modern{
  font-family:var(--body-font); font-weight:700; font-size:.82rem;
  color:var(--ink); margin-bottom:.4rem; display:block;
}
.form-optional{ color:var(--muted); font-weight:500; }

.form-check-modern{
  display:flex; align-items:flex-start; gap:.6rem;
}
.form-check-modern .form-check-input{
  width:1.15rem; height:1.15rem; flex:none; margin-top:.15rem;
  border:1.5px solid var(--line); border-radius:5px; accent-color:var(--gA);
  cursor:pointer;
}
.form-check-modern .form-check-label{
  font-size:.85rem; color:var(--muted); line-height:1.5; cursor:pointer;
}
.form-check-modern .form-check-label a{ color:var(--ink); text-decoration:underline; }

.alert-soft{
  background:color-mix(in srgb, var(--gA) 8%, white);
  border:1px solid color-mix(in srgb, var(--gA) 26%, white);
  border-radius:20px; padding:1.1rem 1.4rem; margin-bottom:2rem; font-size:.92rem;
}
.legal-block h2{ font-family:var(--display); font-size:1.3rem; margin:2.4rem 0 .6rem; }
.legal-block h3{ font-family:var(--display); font-size:1rem; margin-top:1.6rem; }
.legal-block h4{ font-family:var(--display); font-size:.9rem; margin:1.1rem 0 .3rem; }
.legal-block p{ color:var(--muted); }
.legal-block ul{ color:var(--muted); padding-left:1.2rem; }
.legal-placeholder{ color:var(--ink); font-weight:600; }

.legal-page{ padding-top:7.5rem; padding-bottom:4rem; }
.legal-page-inner{ max-width:760px; margin:0 auto; }
html.no-snap{ scroll-snap-type:none; }

.usp-list{ list-style:none; margin:1.4rem 0 0; padding:0; display:flex; flex-direction:column; gap:.55rem; }
.usp-list li{ display:flex; align-items:flex-start; gap:.6rem; font-size:.88rem; color:var(--muted); line-height:1.4; }
.usp-check{ flex:none; width:18px; height:18px; margin-top:.1rem; border-radius:50%; position:relative; background:linear-gradient(135deg,var(--gA),var(--gB)); }
.usp-check::after{
  content:""; position:absolute; left:5px; top:3px; width:5px; height:9px;
  border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg);
}

.step-card{
  height:100%; padding:1.7rem; border-radius:24px;
  background:color-mix(in srgb, var(--gA) 6%, white);
  border:1px solid color-mix(in srgb, var(--gA) 18%, white);
}
.step-num{ font-family:var(--mono); font-size:.95rem; font-weight:500; color:var(--gA); margin:0 0 .6rem; }
.step-card h3{ font-family:var(--display); font-size:1.05rem; margin:0 0 .5rem; }
.step-card p{ color:var(--muted); font-size:.9rem; margin:0; }

.faq-list{ display:flex; flex-direction:column; gap:.85rem; }
.faq-item{
  border:1px solid var(--line); border-radius:20px; padding:1.1rem 1.4rem;
  background:color-mix(in srgb, var(--gA) 5%, white);
  transition:border-color .2s ease;
}
.faq-item[open]{ border-color:color-mix(in srgb, var(--gA) 35%, var(--line)); }
.faq-item summary{
  cursor:pointer; list-style:none; font-family:var(--display); font-weight:700; font-size:1.02rem;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{ content:"+"; flex:none; font-weight:700; font-size:1.3rem; color:var(--gA); }
.faq-item[open] summary::after{ content:"–"; }
.faq-item summary:focus-visible{ outline:2px solid var(--ink); outline-offset:3px; border-radius:8px; }
.faq-item p{ color:var(--muted); margin:.9rem 0 0; line-height:1.6; }

.reveal{ opacity:0; transform:translateY(20px); transition:opacity .7s ease, transform .7s ease; }
.reveal.is-visible{ opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
}

@media (max-width: 991.98px){
  .artboard{ padding-top:5.5rem; }
  .blob{ opacity:.32; filter:blur(60px); }
  .hero-image{ width:100%; margin-left:0; }
}

@media (max-width: 420px){
  .brand .brand-text{ display:none; }
}

footer.mini{
  border-top:1px solid var(--line); margin-top:3rem; padding-top:1.25rem;
  font-family:var(--body-font); font-size:.85rem; color:var(--muted);
  display:flex; flex-wrap:wrap; gap:.5rem 1.5rem;
}
footer.mini a{ color:var(--muted); text-decoration:none; font-weight:600; }
footer.mini a:hover{ color:var(--ink); }
footer.mini .cookie-settings-link{
  background:none; border:0; padding:0; margin:0;
  font:inherit; font-weight:600; color:var(--muted); cursor:pointer;
}
footer.mini .cookie-settings-link:hover{ color:var(--ink); }

.cookie-banner{
  --gA:var(--g-contact-a); --gB:var(--g-contact-b);
  position:fixed; left:0; right:0; bottom:0; z-index:3000;
  padding:1.1rem clamp(1rem,4vw,2rem) calc(1.1rem + env(safe-area-inset-bottom));
  background:#fff; border-top:1px solid var(--line);
  box-shadow:0 -18px 40px -24px rgba(20,22,28,.35);
}
.cookie-banner[hidden]{ display:none; }
.cookie-banner-inner{
  max-width:1100px; margin:0 auto;
  display:flex; align-items:center; gap:1.5rem; flex-wrap:wrap;
}
.cookie-banner-text{
  flex:1 1 320px; margin:0; font-size:.86rem; color:var(--muted); line-height:1.55;
}
.cookie-banner-text a{ color:var(--ink); text-decoration:underline; }
.cookie-banner-actions{ display:flex; gap:.75rem; flex:none; flex-wrap:wrap; }
.cookie-banner-actions .btn-ghost,
.cookie-banner-actions .btn-solid{ padding:.7rem 1.4rem; font-size:.85rem; }