/* ============ Kod Digital — Static site styles ============ */
:root{
  --radius:.75rem;
  --background:oklch(.18 .02 260);
  --foreground:oklch(.97 .01 250);
  --card:oklch(.25 .03 260);
  --card-foreground:oklch(.97 .01 250);
  --popover:oklch(.22 .03 260);
  --primary:oklch(.59 .18 255);
  --primary-foreground:oklch(.99 .01 250);
  --secondary:oklch(.30 .04 260);
  --muted:oklch(.32 .03 260);
  --muted-foreground:oklch(.72 .03 260);
  --accent:oklch(.68 .15 255);
  --destructive:oklch(.65 .24 25);
  --border:oklch(.35 .04 265 / 35%);
  --input:oklch(.28 .04 260);
  --ring:oklch(.59 .18 255);
  --gradient-primary:linear-gradient(135deg,oklch(.59 .18 255),oklch(.68 .15 255));
  --gradient-primary-soft:linear-gradient(135deg,oklch(.59 .18 255 / .12),oklch(.68 .15 255 / .08));
  --shadow-primary:0 0 30px oklch(.59 .18 255 / .25),0 0 60px oklch(.68 .15 255 / .12);
  --shadow-primary-strong:0 0 15px oklch(.59 .18 255 / .4),0 0 45px oklch(.68 .15 255 / .3);
  --shadow-card:0 20px 50px -15px oklch(.10 .02 260 / .6);
  --font-display:"Outfit",sans-serif;
  --font-sans:"Inter",sans-serif;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;border:0 solid var(--border)}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:hidden}
body{
  min-height:100vh;
  overflow-x:hidden;
  background:var(--background);
  color:var(--foreground);
  font-family:var(--font-sans);
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  background-image:
    radial-gradient(ellipse 70% 50% at 20% 0%,oklch(.59 .18 255 / .08),transparent 60%),
    radial-gradient(ellipse 60% 40% at 90% 30%,oklch(.50 .15 270 / .07),transparent 60%),
    linear-gradient(oklch(.35 .04 265 / .04) 1px,transparent 1px),
    linear-gradient(90deg,oklch(.35 .04 265 / .04) 1px,transparent 1px);
  background-size:auto,auto,48px 48px,48px 48px;
  background-attachment:fixed;
}
h1,h2,h3,h4,h5{font-family:var(--font-display);letter-spacing:-.01em;font-weight:900;line-height:1.1}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;cursor:pointer}
input,textarea,select{font:inherit;color:inherit;background:transparent}
ul{list-style:none}

/* Layout helpers */
.container{max-width:80rem;margin:0 auto;padding:0 1.5rem}
.container-narrow{max-width:64rem;margin:0 auto;padding:0 1.5rem}
.section{padding:6rem 0}
.grid{display:grid;gap:2rem}
.flex{display:flex}
.center{display:flex;align-items:center;justify-content:center}
.between{display:flex;align-items:center;justify-content:space-between}
.hidden{display:none}
@media(min-width:768px){
  .section{padding:8rem 0}
  .md-flex{display:flex}
  .md-hidden{display:none}
  .md-grid-2{grid-template-columns:1fr 1fr}
}
@media(min-width:1024px){
  .lg-grid-2{grid-template-columns:1fr 1fr}
  .lg-grid-hero{grid-template-columns:1.05fr 1fr}
  .lg-grid-about{grid-template-columns:1fr 1.1fr}
}

