:root{
  --bg:#0B0B10;
  --panel:#11121A;
  --text:#ECECF1;
  --muted:#A9AFBC;
  --accent:#33CFFF;
  --accent2:#7A3CFF;
  --badge:#FF3B3B;
  --glass:rgba(17,18,26,0.6);
  --radius:18px;
  --shadow:0 10px 30px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: Inter, Outfit, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: radial-gradient(1200px 600px at 70% -10%, rgba(122,60,255,.15), transparent 60%),
              radial-gradient(900px 500px at -10% 20%, rgba(51,207,255,.12), transparent 60%),
              var(--bg);
  color:var(--text);
  line-height:1.6;
  font-size: clamp(16px, 1.2vw, 18px);
}
a{color:var(--accent); text-decoration:none}
a:hover{filter:brightness(1.1)}
img{max-width:100%; height:auto}
.container{width:min(1100px, 90vw); margin-inline:auto; padding: clamp(16px, 3vw, 24px)}
.section{padding: clamp(40px, 6vw, 80px) 0}
h1,h2,h3{line-height:1.2; margin:0 0 .6em}
h1{font-size: clamp(28px, 5vw, 44px)}
h2{font-size: clamp(24px, 3.6vw, 36px)}
h3{font-size: clamp(18px, 2.4vw, 24px)}
p{margin:.6em 0}
ul{padding-left:1.2em}
/* Glassmorphism sticky nav */
.nav{
  position:sticky; top:0; z-index:50;
  backdrop-filter: blur(12px);
  background: linear-gradient( to bottom, rgba(8,8,12,.7), rgba(8,8,12,.4));
  border-bottom:1px solid rgba(255,255,255,.06);
}
.nav-inner{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:10px 0}
.nav a{color:var(--text)}
.brand{display:flex; align-items:center; gap:12px}
.brand img{width:36px; height:36px}
.brand .logo-text{font-weight:700; letter-spacing:.2px}
.nav-links{display:flex; gap:18px; align-items:center; flex-wrap:wrap}
.nav-links a{padding:8px 10px; border-radius:10px}
.nav-links a[aria-current="page"]{background:linear-gradient(90deg, rgba(51,207,255,.12), rgba(122,60,255,.12)); outline:1px solid rgba(255,255,255,.06)}

/* Buttons */
.btn{display:inline-block; padding:12px 18px; border-radius:999px; border:1px solid rgba(255,255,255,.12);
     box-shadow: var(--shadow); transition:transform .12s ease, box-shadow .2s ease}
.btn:focus-visible{outline:3px solid var(--accent2); outline-offset:2px}
.btn:hover{transform: translateY(-1px)}
.btn-primary{background: linear-gradient(90deg, var(--accent), var(--accent2)); color:#061019; font-weight:700}
.btn-secondary{background:transparent; color:var(--text)}
.btn-ghost{background:transparent; border-color: rgba(255,255,255,.2); color:var(--muted)}

/* Hero */
.hero{
  text-align:center; padding: clamp(60px, 8vw, 120px) 0;
}
.hero .logo{
  display:inline-block; border-radius:24px; padding:22px;
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015));
  box-shadow: var(--shadow);
}
.hero .logo img{width:min(420px, 70vw); height:auto}
.badge{
  display:inline-block; margin-top:12px; padding:6px 12px; border-radius:10px;
  background:var(--badge); color:#fff; font-weight:700; letter-spacing:.2px
}
.hero p.tagline{
  margin:18px 0 22px; font-size: clamp(18px, 2.4vw, 24px); color:var(--text)
}
.hero-cta{display:flex; gap:12px; justify-content:center; flex-wrap:wrap}

/* Cards / grids */
.grid-3{display:grid; gap:18px; grid-template-columns:repeat(3, 1fr)}
.grid-2{display:grid; gap:18px; grid-template-columns:repeat(2, 1fr)}
.card{
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.06);
  border-radius: var(--radius);
  padding: clamp(16px, 2vw, 22px);
  box-shadow: var(--shadow);
}
.card h3{margin-top:0}
.card p{color:var(--muted)}
.card .price{font-weight:800; color:var(--text); font-size: clamp(18px,2.4vw,22px)}
.card .sub{color:var(--muted); font-size:.95em}

