:root {
  --teal:          #0de8d0;
  --teal-mid:      #09b5a5;
  --teal-dark:     #055c54;
  --teal-glow:     rgba(13, 232, 208, 0.16);
  --teal-glow-xs:  rgba(13, 232, 208, 0.055);
  --black:         #04080f;
  --surface:       #080e1a;
  --surface-2:     #0d1525;
  --border:        rgba(13, 232, 208, 0.11);
  --border-h:      rgba(13, 232, 208, 0.32);
  --text:          #dde6f0;
  --text-muted:    #6b83a0;
  --text-faint:    #3a506a;
  --r:             16px;
  --rlg:           24px;
  --rsm:           10px;
  --ease:          cubic-bezier(.4,0,.2,1);
  --t:             0.3s;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html  { scroll-behavior: smooth; }
body  {
  background: var(--black);
  color: var(--text);
  font-family: 'Outfit', sans-serif;
  font-weight: 300;
  line-height: 1.7;
  overflow-x: hidden;
}
h1,h2,h3 { font-family: 'Outfit', sans-serif; line-height: 1.1; font-weight: 700; }
a  { color: inherit; text-decoration: none; }
ul { list-style: none; }

body::before {
  content: '';
  position: fixed; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.78' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23g)' opacity='0.032'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 9000;
}

.wrap { max-width: 1120px; margin: 0 auto; padding: 0 32px; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--teal); margin-bottom: 16px;
}
.eyebrow::before {
  content: ''; width: 28px; height: 1px;
  background: var(--teal); opacity: 0.55;
}

.sh {
  font-size: clamp(2rem, 4.4vw, 3.15rem); font-weight: 800;
  letter-spacing: -0.03em; color: var(--text); margin-bottom: 14px;
}
.sh em { font-style: normal; color: var(--teal); }

.sp { font-size: 1.03rem; color: var(--text-muted); line-height: 1.84; max-width: 520px; }

.divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border) 24%, var(--border) 76%, transparent);
  max-width: 980px; margin: 0 auto;
}