/* Text utilities */
.eyebrow{font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.4em;color:var(--primary)}
.eyebrow-muted{font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.3em;color:var(--muted-foreground)}
.text-muted{color:var(--muted-foreground)}
.text-lg{font-size:1.125rem}
.text-sm{font-size:.875rem}
.text-xs{font-size:.75rem}
.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}
.mt-6{margin-top:1.5rem}.mt-8{margin-top:2rem}.mt-10{margin-top:2.5rem}.mt-12{margin-top:3rem}.mt-14{margin-top:3.5rem}.mt-16{margin-top:4rem}
.mb-2{margin-bottom:.5rem}.mb-4{margin-bottom:1rem}.mb-6{margin-bottom:1.5rem}.mb-8{margin-bottom:2rem}
.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-6{gap:1.5rem}.gap-8{gap:2rem}
.text-center{text-align:center}
.max-w-2xl{max-width:42rem;margin-left:auto;margin-right:auto}
.max-w-xl{max-width:36rem}
.max-w-lg{max-width:32rem}

.text-gradient{
  background:var(--gradient-primary);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
h1.hero-title{font-size:2.5rem}
@media(min-width:768px){h1.hero-title{font-size:3.75rem}}
@media(min-width:1024px){h1.hero-title{font-size:4.25rem}}
h2.section-title{font-size:2.25rem}
@media(min-width:768px){h2.section-title{font-size:3rem}}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:.5rem;border-radius:9999px;padding:1rem 2rem;font-size:.8125rem;font-weight:900;text-transform:uppercase;letter-spacing:.2em;transition:transform .25s ease,filter .25s ease,box-shadow .25s ease,background .25s ease}
.btn-primary{background:var(--gradient-primary);color:oklch(.99 .01 250);box-shadow:var(--shadow-primary-strong)}
.btn-primary:hover{transform:translateY(-2px);filter:brightness(1.08);box-shadow:0 0 20px oklch(.59 .18 255 / .5),0 0 50px oklch(.68 .15 255 / .35)}
.btn-primary:disabled{opacity:.6;cursor:not-allowed}
.btn-ghost{border:1px solid var(--border);background:oklch(.25 .03 260 / .4);backdrop-filter:blur(8px);color:var(--foreground)}
.btn-ghost:hover{background:var(--card)}
.btn-sm{padding:.625rem 1.25rem;font-size:.75rem}

/* Cards with gradient border */
.card{
  position:relative;border-radius:1.5rem;padding:2rem;background:var(--card);
  background-clip:padding-box;border:1px solid transparent;
}
.card::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;
  background:var(--gradient-primary);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;
}
.card-hover{transition:transform .25s ease}
.card-hover:hover{transform:translateY(-.5rem)}
.card-glow{position:relative;overflow:hidden}
.card-glow::after{
  content:"";position:absolute;inset:0;border-radius:1.5rem;
  background:var(--gradient-primary-soft);opacity:0;transition:opacity .25s ease;pointer-events:none;
}
.card-glow:hover::after{opacity:1}
.card-content{position:relative;z-index:1}

/* Nav */
.nav{
  position:fixed;top:0;z-index:50;width:100%;
  backdrop-filter:blur(16px);
  background:oklch(.18 .02 260 / .6);
  border-bottom:1px solid var(--border);
}
.nav-inner{max-width:80rem;margin:0 auto;padding:1rem 1.5rem;display:flex;align-items:center;justify-content:space-between}
.nav-logo{display:flex;align-items:center;gap:.75rem}
.nav-logo img{height:2.5rem;width:2.5rem;object-fit:contain}
.nav-logo .brand{font-family:var(--font-display);font-size:1.125rem;font-weight:900;letter-spacing:.1em}
.nav-logo .brand-sub{font-size:.625rem;font-weight:600;letter-spacing:.35em;color:var(--muted-foreground)}
.nav-links{display:none;align-items:center;gap:2rem}
.nav-links a{font-size:.875rem;font-weight:600;color:var(--muted-foreground);transition:color .2s}
.nav-links a:hover{color:var(--foreground)}
@media(min-width:768px){.nav-links{display:flex}.nav-cta{display:inline-flex}}
.nav-cta{display:none}