/* Checks list */
.checks{list-style:none; padding:0; margin:12px 0 0}
.checks li{margin:.4em 0; display:flex; align-items:baseline; gap:8px}

/* Contact */
.form{display:grid; gap:12px}
.input, textarea, input[type="email"], input[type="text"]{
  width:100%; padding:12px 14px; border-radius:12px; border:1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.03); color:var(--text);
}
.input:focus, textarea:focus, input[type="email"]:focus, input[type="text"]:focus{outline:2px solid var(--accent)}

/* Footer */
.footer{padding:28px 0; color:var(--muted); border-top:1px solid rgba(255,255,255,.06)}
.footer a{color:var(--muted)}

/* Responsive */
@media (max-width: 980px){
  .grid-3{grid-template-columns:1fr}
  .grid-2{grid-template-columns:1fr}
}

/* Neon hover glow */
a.btn-primary:hover{box-shadow: 0 0 18px rgba(51,207,255,.5), 0 0 30px rgba(122,60,255,.4)}

/* Focus visible for all links */
a:focus-visible{outline:2px solid var(--accent); outline-offset:2px}

/* Handwritten name badge */
.badge-name{
  font-family: 'Caveat', cursive;
  font-weight: 700;
  font-size: clamp(20px, 2.6vw, 28px);
  letter-spacing: 0;
  transform: rotate(-1.2deg);
  padding: 6px 14px;
  box-shadow: 0 6px 18px rgba(255,59,59,.35);
}

/* Testimonials */
.testimonial .quote{font-size:1.05em; color:var(--text)}
.testimonial .author{color:var(--muted); margin-top:.4em; font-weight:600}

/* FAQ */
.faq details{background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)); 
  border:1px solid rgba(255,255,255,.06); border-radius: var(--radius); padding: 12px 16px; margin:10px 0}