.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 30px; border-radius: 50px;
  font-family: 'Outfit', sans-serif; font-size: 0.87rem; font-weight: 600;
  letter-spacing: 0.03em; border: none; cursor: pointer;
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease), background var(--t);
}
.btn-pri { background: var(--teal); color: var(--black); box-shadow: 0 0 32px rgba(13,232,208,0.38), 0 4px 18px rgba(0,0,0,0.45); }
.btn-pri:hover { background: #1cf5dd; transform: translateY(-2px); box-shadow: 0 0 52px rgba(13,232,208,0.55), 0 8px 26px rgba(0,0,0,0.55); }
.btn-ghost { background: transparent; color: var(--teal); border: 1.5px solid var(--border-h); }
.btn-ghost:hover { background: var(--teal-glow-xs); border-color: var(--teal); transform: translateY(-2px); box-shadow: 0 0 22px var(--teal-glow); }

[data-r] { opacity: 0; transform: translateY(26px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
[data-r].in { opacity:1; transform:none; }
[data-r="2"] { transition-delay:.1s; }
[data-r="3"] { transition-delay:.2s; }
[data-r="4"] { transition-delay:.3s; }
[data-r="5"] { transition-delay:.4s; }

/* ── Language switcher ── */
.lang-switcher {
  display: flex; align-items: center; gap: 3px;
  background: rgba(13,232,208,0.06);
  border: 1px solid var(--border);
  border-radius: 50px; padding: 3px 5px;
  margin-left: 18px; flex-shrink: 0;
}
.lang-btn {
  background: none; border: none; cursor: pointer;
  font-family: 'Outfit', sans-serif; font-size: 0.7rem;
  font-weight: 700; letter-spacing: 0.1em;
  color: var(--text-muted); padding: 5px 11px;
  border-radius: 50px;
  transition: color var(--t), background var(--t);
}
.lang-btn.active { background: var(--teal); color: var(--black); }
.lang-btn:not(.active):hover { color: var(--teal); }

/* ── NAV ── */
#nav {
  position: fixed; top:0; left:0; right:0; z-index:800;
  padding: 20px 0;
  transition: background var(--t), border-color var(--t), padding var(--t);
}
#nav.stuck { background: rgba(4,8,15,0.82); backdrop-filter: blur(20px); border-bottom: 1px solid var(--border); padding: 13px 0; }
.nav-inner { display:flex; align-items:center; justify-content:space-between; }
.nav-logo { font-size: 1.1rem; font-weight: 800; letter-spacing: -0.01em; color: var(--text); }
.nav-logo span { color: var(--teal); }
.nav-right { display:flex; align-items:center; }
.nav-links { display:flex; align-items:center; gap:36px; }
.nav-links a { font-size: 0.78rem; font-weight:600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--text-muted); transition: color var(--t); }
.nav-links a:hover { color: var(--teal); }
.nav-cta { padding:10px 22px; font-size:0.8rem; margin-left: 28px; }

.burger { display:none; flex-direction:column; gap:5px; padding:6px; background:none; border:none; cursor:pointer; }
.burger span { display:block; width:22px; height:1.5px; background:var(--text); border-radius:2px; transition:var(--t); }

.mob-nav {
  display:none; position:fixed; inset:0; z-index:700;
  background:rgba(4,8,15,0.97); backdrop-filter:blur(24px);
  flex-direction:column; align-items:center; justify-content:center; gap:38px;
}
.mob-nav.open { display:flex; }
.mob-nav a { font-size:1.9rem; font-weight:700; color:var(--text); transition: color var(--t); }
.mob-nav a:hover { color:var(--teal); }
.mob-close { position:absolute; top:24px; right:30px; background:none; border:none; color:var(--text-muted); font-size:1.5rem; cursor:pointer; line-height:1; }
.mob-lang { display:flex; gap:8px; margin-top:8px; }
.mob-lang .lang-btn { font-size:0.85rem; padding:8px 20px; border:1px solid var(--border); border-radius:50px; }
.mob-lang .lang-btn.active { background:var(--teal); color:var(--black); border-color:var(--teal); }

/* ── HERO ── */
#hero { min-height:100dvh; display:flex; align-items:center; position:relative; overflow:hidden; background:radial-gradient(ellipse 85% 55% at 50% -8%, #081d2c 0%, var(--black) 65%); }
#star-canvas { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.hero-grid { position:absolute; inset:0; background-image: linear-gradient(var(--border) 1px, transparent 1px), linear-gradient(90deg, var(--border) 1px, transparent 1px); background-size:72px 72px; mask-image:radial-gradient(ellipse 85% 75% at 50% 45%, black 10%, transparent 78%); }
.orb { position:absolute; border-radius:50%; pointer-events:none; filter:blur(88px); }
.orb-1 { width:580px; height:580px; top:-180px; right:-100px; background:radial-gradient(circle, rgba(13,232,208,0.10) 0%, transparent 65%); animation:float-a 12s ease-in-out infinite; }
.orb-2 { width:360px; height:360px; bottom:-60px; left:-80px; background:radial-gradient(circle, rgba(13,232,208,0.065) 0%, transparent 65%); animation:float-a 16s ease-in-out infinite reverse; }
@keyframes float-a { 0%,100%{transform:translate(0,0) scale(1);} 50%{transform:translate(18px,-32px) scale(1.06);} }
.hero-content { position:relative; z-index:2; padding:144px 0 100px; max-width:820px; }
.hero-pill { display:inline-flex; align-items:center; gap:9px; padding:6px 18px 6px 9px; border-radius:50px; border:1px solid var(--border-h); background:rgba(13,232,208,0.045); font-size:0.72rem; font-weight:600; letter-spacing:0.13em; text-transform:uppercase; color:var(--teal); margin-bottom:34px; animation:fu 0.9s var(--ease) both; }
.pill-dot { width:7px; height:7px; border-radius:50%; background:var(--teal); box-shadow:0 0 10px var(--teal); animation:pulse 2.3s ease infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.22} }
.hero-h1 { font-size:clamp(3rem, 7.2vw, 5.5rem); font-weight:800; letter-spacing:-0.036em; line-height:1.03; margin-bottom:26px; animation:fu 1s 0.12s var(--ease) both; }
.hero-h1 .accent { display:block; background:linear-gradient(100deg, var(--teal) 0%, #80f7ee 48%, var(--teal) 100%); background-size:200% auto; -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; animation:pan 5.5s linear infinite, fu 1s 0.12s var(--ease) both; }
@keyframes pan { to { background-position:200% center; } }
.hero-sub { font-size:1.14rem; color:var(--text-muted); max-width:490px; line-height:1.84; margin-bottom:46px; animation:fu 1s 0.24s var(--ease) both; }
.hero-btns { display:flex; gap:16px; flex-wrap:wrap; animation:fu 1s 0.36s var(--ease) both; }
.scroll-cue { position:absolute; bottom:36px; left:50%; transform:translateX(-50%); z-index:2; display:flex; flex-direction:column; align-items:center; gap:10px; color:var(--text-faint); font-size:0.66rem; letter-spacing:0.2em; text-transform:uppercase; font-weight:600; animation:fu 1s 0.9s var(--ease) both; }
.scroll-line { width:1px; height:50px; background:linear-gradient(to bottom, var(--teal), transparent); animation:scrl 2.6s ease infinite; }
@keyframes scrl { 0%{transform:scaleY(0);transform-origin:top;} 49%{transform:scaleY(1);transform-origin:top;} 50%{transform:scaleY(1);transform-origin:bottom;} 100%{transform:scaleY(0);transform-origin:bottom;} }
@keyframes fu { from{opacity:0;transform:translateY(22px);} to{opacity:1;transform:none;} }

/* ── ABOUT ── */
#about { padding:120px 0; }
.about-grid { display:grid; grid-template-columns:1fr 1.05fr; gap:88px; align-items:center; }
.profile-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--rlg); padding:44px; position:relative; overflow:hidden; transition:border-color var(--t), box-shadow var(--t); }
.profile-card:hover { border-color:var(--border-h); box-shadow:0 0 60px var(--teal-glow-xs); }
.profile-card::before { content:''; position:absolute; top:0; left:0; right:0; height:1.5px; background:linear-gradient(90deg, transparent, var(--teal), transparent); }
.profile-card::after { content:''; position:absolute; bottom:0; right:0; width:130px; height:130px; background:radial-gradient(circle at bottom right, rgba(13,232,208,0.065), transparent 70%); }
.avatar { width:66px; height:66px; border-radius:50%; background:linear-gradient(135deg, var(--teal-dark) 0%, #020e0c 100%); border:1.5px solid rgba(13,232,208,0.3); display:flex; align-items:center; justify-content:center; font-size:1.4rem; font-weight:800; color:var(--teal); margin-bottom:22px; box-shadow:0 0 28px rgba(13,232,208,0.18); }
.pname { font-size:1.22rem; font-weight:700; margin-bottom:3px; }
.prole { font-size:0.78rem; color:var(--teal); font-weight:600; letter-spacing:0.08em; margin-bottom:18px; }
.pbio { font-size:0.92rem; color:var(--text-muted); line-height:1.8; border-top:1px solid var(--border); padding-top:18px; }
.pstats { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:22px; }
.pstat { background:var(--teal-glow-xs); border:1px solid var(--border); border-radius:var(--rsm); padding:15px; text-align:center; transition:border-color var(--t); }
.pstat:hover { border-color:var(--border-h); }
.pstat-n { font-size:1.65rem; font-weight:800; color:var(--teal); line-height:1; margin-bottom:4px; }
.pstat-l { font-size:0.72rem; color:var(--text-muted); }
.about-text .sp { margin-bottom:28px; max-width:100%; }
.traits { display:flex; flex-direction:column; gap:15px; }
.trait { display:flex; align-items:flex-start; gap:13px; }
.trait-ic { width:36px; height:36px; border-radius:9px; background:var(--teal-glow-xs); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; font-size:0.95rem; flex-shrink:0; transition:border-color var(--t), box-shadow var(--t); }
.trait:hover .trait-ic { border-color:var(--border-h); box-shadow:0 0 16px var(--teal-glow); }
.trait-b strong { display:block; font-size:0.89rem; font-weight:600; color:var(--text); margin-bottom:2px; }
.trait-b span { font-size:0.83rem; color:var(--text-muted); }

/* ── SERVICES ── */
#services { padding:120px 0; }
.svc-hd { max-width:600px; margin-bottom:64px; }
.svc-grid { display:grid; grid-template-columns:1fr 1fr; gap:28px; }
.svc-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--rlg); padding:44px; position:relative; overflow:hidden; transition:border-color var(--t), box-shadow var(--t), transform var(--t); }
.svc-card:hover { border-color:var(--border-h); box-shadow:0 0 60px var(--teal-glow-xs); transform:translateY(-4px); }
.svc-card::before { content:''; position:absolute; top:0; left:0; right:0; height:1.5px; background:linear-gradient(90deg, transparent, var(--teal), transparent); }
.svc-ic { font-size:2rem; margin-bottom:20px; filter:drop-shadow(0 0 12px rgba(13,232,208,0.4)); }
.svc-title { font-size:1.18rem; font-weight:700; color:var(--text); margin-bottom:12px; }
.svc-desc { font-size:0.9rem; color:var(--text-muted); line-height:1.84; margin-bottom:28px; }
.svc-feats { display:flex; flex-direction:column; gap:9px; }
.svc-feat { display:flex; align-items:center; gap:10px; font-size:0.83rem; color:var(--text-muted); }
.svc-feat::before { content:''; width:6px; height:6px; border-radius:50%; background:var(--teal); flex-shrink:0; box-shadow:0 0 8px var(--teal); }