/* Hero */
.hero{position:relative;overflow:hidden;padding:8rem 0 6rem}
@media(min-width:768px){.hero{padding:10rem 0 8rem}}
.orb{position:absolute;pointer-events:none;border-radius:9999px;filter:blur(60px)}
.orb-1{top:-6rem;left:-6rem;height:24rem;width:24rem;background:oklch(.59 .18 255 / .2)}
.orb-2{top:10rem;right:0;height:28rem;width:28rem;background:oklch(.50 .15 270 / .2)}
.badge-pill{display:inline-flex;align-items:center;gap:.5rem;border:1px solid var(--border);background:oklch(.25 .03 260 / .6);backdrop-filter:blur(8px);border-radius:9999px;padding:.375rem 1rem}
.pulse-dot{height:.5rem;width:.5rem;border-radius:9999px;background:var(--primary);animation:pulse-glow 3.5s ease-in-out infinite}
@keyframes pulse-glow{0%,100%{opacity:.7;filter:brightness(1)}50%{opacity:1;filter:brightness(1.15)}}

.hero-visual{position:relative;display:flex;align-items:center;justify-content:center}
.hero-visual::before{content:"";position:absolute;inset:-2rem;border-radius:2rem;background:var(--gradient-primary-soft);filter:blur(60px)}
.hero-frame{position:relative;width:100%;max-width:32rem;overflow:hidden;border-radius:1.5rem;box-shadow:var(--shadow-card);background:var(--card);border:1px solid transparent;background-clip:padding-box}
.hero-frame::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:var(--gradient-primary);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.hero-frame img{width:100%;object-fit:cover;opacity:.95}

.stat{}
.stat-num{font-family:var(--font-display);font-size:1.5rem;font-weight:900;background:var(--gradient-primary);-webkit-background-clip:text;background-clip:text;color:transparent}
.stat-lbl{font-size:.75rem;text-transform:uppercase;letter-spacing:.15em;color:var(--muted-foreground)}

/* Icon boxes */
.icon-box{display:inline-flex;height:3.5rem;width:3.5rem;align-items:center;justify-content:center;border-radius:1rem;border:1px solid var(--border);background:oklch(.18 .02 260 / .6);color:var(--primary);box-shadow:var(--shadow-primary)}
.icon-box-sm{display:inline-flex;height:2.25rem;width:2.25rem;align-items:center;justify-content:center;border-radius:.75rem;border:1px solid var(--border);background:oklch(.18 .02 260 / .6);color:var(--primary);flex-shrink:0}
.icon-box-md{display:inline-flex;height:3rem;width:3rem;align-items:center;justify-content:center;border-radius:1rem;border:1px solid var(--border);background:oklch(.18 .02 260 / .6);color:var(--primary);box-shadow:var(--shadow-primary)}

/* Service card list */
.service-list{margin-top:2rem;display:flex;flex-direction:column;gap:1.25rem}
.service-item{display:flex;gap:1rem}
.service-item-body strong{display:block;font-weight:700;color:var(--foreground)}
.service-item-body span{font-size:.875rem;color:var(--muted-foreground)}

/* Why-KOD giant letter */
.kod-letter{
  position:absolute;right:-2rem;top:-2rem;font-family:var(--font-display);
  font-size:10rem;font-weight:900;line-height:1;opacity:.1;user-select:none;
  background:var(--gradient-primary);-webkit-background-clip:text;background-clip:text;color:transparent;
}

/* Process */
.process-track{position:relative;margin-top:4rem}
.process-line{position:absolute;left:0;right:0;top:2rem;height:1px;background:var(--gradient-primary);opacity:.4;display:none}
@media(min-width:768px){.process-line{display:block}.process-grid{grid-template-columns:repeat(4,1fr)}}
.process-num{margin:0 auto;display:flex;height:4rem;width:4rem;align-items:center;justify-content:center;border-radius:9999px;border:1px solid var(--border);background:var(--background);box-shadow:var(--shadow-primary)}
.process-num span{font-family:var(--font-display);font-size:1.125rem;font-weight:900;background:var(--gradient-primary);-webkit-background-clip:text;background-clip:text;color:transparent}