.faq summary{cursor:pointer; font-weight:700; list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq details[open]{outline:1px solid rgba(255,255,255,.08)}
.faq p{color:var(--muted); margin:.6em 0 0}

/* Handwritten name (no background) */
.name-hand{
  font-family: 'Caveat', cursive;
  color:#FF3B3B;
  font-weight:700;
  font-size: clamp(22px, 3vw, 32px);
  margin-top: 10px;
  text-shadow: 0 2px 14px rgba(255,59,59,.35);
  padding: 2px 6px;
}

/* Hero logo as row: icon + wordmark */
.hero .logo{
  display:inline-flex;
  align-items:center;
  gap:14px;
  padding:18px 22px;
}
.hero .logo .icon{width:min(46px, 12vw); height:auto}
.hero .logo .word{
  font-weight:800; font-size: clamp(28px, 4.6vw, 54px);
  letter-spacing:.2px;
}
.hero .logo .word .p{color:#ECECF1}
.hero .logo .word .m{
  background:linear-gradient(90deg, var(--accent), var(--accent2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* Testimonial enhancements */
.testimonial{position:relative; overflow:hidden}
.testimonial .stars{
  font-size: clamp(16px, 1.6vw, 18px);
  font-weight:800;
  letter-spacing: 2px;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 8px;
}
.testimonial .quote{font-size:1.06em; color:var(--text)}
.testimonial .author{color:var(--muted); margin-top:.6em; font-weight:600}
.testimonial::after{
  content:"”";
  position:absolute; right:14px; bottom:-16px;
  font-size:110px; line-height:1; color:rgba(255,255,255,.05);
  pointer-events:none;
}

/* Small tax badge for pricing */
.tax-badge{
  display:inline-block;
  margin: 6px 0 16px;
  padding:6px 10px;
  border-radius:999px;
  background: rgba(255,59,59,.12);
  color:#FF6B6B;
  font-weight:700;
  border:1px solid rgba(255,59,59,.25);
}

/* Signature testimonials */
.testimonial .t-row{display:flex; align-items:center; gap:12px; margin-bottom:8px}
.testimonial .avatar{width:40px; height:40px; border-radius:999px; border:2px solid rgba(255,255,255,.15)}
.testimonial .name{font-weight:700; color:var(--text); line-height:1.1}
.testimonial .title{color:var(--muted); font-size:.92em; line-height:1.1}

/* Mobile nav */
.nav-toggle{display:none; background:transparent; border:1px solid rgba(255,255,255,.2); color:var(--text);
  border-radius:10px; padding:8px 12px}
@media (max-width: 760px){
  .nav-inner{position:relative}
  .nav-toggle{display:block}
  .nav-links{display:none; position:absolute; top:100%; left:16px; right:16px; padding:10px; 
    background: var(--glass); border:1px solid rgba(255,255,255,.08); border-radius:14px; backdrop-filter: blur(10px)}
  .nav-links.open{display:flex; flex-direction:column; gap:8px}
  .hero{padding: clamp(36px, 10vw, 64px) 0}
  .hero .logo{padding:12px 14px; gap:10px}
  .hero .logo .icon{width:34px}
  .hero .logo .word{font-size: clamp(26px, 7vw, 40px)}
  .name-hand{font-size: clamp(20px, 5.2vw, 28px); margin-top:6px}
  .hero-cta{flex-direction:column; align-items:center}
  .section{padding: clamp(28px, 8vw, 50px) 0}
  .card{padding: clamp(14px, 4vw, 18px); box-shadow: none}
  .grid-3{grid-template-columns:1fr}
  .grid-2{grid-template-columns:1fr}
  .faq details{padding:10px 12px}
}

/* Identity row */
.id-row{display:flex; align-items:center; gap:12px; margin-bottom:8px}
.id-avatar{width:44px; height:44px; display:block; filter: drop-shadow(0 2px 10px rgba(51,207,255,.25))}
.id-title{font-weight:700}
.id-sub{color:var(--muted); font-size:.92em}
@media (max-width: 760px){
  .id-avatar{width:40px; height:40px; filter: drop-shadow(0 2px 10px rgba(51,207,255,.25))}
}

/* Graphical services */
.services-grid .service{position:relative; overflow:hidden; border:1px solid rgba(255,255,255,.08)}
.service .icon-wrap{
  width:56px; height:56px; border-radius:14px; display:grid; place-items:center; margin-bottom:10px;
  background: radial-gradient(120% 120% at 30% 20%, rgba(51,207,255,.2), transparent 60%),
              radial-gradient(120% 120% at 70% 80%, rgba(122,60,255,.18), transparent 60%);
  border:1px solid rgba(255,255,255,.08);
}
.service .icon-wrap img{width:32px; height:32px}
.service .accent{
  position:absolute; inset:auto -30% -30% auto; width:120px; height:120px; border-radius:50%;
  background: radial-gradient(closest-side, rgba(122,60,255,.18), transparent 70%);
  filter: blur(12px);
}
.service:hover{transform: translateY(-2px); transition: transform .15s ease, box-shadow .2s ease}
.service:hover .icon-wrap{box-shadow: 0 0 24px rgba(51,207,255,.25), inset 0 0 18px rgba(122,60,255,.15)}

/* FAQ chevrons + open highlight */
.faq details{position:relative; padding-left:16px}
.faq summary{position:relative; padding-left:18px}
.faq summary::before{
  content:"›"; position:absolute; left:0; top:0; transform: rotate(90deg); 
  color:var(--muted); font-weight:800;
}
.faq details[open] summary::before{transform: rotate(270deg); color:#BBD6FF}
.faq details[open]{background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03))}
.faq details::after{
  content:""; position:absolute; left:0; top:10px; bottom:10px; width:3px;
  background: linear-gradient(180deg, var(--accent), var(--accent2)); border-radius:2px; opacity:.6;
}
@media (max-width: 760px){
  .service .icon-wrap{width:52px; height:52px}
  .service .icon-wrap img{width:28px; height:28px}
}

/* Meta chips + CTA chip */
.meta{display:flex; flex-wrap:wrap; gap:8px; margin:10px 0 6px; padding:0; list-style:none}
.meta .chip{padding:6px 10px; border-radius:999px; background: rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); font-size:.88em; color:var(--muted)}
.card-footer{margin-top:6px}
.cta-chip{display:inline-block; padding:8px 12px; border-radius:999px; border:1px solid rgba(255,255,255,.12); color:var(--text)}
.cta-chip:hover{box-shadow: 0 0 14px rgba(51,207,255,.35), 0 0 14px rgba(122,60,255,.28)}

/* Icon hover animation */
.service .icon-wrap{transition: transform .2s ease, box-shadow .2s ease}
.service .icon-wrap img{transition: transform .25s ease, opacity .25s ease; opacity:.95}
.service:hover .icon-wrap{transform: translateY(-3px)}
.service:hover .icon-wrap img{transform: translateX(2px); opacity:1}

/* Compact about */
.about-compact{display:block}
.about-compact p{margin:0}

/* Pricing cards */
.prices-grid .price-card{position:relative; overflow:hidden; border:1px solid rgba(255,255,255,.08);}
.price-card .icon-wrap{width:54px; height:54px; border-radius:14px; display:grid; place-items:center; margin-bottom:8px;
  background: radial-gradient(120% 120% at 30% 20%, rgba(51,207,255,.2), transparent 60%),
              radial-gradient(120% 120% at 70% 80%, rgba(122,60,255,.18), transparent 60%);
  border:1px solid rgba(255,255,255,.08);
}
.price-card .icon-wrap img{width:28px; height:28px}
.price-card .price{font-weight:800; background: linear-gradient(90deg, var(--accent), var(--accent2)); -webkit-background-clip:text; background-clip:text; color:transparent}
.price-card .label{
  position:absolute; top:10px; left:10px; padding:6px 10px; border-radius:999px;
  background: linear-gradient(90deg, var(--accent), var(--accent2)); color:#061019; font-weight:800; font-size:.82em
}
.price-card.highlight{outline:1px solid rgba(122,60,255,.25); box-shadow: 0 10px 30px rgba(0,0,0,.35), inset 0 0 24px rgba(122,60,255,.08)}
.price-card:hover{transform: translateY(-2px); transition:transform .15s ease}

/* Contact form visuals */
.form-card{border:1px solid rgba(255,255,255,.08); background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));}
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.form-grid label:nth-of-type(3){grid-column:1 / -1}
.form .ico{font-size:.9em; color:var(--muted); margin-left:6px}
@media (max-width: 760px){
  .form-grid{grid-template-columns:1fr}
}

/* Handwritten red heading */
.hand-red{
  font-family: 'Caveat', cursive;
  color:#FF3B3B;
  font-weight:700;
  font-size: clamp(28px, 6vw, 64px);
  line-height: 1.05;
  letter-spacing: .2px;
  text-shadow: 0 4px 22px rgba(255,59,59,.28);
  transform: rotate(-1deg);
  display:inline-block;
}
@media (max-width:760px){
  .hand-red{font-size: clamp(26px, 9vw, 42px)}
}

/* Smooth scroll */
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
}