/* ── PROCESS ── */
#process { padding:120px 0; }
.proc-hd { max-width:560px; margin-bottom:64px; }
.proc-row { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; margin-bottom:24px; }
.pstep { background:var(--surface); border:1px solid var(--border); border-radius:var(--r); padding:28px 24px; transition:border-color var(--t), box-shadow var(--t); }
.pstep:hover { border-color:var(--border-h); box-shadow:0 0 40px var(--teal-glow-xs); }
.pdot-w { width:42px; height:42px; border-radius:12px; background:var(--teal-glow-xs); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; margin-bottom:16px; font-size:1.1rem; }
.pnum { font-size:0.68rem; font-weight:700; letter-spacing:0.15em; text-transform:uppercase; color:var(--teal); display:block; margin-bottom:8px; }
.ptitle { font-size:0.97rem; font-weight:700; color:var(--text); margin-bottom:8px; }
.pdesc { font-size:0.82rem; color:var(--text-muted); line-height:1.72; }

/* ── CONTACT ── */
#contact { padding:120px 0; }
.contact-wrap { max-width:580px; }
.contact-link { display:inline-flex; align-items:center; gap:18px; padding:22px 30px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r); margin-top:36px; transition:border-color var(--t), box-shadow var(--t), transform var(--t); }
.contact-link:hover { border-color:var(--border-h); box-shadow:0 0 40px var(--teal-glow-xs); transform:translateX(4px); }
.cl-icon { font-size:1.5rem; }
.cl-text { display:flex; flex-direction:column; }
.cl-text strong { font-size:0.94rem; font-weight:700; color:var(--text); }
.cl-text span { font-size:0.83rem; color:var(--teal); }

/* ── FOOTER ── */
footer { padding:36px 0; border-top:1px solid var(--border); }
.ft-inner { display:flex; align-items:center; justify-content:space-between; }
.ft-copy { font-size:0.8rem; color:var(--text-muted); }
.ft-copy span { color:var(--teal); font-weight:600; }
.ft-nav { display:flex; gap:28px; }
.ft-nav a { font-size:0.78rem; font-weight:600; letter-spacing:0.07em; text-transform:uppercase; color:var(--text-muted); transition:color var(--t); }
.ft-nav a:hover { color:var(--teal); }

/* ── RESPONSIVE ── */
@media (max-width:900px) {
  .svc-grid   { grid-template-columns:1fr; }
  .about-grid { grid-template-columns:1fr; gap:44px; }
  .proc-row   { grid-template-columns:1fr 1fr; }
}
@media (max-width:600px) {
  .nav-links, .nav-cta { display:none; }
  .burger     { display:flex; }
  .lang-switcher { display:none; }
  .proc-row   { grid-template-columns:1fr; }
  .pstats     { grid-template-columns:1fr 1fr; }
  .ft-inner   { flex-direction:column; text-align:center; gap:20px; }
  .ft-nav     { justify-content:center; flex-wrap:wrap; }
}