/* Portfolio */
.project img{height:13rem;width:100%;object-fit:cover;transition:transform .5s ease}
.project:hover img{transform:scale(1.05)}
.project-media{overflow:hidden;border-top-left-radius:1.5rem;border-top-right-radius:1.5rem}
.project-body{padding:1.5rem}
.tag{display:inline-block;border:1px solid var(--border);background:oklch(.18 .02 260 / .6);border-radius:9999px;padding:.25rem .75rem;font-size:.625rem;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--muted-foreground)}
.tags{margin-top:1rem;display:flex;flex-wrap:wrap;gap:.5rem}
@media(min-width:768px){.md-grid-3{grid-template-columns:repeat(3,1fr)}}

/* Testimonials */
.stars{display:flex;gap:.125rem;margin-top:1.5rem;color:var(--primary)}
.avatar{display:flex;height:2.5rem;width:2.5rem;align-items:center;justify-content:center;border-radius:9999px;background:var(--gradient-primary-soft);font-family:var(--font-display);font-size:.875rem;font-weight:700;background-clip:padding-box;color:transparent;background-image:var(--gradient-primary);-webkit-background-clip:text}

/* Contact */
.contact-inner{position:relative;overflow:hidden;padding:2rem}
@media(min-width:768px){.contact-inner{padding:3.5rem}.contact-grid{grid-template-columns:1fr 1.1fr}}
.field label{display:block;margin-bottom:.5rem;font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.25em;color:var(--muted-foreground)}
.field input,.field textarea{width:100%;border:1px solid var(--border);background:oklch(.28 .04 260 / .6);border-radius:.75rem;padding:.75rem 1rem;font-size:.875rem;color:var(--foreground);outline:none;transition:border-color .2s,box-shadow .2s}
.field input::placeholder,.field textarea::placeholder{color:oklch(.72 .03 260 / .7)}
.field input:focus,.field textarea:focus{border-color:var(--primary);box-shadow:0 0 0 3px oklch(.59 .18 255 / .3)}
.form{border:1px solid var(--border);background:oklch(.18 .02 260 / .6);border-radius:1rem;padding:1.5rem;backdrop-filter:blur(16px)}
@media(min-width:768px){.form{padding:2rem}}
.alert-success{border:1px solid oklch(.6 .2 155 / .3);background:oklch(.6 .2 155 / .1);color:oklch(.85 .15 155);border-radius:.75rem;padding:.75rem 1rem;font-size:.875rem}

/* Footer */
footer{border-top:1px solid var(--border);padding:3rem 0}
footer .container{display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:1.5rem}
.footer-brand{display:flex;align-items:center;gap:.75rem;max-width:100%;min-width:0}
.footer-brand>div{min-width:0}
.footer-tagline{letter-spacing:.3em;overflow-wrap:anywhere}
.footer-copy{text-align:center;max-width:100%;overflow-wrap:anywhere}
@media(min-width:768px){footer .container{flex-direction:row}}

/* WhatsApp float */
.wa-float{position:fixed;bottom:1.5rem;right:1.5rem;z-index:50;display:flex;height:3.5rem;width:3.5rem;align-items:center;justify-content:center;border-radius:9999px;background:#25D366;color:#fff;box-shadow:0 10px 25px rgba(0,0,0,.3);transition:transform .2s}
.wa-float:hover{transform:scale(1.1)}

/* Mobile helper */
@media(max-width:767px){
  h1.hero-title{font-size:2.5rem}
  .hero{padding:6rem 0 4rem}
  .nav-links,.nav-cta{display:none}
  .badge-pill{max-width:100%}
  .badge-pill .eyebrow-muted{letter-spacing:.18em;overflow-wrap:anywhere}
  .form .grid{grid-template-columns:1fr!important}
  footer .container{padding:0 1rem}
  .footer-brand{align-items:flex-start;justify-content:center;width:100%}
  .footer-tagline{letter-spacing:.12em;line-height:1.6}
}