:root{
  --orange:#f58220;
  --orange-light:#ffffff;
  --dark:#1b1b1b;
  --yellow:#ffee8c;
  --header-h:88px;
}

/* ---------- RESET ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;scroll-snap-type:y mandatory;background:var(--dark);}
body{font-family:"Inter",sans-serif;background:var(--dark);color:#fff;line-height:1.55;-webkit-font-smoothing:antialiased;}

a{text-decoration:none;color:inherit;}
.btn{display:inline-block;background:var(--orange);color:#fff;border:0;padding:.65rem 1.6rem;border-radius:6px;font-weight:600;cursor:pointer;transition:opacity .25s;}
.btn:hover{opacity:.9;}

/* ---------- SECTIONS ---------- */
section,.hero{min-height:calc(100vh - var(--header-h));padding:4rem 1rem;scroll-margin-top:var(--header-h);scroll-snap-align:start;background:var(--dark);}
.container{max-width:1100px;margin:0 auto;}

/* ---------- HEADER ---------- */
header{position:sticky;top:0;z-index:100;background:var(--dark);display:flex;align-items:center;padding:1.9rem 1.4rem;height:var(--header-h);}
.logoimg img{height:7rem;width:auto;}
.nav-toggle{display:none;background:none;border:0;color:#fff;font-size:2rem;cursor:pointer;margin-left:auto;}
nav{margin-left:auto;}
nav ul{display:flex;gap:1.4rem;list-style:none;font-weight:500;}
nav a{color:#fff;transition:color .3s ease;}
nav a:hover{color:var(--orange);}

/* ---------- MOBILE NAV ---------- */
@media (max-width:640px){
  .nav-toggle{display:block;}
  nav{position:fixed;top:0;right:-100%;width:70%;height:100%;background:var(--dark);padding:5rem 2rem;transition:right .3s ease;overflow-y:auto;}
  nav.open{right:0;}
  nav ul{flex-direction:column;gap:2rem;}
  body.menu-open{overflow:hidden;}   /* lock scroll when menu is open */
}

/* ---------- HERO ---------- */
.hero{position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:0 1rem;}
.hero p{max-width:720px;margin:1.4rem auto 2rem;font-size:1.15rem;}
.blob{position:absolute;border-radius:50%;filter:blur(120px);opacity:.6;animation:float 18s infinite alternate ease-in-out;}
.blob:first-child{width:550px;height:550px;top:-200px;left:-230px;}
.blob:last-child{width:400px;height:400px;bottom:-180px;right:-160px;animation-duration:22s;animation-delay:-3s;}
@keyframes float{to{transform:translate(60px,70px);}}

/* headline animation */
#hero-title{font-size:clamp(2.4rem,6vw,4rem);font-weight:700;line-height:1.15;margin:0 auto .9rem;color:transparent;}
.word{display:inline-block;white-space:nowrap;}
.char{
  display:inline-block;
  position:relative;
  color:whitesmoke;
  -webkit-text-stroke:2px var(--black);
  animation:glow 5s ease-in-out infinite;
  animation-delay:calc(var(--i)*.12s - 2.2s);
}
@keyframes glow{
  0%,85%,100%{filter:none;}
  40%{filter:drop-shadow(0 0 10px rgba(245,130,32,.95)) drop-shadow(0 0 18px rgba(255,181,102,.85));}
  60%{filter:drop-shadow(0 0 6px rgba(245,130,32,.45));}
}

/* ---------- GRID ---------- */
.grid{display:grid;gap:2rem;}
@media(min-width:640px){.grid-2{grid-template-columns:repeat(2,1fr);} }
@media(max-width:639px){.grid-2{grid-template-columns:1fr;}}

#process .grid,#tech .grid{grid-template-columns:1fr;}

.card{background:var(--orange-light);color:#000;padding:2rem;border-radius:10px;box-shadow:none;opacity:0;transform:translateY(40px);transition:opacity .6s ease,transform .6s ease;}
.card h3{color:var(--orange);margin-bottom:.6rem;}

.step span{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:50%;background:var(--orange);color:#fff;font-weight:700;margin-bottom:.9rem;font-size:1.1rem;}

details{background:var(--orange-light);color:#000;border-radius:8px;margin-bottom:1rem;padding:1.2rem 1.5rem;box-shadow:none;}
summary{cursor:pointer;font-weight:600;display:flex;align-items:center;justify-content:space-between;}
details[open]>summary{color:var(--orange);}
summary::-webkit-details-marker{display:none;}

.reveal{opacity:1;transform:none;}
.usecases{display:flex;height:15rem;width:15rem;margin:0 auto 1.2rem;}

@media(max-width:639px){
  .usecases{width:12rem;height:12rem;margin:0 auto 1rem;}
}

/* ---------- CONTACT ---------- */
.contact-info{display:flex;flex-direction:column;gap:.65rem;margin-bottom:1.8rem;font-size:1.15rem;}
.contact-link{color:#fff;transition:color .3s ease;}
.contact-link:hover{color:var(--yellow);}
.contact-actions{display:flex;justify-content:center;gap:1rem;flex-wrap:wrap;}