/* Section reveal */
.section{will-change: transform, opacity}
.section.reveal-start{opacity:.001; transform: translateY(14px)}
.section.reveal-in{opacity:1; transform:none; transition: opacity .45s ease, transform .45s ease}
/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .section.reveal-start{opacity:1; transform:none}
  .section.reveal-in{transition:none}
}

/* Divider between areas */
.divider-smooth{
  height:48px; margin: -6px 0 6px; position:relative;
  background: radial-gradient(80% 60% at 50% 20%, rgba(51,207,255,.14), transparent 70%),
              radial-gradient(80% 60% at 50% 80%, rgba(122,60,255,.12), transparent 70%);
  filter: blur(6px);
  pointer-events:none;
  border-radius: 40px;
}

/* --- Säihke: stagger + shimmer --- */
.stagger-item{opacity:0; transform: translateY(12px)}
.stagger-show{opacity:1; transform:none; transition: opacity .5s ease, transform .5s ease; transition-delay: calc(var(--d, 0) * 90ms)}
@media (prefers-reduced-motion: reduce){
  .stagger-item{opacity:1; transform:none}
  .stagger-show{transition:none}
}
@keyframes btn-shimmer{
  0%{background-position: 0% 0}
  100%{background-position: -200% 0}
}
.btn-primary{
  background-image: linear-gradient(90deg, var(--accent), var(--accent2), var(--accent));
  background-size: 200% 100%;
}
.btn-primary:hover{
  animation: btn-shimmer 2.2s linear infinite;
}