:root{
  --bg:#07101c;
  --bg2:#091426;
  --panel:#0d1b2f;
  --panel2:#10233d;
  --text:#f6f8ff;
  --muted:#9dacbf;
  --line:rgba(255,255,255,.1);
  --blue:#5ab7ff;
  --cyan:#3de7d1;
  --purple:#8d63ff;
  --pink:#d768ff;
  --green:#53e7a0;
  --orange:#ffb14f;
  --shadow:0 22px 70px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at 20% 0%, rgba(70,75,180,.18), transparent 30%),
    radial-gradient(circle at 90% 20%, rgba(20,165,220,.12), transparent 28%),
    linear-gradient(180deg,var(--bg),#050b14 70%);
  color:var(--text);
  min-height:100vh;
  overflow-x:hidden;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),linear-gradient(90deg,rgba(255,255,255,.018) 1px, transparent 1px);
  background-size:36px 36px;
  mask-image:linear-gradient(to bottom,black,transparent 75%);
}
.noise{
  position:fixed; inset:0; pointer-events:none; opacity:.18; z-index:0;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.08'/%3E%3C/svg%3E");
}

a{color:inherit;text-decoration:none}
button{font:inherit}

.site-header{
  position:sticky;top:0;z-index:50;
  height:76px;padding:0 5vw;
  display:flex;align-items:center;gap:30px;
  backdrop-filter:blur(16px);
  background:rgba(6,13,24,.78);
  border-bottom:1px solid var(--line);
}
.brand{display:flex;align-items:center;gap:12px;min-width:250px}
.brand-mark{
  width:42px;height:42px;border:1px solid rgba(130,110,255,.55);
  border-radius:14px;display:grid;place-items:center;
  background:linear-gradient(135deg,rgba(85,190,255,.2),rgba(150,70,255,.26));
  color:#dfe6ff;font-weight:800;
  box-shadow:0 0 30px rgba(112,92,255,.18);
}
.brand-copy{display:flex;flex-direction:column;line-height:1.1}
.brand-copy strong{font-size:15px}
.brand-copy small{font-size:9px;letter-spacing:.12em;color:var(--muted);margin-top:5px;text-transform:uppercase}
.nav{display:flex;align-items:center;justify-content:center;gap:26px;flex:1}
.nav a{font-size:13px;color:#bac6d7;transition:.25s}
.nav a:hover,.nav a.active{color:white}
.nav a.active::after{content:"";display:block;width:5px;height:5px;margin:7px auto 0;border-radius:50%;background:var(--purple);box-shadow:0 0 14px var(--purple)}
.menu-btn{display:none;background:none;color:white;border:0;font-size:26px}
.header-cta{white-space:nowrap}

.section{
  position:relative;z-index:1;
  width:min(1520px,92vw);
  margin:0 auto;
  padding:110px 0;
}
.hero{
  min-height:790px;
  display:grid;grid-template-columns:1.05fr .95fr;gap:50px;align-items:center;
}
.eyebrow{
  color:#98aed0;font-size:12px;letter-spacing:.2em;text-transform:uppercase;
  display:flex;align-items:center;gap:9px;margin-bottom:18px
}
.dot{width:7px;height:7px;border-radius:50%}.dot-blue{background:var(--blue);box-shadow:0 0 18px var(--blue)}
.hero h1{font-size:clamp(68px,7vw,122px);line-height:.92;margin:0;letter-spacing:-.05em}
.gradient-text{
  background:linear-gradient(90deg,#a8d8ff 5%,#8e7cff 50%,#d76cff);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero h2{font-size:clamp(24px,2.2vw,38px);font-weight:500;margin:24px 0 20px;color:#e5ebf8}
.hero-lead{font-size:19px;line-height:1.72;color:#adbbce;max-width:760px}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin:34px 0}
.button{
  appearance:none;border:1px solid var(--line);border-radius:14px;
  padding:14px 20px;color:white;background:#0c1728;
  cursor:pointer;display:inline-flex;align-items:center;justify-content:center;
  transition:.25s;box-shadow:none
}
.button:hover{transform:translateY(-2px);border-color:rgba(255,255,255,.26)}
.button-primary{
  background:linear-gradient(90deg,#4a8fff,#845dff 65%,#bd5cff);
  border-color:transparent;box-shadow:0 12px 36px rgba(111,87,255,.25)
}
.button-ghost{background:rgba(8,17,31,.58)}
.skill-strip{display:flex;gap:10px;flex-wrap:wrap;margin-top:36px}
.skill-strip span,.tags span{
  font-size:11px;color:#c7d2df;background:rgba(255,255,255,.045);
  border:1px solid var(--line);border-radius:999px;padding:8px 12px
}

.hero-visual{min-height:560px;position:relative;display:grid;place-items:center}
.orb{position:absolute;border-radius:50%;filter:blur(35px);opacity:.32}
.orb-a{width:330px;height:330px;background:#6f58ff;right:15%;top:8%}
.orb-b{
  display:none !important;
}
.glass-card{
  background:linear-gradient(180deg,rgba(18,36,61,.8),rgba(8,17,30,.74));
  border:1px solid rgba(150,180,255,.14);
  box-shadow:var(--shadow);backdrop-filter:blur(18px)
}

.portrait-placeholder{height:440px;display:grid;place-items:center;align-content:center;text-align:center;gap:10px;color:#9eabc0}
.portrait-initials{
  width:180px;height:180px;border-radius:50%;display:grid;place-items:center;
  font-size:56px;font-weight:800;color:white;
  background:linear-gradient(145deg,rgba(74,147,255,.2),rgba(168,85,255,.23));
  border:1px solid rgba(168,180,255,.25);
  box-shadow:0 0 90px rgba(86,98,255,.23)
}
.portrait-caption{
  height:80px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 22px;color:#bbc6d5;font-size:12px
}
.status i{display:inline-block;width:8px;height:8px;background:#3ce496;border-radius:50%;margin-right:8px;box-shadow:0 0 10px #3ce496}
.lab-card{position:absolute;width:210px;border-radius:18px;padding:18px;display:flex;flex-direction:column;gap:7px}
.lab-card small{color:#8596ae;letter-spacing:.14em}.lab-card strong{font-size:18px}.lab-card span{color:#92a1b5;font-size:12px;line-height:1.4}
.lab-card-1{left:-2%;top:15%}.lab-card-2{right:-2%;bottom:15%}
.online{color:var(--green)}

.section-heading{display:flex;justify-content:space-between;gap:40px;align-items:end;margin-bottom:42px}
.section-heading.center{flex-direction:column;align-items:center;text-align:center}
.section-heading h2{font-size:clamp(38px,4vw,64px);line-height:1.03;margin:0;letter-spacing:-.04em}
.section-heading p{max-width:560px;color:var(--muted);line-height:1.7}

.projects-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.project-card{
  min-height:570px;border:1px solid rgba(145,165,210,.15);border-radius:24px;overflow:hidden;
  background:linear-gradient(180deg,rgba(12,25,43,.95),rgba(7,15,28,.98));
  box-shadow:0 26px 70px rgba(0,0,0,.22);transition:.3s
}
.project-card:hover{transform:translateY(-5px);border-color:rgba(138,116,255,.36)}
.project-top{display:flex;justify-content:space-between;align-items:center;padding:20px 22px 0}
.project-icon{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;font-size:21px;font-weight:700}
.purple{background:rgba(139,92,246,.18);color:#b490ff}.green{background:rgba(48,211,140,.16);color:#56e6a6}.cyan{background:rgba(56,189,248,.16);color:#65cdf8}.blue{background:rgba(65,125,255,.17);color:#7ca8ff}
.badge{font-size:10px;border-radius:999px;padding:7px 10px;border:1px solid var(--line)}
.purple-badge{color:#d5c0ff}.green-badge{color:#82f0bd}.cyan-badge{color:#88dcff}.blue-badge{color:#a8c1ff}
.project-preview{height:275px;margin:18px 20px;border-radius:18px;border:1px solid rgba(255,255,255,.08);overflow:hidden;position:relative}
.project-body{padding:4px 24px 24px}
.project-body h3{font-size:28px;margin:8px 0 10px}
.project-body p{color:#a6b5c8;line-height:1.63;min-height:54px}
.tags{display:flex;gap:8px;flex-wrap:wrap;margin:18px 0}
.project-actions{display:flex;gap:10px;flex-wrap:wrap}

.shparg-preview{padding:18px;background:radial-gradient(circle at 90% 10%,rgba(131,84,255,.22),transparent 40%),#0b1424}
.mini-window{height:100%;display:grid;grid-template-columns:120px 1fr;grid-template-rows:28px 1fr;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#101b2d}
.mini-toolbar{grid-column:1/-1;display:flex;gap:5px;align-items:center;padding:0 10px;background:#0a1321}.mini-toolbar i{width:6px;height:6px;border-radius:50%;background:#6f7990}
.mini-sidebar{padding:12px;border-right:1px solid var(--line);display:flex;flex-direction:column;gap:11px;font-size:10px;color:#9aa7ba}.mini-sidebar b{color:#fff}
.mini-content{padding:20px}.mini-content h4{font-size:18px;margin:0 0 20px}.fake-line{height:7px;background:#263c59;border-radius:9px;margin:9px 0}.w90{width:90%}.w70{width:70%}.fake-note{margin-top:22px;background:rgba(139,92,246,.14);border:1px solid rgba(139,92,246,.22);border-radius:12px;padding:12px;color:#c9baff;font-size:11px}
.voice-preview{background:radial-gradient(circle at 50% 50%,rgba(43,222,180,.18),transparent 32%),linear-gradient(180deg,#0d1d28,#09141e);display:grid;place-items:center}
.waveform{height:120px;display:flex;align-items:center;gap:7px}.waveform span{width:7px;border-radius:99px;background:linear-gradient(#62edc0,#6698ff);animation:pulse 1.1s ease-in-out infinite}.waveform span:nth-child(1){height:30px}.waveform span:nth-child(2){height:70px}.waveform span:nth-child(3){height:46px}.waveform span:nth-child(4){height:104px}.waveform span:nth-child(5){height:58px}.waveform span:nth-child(6){height:90px}.waveform span:nth-child(7){height:42px}.waveform span:nth-child(8){height:76px}.waveform span:nth-child(9){height:110px}.waveform span:nth-child(10){height:66px}.waveform span:nth-child(11){height:84px}.waveform span:nth-child(12){height:34px}
.waveform span:nth-child(2n){animation-delay:.15s}.waveform span:nth-child(3n){animation-delay:.3s}
@keyframes pulse{50%{transform:scaleY(.45);opacity:.55}}
.call-chip{position:absolute;bottom:18px;border:1px solid var(--line);background:rgba(0,0,0,.28);padding:8px 12px;border-radius:999px;color:#b7c6d6;font-size:11px}
.fuel-preview{background:radial-gradient(circle at 85% 10%,rgba(34,166,255,.18),transparent 35%),#0c1725;padding:30px}
.chart{height:140px;display:flex;gap:10px;align-items:end;border-bottom:1px solid var(--line)}
.chart i{flex:1;background:linear-gradient(#36e2c0,#4b78ff);border-radius:5px 5px 0 0;opacity:.82}
.fuel-stat{display:flex;justify-content:space-between;margin-top:20px;color:#9fb1c4}.fuel-stat strong{color:#6be7ad}
.rag-preview{background:linear-gradient(145deg,#10192b,#0a1220);padding:22px;display:flex;flex-direction:column;justify-content:center;gap:14px}
.chat-bubble{max-width:82%;padding:12px 14px;border-radius:14px;font-size:12px;line-height:1.45}.chat-bubble.user{align-self:flex-end;background:linear-gradient(90deg,#315efb,#6e59ff)}.chat-bubble.ai{background:#16243b;color:#c8d3df}.sources{color:#71849f;font-size:10px}

.ecosystem{
  position:relative;height:760px;border-radius:30px;overflow:hidden;
  border:1px solid rgba(127,153,220,.14);
  background:
    radial-gradient(circle at 50% 48%,rgba(82,76,215,.20),transparent 23%),
    radial-gradient(circle at 70% 25%,rgba(48,168,255,.10),transparent 24%),
    #07111e;
}
.network-lines{
  position:absolute;inset:0;opacity:.85;
  background:
    radial-gradient(circle at 50% 50%,transparent 0 12%,rgba(120,106,255,.14) 12.4% 12.8%,transparent 13% 24%,rgba(70,168,255,.08) 24.3% 24.6%,transparent 25%),
    repeating-radial-gradient(circle at 50% 50%,transparent 0 58px,rgba(255,255,255,.024) 59px 60px);
}
.eco-node,.eco-project{position:absolute;z-index:3}
.eco-node{
  border:1px solid rgba(140,170,255,.24);color:white;background:rgba(11,24,42,.88);
  box-shadow:0 0 35px rgba(71,91,255,.13);border-radius:50%;cursor:pointer;
  transition:.3s;display:flex;flex-direction:column;align-items:center;justify-content:center
}
.eco-node:hover,.eco-node.active{transform:scale(1.08);box-shadow:0 0 45px rgba(91,100,255,.35)}
.eco-node b{font-size:16px}.eco-node small{font-size:9px;color:#8fa0b8;margin-top:4px}
.core{width:160px;height:160px;left:50%;top:50%;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(120,90,255,.26),rgba(7,17,30,.94));border-color:rgba(167,134,255,.5)}
.core:hover,.core.active{transform:translate(-50%,-50%) scale(1.06)}
.core span{font-size:42px;font-weight:800}.core small{font-size:11px}
.node-python{width:125px;height:125px;right:24%;top:18%}.node-rag{width:110px;height:110px;left:24%;bottom:19%}.node-voice{width:115px;height:115px;left:24%;top:21%}.node-monitor{width:125px;height:125px;right:22%;bottom:18%}.node-education{width:120px;height:120px;left:43%;top:8%}.node-automation{width:125px;height:125px;right:7%;top:42%}
.eco-project{
  min-width:190px;padding:16px 18px;border-radius:16px;border:1px solid var(--line);
  background:rgba(12,25,43,.88);display:flex;flex-direction:column;gap:5px;transition:.3s
}
.eco-project strong{font-size:14px}.eco-project span{font-size:10px;color:#8fa2ba}
.eco-project.dim{opacity:.16;transform:scale(.96)}
.eco-project.hit{border-color:rgba(132,103,255,.6);box-shadow:0 0 30px rgba(112,89,255,.23)}
.eco-p1{left:5%;top:8%}.eco-p2{left:5%;bottom:10%}.eco-p3{right:5%;bottom:9%}.eco-p4{right:6%;top:10%}

.skills-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.skill-card{padding:28px;border:1px solid var(--line);border-radius:20px;background:linear-gradient(180deg,rgba(14,28,48,.85),rgba(8,16,28,.86))}
.skill-card span{color:#6d7f96;font-size:11px}.skill-card h3{font-size:24px;margin:22px 0 10px}.skill-card p{color:#9fb0c5;line-height:1.6;margin:0}
.about-card{border-radius:28px;padding:54px;display:grid;grid-template-columns:.9fr 1.1fr;gap:60px}
.about-card h2{font-size:48px;line-height:1.05;margin:0}.about-copy p{font-size:17px;line-height:1.8;color:#aab8ca;margin-top:0}
.contact-card{text-align:center;padding:70px 30px;border:1px solid var(--line);border-radius:30px;background:radial-gradient(circle at 50% 20%,rgba(111,82,255,.22),transparent 35%),rgba(8,17,29,.92)}
.contact-card .eyebrow{justify-content:center}.contact-card h2{font-size:clamp(38px,4vw,64px);margin:10px 0}.contact-card p{color:#9fb0c3}.contact-actions{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:30px}
footer{width:min(1520px,92vw);margin:0 auto;padding:28px 0 42px;display:flex;justify-content:space-between;color:#6f7f93;font-size:11px;border-top:1px solid var(--line)}

.modal{position:fixed;inset:0;z-index:100;display:none}.modal.open{display:block}.modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.72);backdrop-filter:blur(8px)}
.modal-panel{position:relative;width:min(900px,92vw);max-height:88vh;overflow:auto;margin:6vh auto;background:#0b1728;border:1px solid rgba(150,170,220,.17);border-radius:24px;box-shadow:0 30px 90px rgba(0,0,0,.55);padding:30px}
.modal-close{position:absolute;right:18px;top:12px;background:none;border:0;color:#9fb0c4;font-size:34px;cursor:pointer}
.demo-title{font-size:34px;margin:0 0 8px}.demo-sub{color:#91a3ba;line-height:1.6}
.demo-box{margin-top:24px;padding:22px;border-radius:18px;border:1px solid var(--line);background:#0f1d31}
.demo-controls{display:flex;gap:10px;flex-wrap:wrap;margin:16px 0}.demo-input{width:100%;background:#091322;border:1px solid var(--line);border-radius:12px;color:white;padding:14px 15px;outline:none}
.demo-output{min-height:90px;border-radius:14px;background:#0a1423;border:1px solid var(--line);padding:16px;color:#c5d0dd;line-height:1.6;white-space:pre-line}
.demo-meter{height:10px;background:#111d2f;border-radius:99px;overflow:hidden}.demo-meter i{display:block;height:100%;width:30%;background:linear-gradient(90deg,#4c8cff,#825fff,#48e0b0);transition:.4s}
.case-list{display:grid;gap:10px;margin-top:20px}.case-row{display:grid;grid-template-columns:140px 1fr;gap:16px;padding:14px;border-bottom:1px solid var(--line)}.case-row b{color:#fff}.case-row span{color:#9eb0c4}

.reveal{opacity:0;transform:translateY(20px);transition:.75s ease}.reveal.visible{opacity:1;transform:none}.delay-1{transition-delay:.12s}.delay-2{transition-delay:.22s}

@media(max-width:1100px){
  .nav{display:none;position:absolute;left:0;right:0;top:76px;padding:22px 5vw;background:#07111f;border-bottom:1px solid var(--line);flex-direction:column}
  .nav.open{display:flex}.menu-btn{display:block;margin-left:auto}.header-cta{display:none}.brand{min-width:0}
  .hero{grid-template-columns:1fr;padding-top:70px}.hero-visual{min-height:500px}.lab-card-1{left:1%}.lab-card-2{right:1%}
  .section-heading{align-items:flex-start;flex-direction:column}.skills-grid{grid-template-columns:repeat(2,1fr)}
  .about-card{grid-template-columns:1fr;gap:24px}
  .ecosystem{height:700px}.eco-project{min-width:160px}
}
@media(max-width:760px){
  .site-header{padding:0 20px}.brand-copy small{display:none}
  .section{width:min(92vw,680px);padding:80px 0}.hero{min-height:auto}
  .hero h1{font-size:58px}.hero h2{font-size:24px}.hero-lead{font-size:16px}
  .hero-visual{min-height:440px}.portrait-card{height:430px}.portrait-placeholder{height:355px}
  .lab-card{display:none}.projects-grid,.skills-grid{grid-template-columns:1fr}
  .project-card{min-height:auto}.project-preview{height:240px}
  .ecosystem{height:760px}.eco-node{transform:scale(.82)}.core{transform:translate(-50%,-50%) scale(.82)}.core:hover,.core.active{transform:translate(-50%,-50%) scale(.88)}
  .node-python{right:5%;top:20%}.node-rag{left:5%;bottom:18%}.node-voice{left:4%;top:22%}.node-monitor{right:5%;bottom:18%}.node-education{left:40%;top:7%}.node-automation{right:3%;top:47%}
  .eco-project{font-size:11px;min-width:135px;padding:10px}.eco-p1{left:2%;top:4%}.eco-p2{left:2%;bottom:3%}.eco-p3{right:2%;bottom:3%}.eco-p4{right:2%;top:4%}
  .about-card{padding:30px}.about-card h2{font-size:36px}
  footer{flex-direction:column;gap:10px}
}


/* ==========================
   V2: harmonic animated neon
   ========================== */

:root{
  --neon-blue:#5fb8ff;
  --neon-violet:#8e6bff;
  --neon-cyan:#49e7e1;
  --neon-pink:#d36dff;
}

body{
  background:
    radial-gradient(circle at 18% 5%, rgba(87,91,190,.18), transparent 30%),
    radial-gradient(circle at 88% 18%, rgba(35,169,218,.14), transparent 29%),
    radial-gradient(circle at 52% 65%, rgba(113,76,209,.08), transparent 34%),
    linear-gradient(180deg,var(--bg),#050b14 72%);
}

.site-header{
  box-shadow:0 6px 30px rgba(0,0,0,.12);
}

.brand-mark{
  position:relative;
  overflow:hidden;
}
.brand-mark::after{
  content:"";
  position:absolute;
  inset:-2px;
  background:conic-gradient(from 0deg, transparent 0 30%, rgba(95,184,255,.95), rgba(142,107,255,.9), rgba(73,231,225,.75), transparent 70% 100%);
  filter:blur(10px);
  opacity:.28;
  animation:spinGlow 9s linear infinite;
  z-index:-1;
}

.hero{overflow:visible}

.neon-blob{
  position:absolute;
  border-radius:50%;
  filter:blur(55px);
  opacity:.22;
  mix-blend-mode:screen;
  animation:floatGlow 12s ease-in-out infinite alternate;
}
.nb1{width:340px;height:340px;background:var(--neon-violet);left:2%;top:14%}
.nb2{width:280px;height:280px;background:var(--neon-blue);right:22%;top:8%;animation-delay:-4s}
.nb3{width:250px;height:250px;background:var(--neon-cyan);right:1%;bottom:8%;animation-delay:-7s}
.neon-orbit{
  position:absolute;
  border:1px solid rgba(120,145,255,.10);
  border-radius:50%;
  box-shadow:0 0 50px rgba(91,114,255,.05);
  animation:orbitPulse 7s ease-in-out infinite;
}
.no1{width:620px;height:620px;right:4%;top:4%}
.no2{width:420px;height:420px;right:10%;top:17%;animation-delay:-2.5s}

.shimmer-text{
  background-size:220% 100%;
  animation:shimmerText 7s ease-in-out infinite;
  text-shadow:0 0 24px rgba(108,103,255,.10);
}

.button{
  position:relative;
  overflow:hidden;
}
.button::before{
  content:"";
  position:absolute;
  top:-40%;
  left:-35%;
  width:34%;
  height:180%;
  transform:rotate(18deg);
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.20), transparent);
  opacity:0;
  transition:opacity .2s;
}
.button:hover::before{
  opacity:1;
  animation:buttonSweep .95s ease forwards;
}
.button-primary{
  background:linear-gradient(100deg,#4b8dff 0%,#7763ff 45%,#b85cff 72%,#5bbcff 100%);
  background-size:220% 100%;
  animation:gradientDrift 8s ease-in-out infinite;
  box-shadow:
    0 10px 34px rgba(102,83,255,.24),
    0 0 0 1px rgba(255,255,255,.03) inset;
}
.button-primary:hover{
  box-shadow:
    0 14px 40px rgba(102,83,255,.30),
    0 0 28px rgba(87,173,255,.14);
}

.skill-strip span,.tags span{
  transition:.28s ease;
}
.skill-strip span:hover,.tags span:hover{
  border-color:rgba(110,135,255,.36);
  box-shadow:0 0 18px rgba(90,115,255,.11);
  color:#eef5ff;
}

.glass-card{
  position:relative;
}
.glass-card::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  padding:1px;
  background:linear-gradient(130deg,rgba(87,177,255,.22),rgba(138,98,255,.15),rgba(72,230,222,.13),rgba(255,255,255,.03));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  pointer-events:none;
}



.portrait-placeholder,.portrait-caption{position:relative;z-index:1}
.portrait-initials{
  box-shadow:
    0 0 55px rgba(92,99,255,.23),
    0 0 90px rgba(74,183,255,.08);
  animation:softPulse 4.5s ease-in-out infinite;
}

.lab-card{
  transition:.35s ease;
  box-shadow:0 18px 48px rgba(0,0,0,.32),0 0 30px rgba(93,96,255,.05);
}
.lab-card:hover{
  transform:translateY(-4px);
  box-shadow:0 22px 55px rgba(0,0,0,.36),0 0 36px rgba(98,104,255,.12);
}

.project-card{
  position:relative;
  isolation:isolate;
}
.project-card::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  padding:1px;
  background:linear-gradient(120deg,rgba(75,169,255,.0),rgba(120,95,255,.20),rgba(66,220,211,.09),rgba(75,169,255,.0));
  background-size:220% 100%;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  opacity:.45;
  animation:borderFlow 9s linear infinite;
  pointer-events:none;
}
.project-card:hover::before{opacity:.9}
.project-card:hover{
  transform:translateY(-6px);
  box-shadow:
    0 28px 75px rgba(0,0,0,.30),
    0 0 40px rgba(95,90,255,.08);
}

.project-icon{
  box-shadow:0 0 24px rgba(120,100,255,.07);
  transition:.3s;
}
.project-card:hover .project-icon{
  transform:translateY(-2px) scale(1.04);
}

.ecosystem{
  box-shadow:0 30px 90px rgba(0,0,0,.26),0 0 60px rgba(94,85,255,.05);
}
.network-lines{
  animation:networkBreath 6s ease-in-out infinite;
}
.eco-node{
  overflow:hidden;
}
.eco-node::after{
  content:"";
  position:absolute;
  width:55%;
  height:200%;
  top:-50%;
  left:-75%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.12),transparent);
  transform:rotate(20deg);
  animation:nodeSweep 8s ease-in-out infinite;
}
.eco-node{
  box-shadow:0 0 25px rgba(92,103,255,.11);
}
.node-python{box-shadow:0 0 30px rgba(255,177,79,.11)}
.node-rag{box-shadow:0 0 30px rgba(74,164,255,.12)}
.node-voice{box-shadow:0 0 30px rgba(255,125,88,.10)}
.node-monitor{box-shadow:0 0 30px rgba(83,231,160,.11)}
.node-education{box-shadow:0 0 30px rgba(173,100,255,.11)}
.node-automation{box-shadow:0 0 30px rgba(71,190,255,.11)}

.eco-project{
  backdrop-filter:blur(10px);
}
.eco-project.hit{
  box-shadow:0 0 36px rgba(112,89,255,.28), inset 0 0 18px rgba(93,126,255,.04);
}

.contact-card{
  position:relative;
  overflow:hidden;
}
.contact-card::before{
  content:"";
  position:absolute;
  width:540px;height:540px;
  border-radius:50%;
  left:50%;top:-270px;
  transform:translateX(-50%);
  background:conic-gradient(from 0deg,rgba(72,180,255,.10),rgba(145,91,255,.16),rgba(71,222,214,.08),rgba(72,180,255,.10));
  filter:blur(40px);
  animation:slowSpin 16s linear infinite;
  pointer-events:none;
}
.contact-card > *{position:relative;z-index:1}

@keyframes shimmerText{
  0%,100%{background-position:0% 50%}
  50%{background-position:100% 50%}
}
@keyframes gradientDrift{
  0%,100%{background-position:0% 50%}
  50%{background-position:100% 50%}
}
@keyframes buttonSweep{
  from{left:-35%}
  to{left:125%}
}
@keyframes floatGlow{
  0%{transform:translate3d(0,0,0) scale(1)}
  100%{transform:translate3d(18px,-22px,0) scale(1.08)}
}
@keyframes orbitPulse{
  0%,100%{opacity:.28;transform:scale(1)}
  50%{opacity:.46;transform:scale(1.025)}
}
@keyframes slowSpin{
  to{transform:rotate(360deg)}
}
@keyframes spinGlow{
  to{transform:rotate(360deg)}
}
@keyframes softPulse{
  0%,100%{transform:scale(1);filter:brightness(1)}
  50%{transform:scale(1.025);filter:brightness(1.08)}
}
@keyframes borderFlow{
  0%{background-position:0% 50%}
  100%{background-position:220% 50%}
}
@keyframes networkBreath{
  0%,100%{opacity:.72}
  50%{opacity:.95}
}
@keyframes nodeSweep{
  0%,78%{left:-75%;opacity:0}
  83%{opacity:.55}
  100%{left:130%;opacity:0}
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    scroll-behavior:auto !important;
  }
}

/* V3 fixed neon */
.hero{position:relative;overflow:hidden!important;isolation:isolate}.neon-blob{filter:blur(72px);mix-blend-mode:screen;opacity:.34}.nb1{width:440px;height:440px;left:-7%;top:6%;background:radial-gradient(circle,rgba(139,93,255,.95),rgba(92,87,255,.42) 36%,transparent 72%);animation:auroraOne 10s ease-in-out infinite alternate}.nb2{width:410px;height:410px;right:22%;top:1%;background:radial-gradient(circle,rgba(61,147,255,.95),rgba(74,93,255,.36) 40%,transparent 74%);animation:auroraTwo 12s ease-in-out infinite alternate}.nb3{width:420px;height:420px;right:-7%;bottom:-5%;background:radial-gradient(circle,rgba(42,223,219,.78),rgba(33,155,224,.34) 42%,transparent 74%);animation:auroraThree 11s ease-in-out infinite alternate}.shimmer-text{display:inline-block;background-image:linear-gradient(100deg,#a8dfff 0%,#738cff 22%,#9a70ff 45%,#d366ff 61%,#73caff 83%,#a8dfff 100%)!important;background-size:260% 100%!important;-webkit-background-clip:text!important;background-clip:text!important;color:transparent!important;animation:nameNeonFlow 5.8s ease-in-out infinite!important;filter:drop-shadow(0 0 16px rgba(126,102,255,.15))}.button-primary{background-image:linear-gradient(110deg,#3f8fff 0%,#6568ff 28%,#935cff 53%,#ca59ef 72%,#48bdf2 100%)!important;background-size:260% 100%!important;animation:buttonGradientFlow 6.5s ease-in-out infinite!important;box-shadow:0 12px 34px rgba(86,84,255,.24),0 0 22px rgba(91,170,255,.07)}.lab-card{display:none!important}.hero-visual{position:relative;min-height:560px;display:grid;place-items:center}.portrait-placeholder{position:relative;height:458px;display:grid;place-items:center;align-content:center;text-align:center;gap:10px;overflow:hidden}.portrait-glow-ring{position:absolute;width:330px;height:330px;border-radius:50%;border:1px solid rgba(127,111,255,.17);box-shadow:0 0 34px rgba(112,91,255,.08),inset 0 0 30px rgba(80,166,255,.035);animation:ringBreath 4.8s ease-in-out infinite}.portrait-initials{position:relative;z-index:2;width:185px;height:185px;font-size:54px;background:radial-gradient(circle at 35% 25%,rgba(111,150,255,.42),transparent 40%),linear-gradient(145deg,rgba(68,86,177,.75),rgba(92,57,145,.82));border:1px solid rgba(150,144,255,.28);box-shadow:0 0 42px rgba(94,92,255,.18),0 0 78px rgba(56,157,255,.08)}.inside-chip{position:absolute;z-index:4;min-width:150px;padding:12px 14px;display:flex;flex-direction:column;gap:5px;border-radius:14px;border:1px solid rgba(135,158,220,.15);background:rgba(10,23,41,.72);backdrop-filter:blur(12px);box-shadow:0 14px 34px rgba(0,0,0,.24),0 0 25px rgba(91,100,255,.05)}.inside-chip span{font-size:9px;letter-spacing:.16em;color:#879bb4}.inside-chip b{font-size:14px;color:#ecf3ff}.inside-chip i{display:inline-block;width:7px;height:7px;border-radius:50%;background:#42e69a;box-shadow:0 0 10px #42e69a;margin-right:6px}.chip-top{left:22px;top:22px}.chip-bottom{right:22px;bottom:24px}.chip-bottom b{color:#77efbb}.neon-flow-line{position:relative;width:min(610px,95%);height:1px;margin-top:30px;background:linear-gradient(90deg,transparent,rgba(98,122,255,.18),rgba(72,211,225,.18),transparent)}.neon-flow-line i{position:absolute;top:-1px;width:110px;height:3px;border-radius:99px;background:linear-gradient(90deg,transparent,#6d88ff,#b169ff,#60d8eb,transparent);box-shadow:0 0 12px rgba(116,108,255,.55);animation:lightRunner 4.6s linear infinite}.project-card::before{opacity:.58!important;background:linear-gradient(115deg,rgba(90,168,255,0),rgba(90,168,255,.32),rgba(146,92,255,.34),rgba(62,221,213,.20),rgba(90,168,255,0))!important;background-size:300% 100%!important;animation:edgeTravel 7.5s linear infinite!important}@keyframes nameNeonFlow{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}@keyframes buttonGradientFlow{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}@keyframes portraitBorderFlow{0%,100%{background-position:0 0,0% 50%}50%{background-position:0 0,100% 50%}}@keyframes auroraOne{0%{transform:translate3d(-15px,10px,0) scale(.96);opacity:.24}100%{transform:translate3d(70px,-20px,0) scale(1.12);opacity:.40}}@keyframes auroraTwo{0%{transform:translate3d(30px,-18px,0) scale(1.04);opacity:.23}100%{transform:translate3d(-55px,38px,0) scale(.96);opacity:.39}}@keyframes auroraThree{0%{transform:translate3d(0,25px,0) scale(.98);opacity:.22}100%{transform:translate3d(-65px,-35px,0) scale(1.10);opacity:.36}}@keyframes ringBreath{0%,100%{transform:scale(.97);opacity:.50}50%{transform:scale(1.035);opacity:.86}}@keyframes lightRunner{from{left:-115px}to{left:100%}}@keyframes edgeTravel{from{background-position:0% 50%}to{background-position:300% 50%}}


/* ==========================================
   V4 — softer edges + pulse line + interactions
   ========================================== */

/* 1) REMOVE HARD SIDE EDGES / MAKE HERO FADE SMOOTHLY */
.hero{
  position:relative;
  isolation:isolate;
  overflow:hidden !important;
}

/* Soft vignette / fade instead of visible rectangular side boundaries */
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    linear-gradient(90deg,
      rgba(5,11,20,.96) 0%,
      rgba(5,11,20,.36) 4%,
      rgba(5,11,20,0) 11%,
      rgba(5,11,20,0) 89%,
      rgba(5,11,20,.34) 96%,
      rgba(5,11,20,.92) 100%
    ),
    linear-gradient(180deg,
      rgba(5,11,20,.10) 0%,
      rgba(5,11,20,0) 70%,
      rgba(5,11,20,.26) 100%
    );
}

/* Blend the animated neon background into the page instead of clipping visibly */


/* Slightly spread the glow so it does not form visible vertical walls */
.nb1{left:-12% !important;filter:blur(95px) !important}
.nb2{right:18% !important;filter:blur(92px) !important}
.nb3{right:-13% !important;filter:blur(105px) !important}

/* Extra ambient light that visually dissolves the hero into the background */
.hero::after{
  content:"";
  position:absolute;
  left:-8%;
  right:-8%;
  bottom:-150px;
  height:320px;
  z-index:-2;
  pointer-events:none;
  background:
    radial-gradient(ellipse at 25% 35%, rgba(93,91,255,.15), transparent 45%),
    radial-gradient(ellipse at 75% 40%, rgba(44,198,226,.15), transparent 48%);
  filter:blur(70px);
}

/* 2) PULSE / RUNNER UNDER TECH STACK */
.neon-flow-line{
  height:2px !important;
  width:min(640px,96%) !important;
  margin-top:30px !important;
  position:relative;
  overflow:hidden !important;
  border-radius:999px;
  background:linear-gradient(
    90deg,
    rgba(91,117,255,.03),
    rgba(91,117,255,.14) 25%,
    rgba(77,210,225,.15) 55%,
    rgba(91,117,255,.07) 80%,
    rgba(91,117,255,0)
  ) !important;
  box-shadow:0 0 10px rgba(75,132,255,.04);
}

.neon-flow-line::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:linear-gradient(
    90deg,
    transparent 0%,
    rgba(89,154,255,.15) 18%,
    rgba(115,101,255,.16) 48%,
    rgba(70,219,225,.12) 75%,
    transparent 100%
  );
  opacity:.45;
}

/* actual luminous pulse */
.neon-flow-line i{
  position:absolute !important;
  top:50% !important;
  left:-24% !important;
  width:26% !important;
  height:4px !important;
  transform:translateY(-50%);
  border-radius:999px;
  background:linear-gradient(
    90deg,
    transparent 0%,
    rgba(93,129,255,.15) 15%,
    #6ca6ff 38%,
    #a66cff 58%,
    #55e1df 74%,
    rgba(85,225,223,.22) 88%,
    transparent 100%
  ) !important;
  filter:blur(.15px);
  box-shadow:
    0 0 5px rgba(111,126,255,.85),
    0 0 14px rgba(132,91,255,.48),
    0 0 26px rgba(77,211,225,.20);
  animation:pulseRun 3.15s linear infinite !important;
  opacity:0;
}

/* 3) BUTTONS — CLEAR HOVER / PRESS / GLOW RESPONSE */
.button{
  transition:
    transform .22s ease,
    box-shadow .25s ease,
    border-color .25s ease,
    background .25s ease,
    color .25s ease !important;
  will-change:transform,box-shadow;
}

.button-primary{
  box-shadow:
    0 10px 28px rgba(101,84,255,.22),
    0 0 0 rgba(96,168,255,0) !important;
}

.button-primary:hover{
  transform:translateY(-3px) scale(1.018) !important;
  box-shadow:
    0 15px 38px rgba(100,83,255,.34),
    0 0 22px rgba(117,91,255,.24),
    0 0 46px rgba(67,181,235,.10) !important;
  filter:brightness(1.08) saturate(1.08);
}

.button-primary:active{
  transform:translateY(0) scale(.985) !important;
  box-shadow:
    0 7px 18px rgba(90,76,220,.22),
    0 0 12px rgba(113,94,255,.18) !important;
}

.button-ghost:hover{
  transform:translateY(-2px) !important;
  color:#ffffff !important;
  border-color:rgba(113,132,255,.42) !important;
  background:
    linear-gradient(180deg,rgba(19,31,53,.92),rgba(9,18,32,.92)) !important;
  box-shadow:
    0 10px 28px rgba(0,0,0,.18),
    0 0 22px rgba(92,105,255,.10) !important;
}

.button-ghost:active{
  transform:translateY(0) scale(.986) !important;
}

/* more obvious moving highlight on buttons */
.button::before{
  opacity:0 !important;
}
.button:hover::before{
  opacity:1 !important;
  animation:buttonSweepV4 .75s ease forwards !important;
}

/* header contact button gets same interaction */
.header-cta:hover{
  border-color:rgba(125,117,255,.5) !important;
  box-shadow:
    0 0 18px rgba(113,92,255,.12),
    0 10px 30px rgba(0,0,0,.14) !important;
}

/* small tech pills react too */
.skill-strip span{
  cursor:default;
}
.skill-strip span:hover{
  transform:translateY(-2px);
  border-color:rgba(110,133,255,.4) !important;
  box-shadow:
    0 0 14px rgba(95,106,255,.11),
    inset 0 0 12px rgba(84,144,255,.035);
  background:rgba(255,255,255,.065) !important;
}

/* project action buttons and nav links feel alive */
.project-actions .button:hover{
  transform:translateY(-2px) scale(1.01) !important;
}

.nav a{
  position:relative;
}
.nav a::before{
  content:"";
  position:absolute;
  left:50%;
  bottom:-8px;
  width:0;
  height:1px;
  transform:translateX(-50%);
  background:linear-gradient(90deg,#65b8ff,#956bff,#59dfdf);
  box-shadow:0 0 10px rgba(114,99,255,.45);
  transition:width .25s ease;
}
.nav a:hover::before{width:70%}
.nav a.active::before{width:46%}

/* cursor-follow glow, subtle */
body.has-pointer-glow::after{
  content:"";
  position:fixed;
  width:220px;
  height:220px;
  left:var(--mx,50vw);
  top:var(--my,50vh);
  transform:translate(-50%,-50%);
  pointer-events:none;
  z-index:2;
  border-radius:50%;
  background:radial-gradient(circle,rgba(95,114,255,.055),rgba(71,203,226,.025) 35%,transparent 70%);
  filter:blur(12px);
  mix-blend-mode:screen;
}

/* KEYFRAMES */
@keyframes pulseRun{
  0%{
    left:-26%;
    opacity:0;
  }
  8%{
    opacity:.98;
  }
  76%{
    opacity:.98;
  }
  91%{
    opacity:.22;
  }
  100%{
    left:104%;
    opacity:0;
  }
}

@keyframes buttonSweepV4{
  0%{left:-42%;opacity:0}
  18%{opacity:.55}
  100%{left:128%;opacity:0}
}

@media(max-width:760px){
  .hero::before{
    background:linear-gradient(90deg,rgba(5,11,20,.52),transparent 8%,transparent 92%,rgba(5,11,20,.52));
  }
  body.has-pointer-glow::after{display:none}
}


/* ===================================================
   V5 — layout reset + full-bleed soft neon + clean UX
   =================================================== */

/* HERO: remove the excessive vertical centering */
.hero{
  min-height:680px !important;
  padding:58px 0 64px !important;
  align-items:center !important;
  overflow:visible !important;
}

/* Full-width atmosphere: no visible vertical borders at 92vw container edges */


/* Kill the old side-vignette layers which looked like borders */
.hero::before{
  display:none !important;
}
.hero::after{
  left:50% !important;
  width:100vw !important;
  right:auto !important;
  transform:translateX(-50%) !important;
  bottom:-120px !important;
  height:250px !important;
  opacity:.55 !important;
}

/* Keep only soft moving auroras, not hard blobs */
.neon-blob{
  opacity:.20 !important;
  filter:blur(120px) !important;
}
.nb1{
  width:520px !important;height:520px !important;
  left:-10% !important;top:4% !important;
}
.nb2{
  width:500px !important;height:500px !important;
  right:22% !important;top:-10% !important;
}
.nb3{
  width:520px !important;height:520px !important;
  right:-10% !important;bottom:-18% !important;
}
.neon-orbit{
  opacity:.07 !important;
}

/* Left column position */
.hero-copy{
  align-self:center !important;
  padding-top:0 !important;
}
.hero .eyebrow{
  margin-top:0 !important;
}

/* Right block: slightly smaller and vertically balanced */
.hero-visual{
  min-height:520px !important;
  align-self:center !important;
}

.portrait-placeholder{
  height:420px !important;
}
.portrait-caption{
  height:78px !important;
}

/* Make the info chips quieter and better integrated */
.inside-chip{
  min-width:138px !important;
  padding:10px 12px !important;
  background:rgba(9,21,38,.64) !important;
  border-color:rgba(128,150,210,.12) !important;
  box-shadow:0 10px 26px rgba(0,0,0,.18) !important;
}
.inside-chip span{font-size:8px !important}
.inside-chip b{font-size:13px !important}
.chip-top{left:20px !important;top:20px !important}
.chip-bottom{right:20px !important;bottom:20px !important}

/* Name neon remains animated but cleaner */
.shimmer-text{
  animation:nameNeonFlowV5 5.2s ease-in-out infinite !important;
  filter:drop-shadow(0 0 10px rgba(115,98,255,.09)) !important;
}

/* PULSE LINE: dark base line + one bright pulse that appears, runs, fades */
.neon-flow-line{
  width:min(620px,96%) !important;
  height:1px !important;
  margin-top:28px !important;
  overflow:hidden !important;
  background:linear-gradient(
    90deg,
    rgba(89,119,255,.04) 0%,
    rgba(86,111,210,.11) 20%,
    rgba(69,153,213,.10) 70%,
    rgba(69,153,213,0) 100%
  ) !important;
  box-shadow:none !important;
}
.neon-flow-line::before{
  display:none !important;
}
.neon-flow-line i{
  left:-120px !important;
  top:50% !important;
  width:120px !important;
  height:3px !important;
  opacity:0;
  transform:translateY(-50%) !important;
  background:linear-gradient(
    90deg,
    transparent 0%,
    rgba(103,145,255,.18) 12%,
    #73aaff 38%,
    #9a70ff 58%,
    #5ce0df 76%,
    transparent 100%
  ) !important;
  box-shadow:
    0 0 6px rgba(114,133,255,.78),
    0 0 16px rgba(119,89,255,.38) !important;
  animation:pulseRunnerV5 3.0s linear infinite !important;
}

/* BUTTONS: visible idle glow + clear hover response */
.button-primary{
  box-shadow:
    0 8px 24px rgba(100,82,255,.22),
    0 0 18px rgba(82,155,255,.08) !important;
}
.button-primary:hover{
  transform:translateY(-3px) scale(1.025) !important;
  filter:brightness(1.12) saturate(1.08) !important;
  box-shadow:
    0 15px 38px rgba(103,83,255,.38),
    0 0 24px rgba(131,91,255,.24),
    0 0 48px rgba(64,187,235,.11) !important;
}
.button-ghost:hover{
  transform:translateY(-2px) !important;
  border-color:rgba(124,125,255,.46) !important;
  background:rgba(18,29,49,.94) !important;
  box-shadow:
    0 10px 28px rgba(0,0,0,.20),
    0 0 20px rgba(102,105,255,.10) !important;
}
.button:active{
  transform:translateY(0) scale(.98) !important;
}

/* Remove cursor-following orb completely */
body.has-pointer-glow::after{
  display:none !important;
}

/* navbar feedback */
.nav a:hover{
  color:#fff !important;
  text-shadow:0 0 12px rgba(126,111,255,.26);
}

/* Don't let old V4 rules reintroduce strange clipping */
@media(max-width:1100px){
  .hero{
    min-height:auto !important;
    padding:48px 0 60px !important;
    overflow:visible !important;
  }
}
@media(max-width:760px){
  .hero{
    padding:42px 0 54px !important;
  }
  .hero-visual{
    min-height:450px !important;
  }
  .portrait-card{
    height:430px !important;
  }
  .portrait-placeholder{
    height:352px !important;
  }
}

@keyframes pulseRunnerV5{
  0%{
    left:-120px;
    opacity:0;
  }
  7%{
    opacity:1;
  }
  78%{
    opacity:1;
  }
  94%{
    opacity:0;
  }
  100%{
    left:100%;
    opacity:0;
  }
}
@keyframes nameNeonFlowV5{
  0%,100%{background-position:0% 50%}
  50%{background-position:100% 50%}
}


/* ===================================================
   V6 — return the neon runner under the tech stack
   Only the running pulse line is adjusted.
   =================================================== */

/* full baseline under the stack */
.neon-flow-line{
  width:min(620px,96%) !important;
  height:2px !important;
  margin-top:28px !important;
  position:relative !important;
  overflow:hidden !important;
  border-radius:999px !important;
  background:linear-gradient(
    90deg,
    rgba(78,108,210,.08) 0%,
    rgba(89,119,255,.16) 18%,
    rgba(67,155,214,.15) 70%,
    rgba(67,155,214,.04) 100%
  ) !important;
}

/* soft glow of the whole rail */
.neon-flow-line::before{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  border-radius:999px !important;
  background:linear-gradient(
    90deg,
    rgba(97,110,255,.04),
    rgba(111,96,255,.08),
    rgba(84,219,221,.08),
    rgba(97,110,255,.03)
  ) !important;
  filter:blur(.2px) !important;
}

/* the moving runner itself */
.neon-flow-line i{
  position:absolute !important;
  top:50% !important;
  left:-96px !important;
  width:96px !important;
  height:4px !important;
  transform:translateY(-50%) !important;
  border-radius:999px !important;
  opacity:0 !important;
  background:linear-gradient(
    90deg,
    rgba(255,255,255,0) 0%,
    rgba(104,160,255,.22) 10%,
    rgba(115,166,255,.95) 34%,
    rgba(157,108,255,.96) 58%,
    rgba(86,231,223,.95) 78%,
    rgba(86,231,223,.20) 92%,
    rgba(255,255,255,0) 100%
  ) !important;
  box-shadow:
    0 0 8px rgba(109,154,255,.85),
    0 0 18px rgba(140,97,255,.48),
    0 0 26px rgba(86,231,223,.26) !important;
  animation:runnerAcrossStack 3.35s linear infinite !important;
}

@keyframes runnerAcrossStack{
  0%{
    left:-96px;
    opacity:0;
  }
  7%{
    opacity:1;
  }
  78%{
    opacity:1;
  }
  92%{
    opacity:.18;
  }
  100%{
    left:calc(100% + 12px);
    opacity:0;
  }
}


/* V7 — runner visual only; movement is controlled by JavaScript */
.neon-flow-line i{
  animation:none !important;
  left:0 !important;
  top:50% !important;
  width:105px !important;
  height:4px !important;
  transform:translate3d(-110px,-50%,0);
  opacity:0;
  border-radius:999px !important;
  background:linear-gradient(
    90deg,
    transparent 0%,
    rgba(96,151,255,.18) 10%,
    #70a7ff 34%,
    #a16dff 58%,
    #55e5df 78%,
    rgba(85,229,223,.20) 92%,
    transparent 100%
  ) !important;
  box-shadow:
    0 0 7px rgba(106,151,255,.90),
    0 0 18px rgba(148,96,255,.52),
    0 0 28px rgba(75,224,220,.28) !important;
}


/* ===================================================
   V8 — skills strictly centered over the running line
   =================================================== */

.tech-stack-rail{
  display:inline-flex;
  flex-direction:column;
  align-items:stretch;
  width:fit-content;
  max-width:100%;
  margin-top:36px;
}

.skill-strip{
  display:flex !important;
  flex-wrap:wrap;
  gap:10px;
  width:fit-content;
  max-width:100%;
  margin-top:0 !important;
  align-self:flex-start;
}

/* the line now belongs exactly to the skills block */
.neon-flow-line{
  width:100% !important;
  max-width:100%;
  margin-top:12px !important;
  align-self:stretch;
}

/* on small screens let it still behave naturally */
@media(max-width:760px){
  .tech-stack-rail{
    display:flex;
    width:100%;
  }
  .skill-strip{
    width:100%;
  }
  .neon-flow-line{
    width:100% !important;
  }
}


/* ===================================================
   V9 — real photo in the right hero card
   =================================================== */











.photo-mode .inside-chip{
  z-index:5;
}

.photo-mode .chip-top{
  left:28px !important;
  top:24px !important;
}

.photo-mode .chip-bottom{
  right:28px !important;
  bottom:30px !important;
}

.portrait-caption{
  position:relative;
  z-index:6;
}

/* hide old text-only placeholder styles when photo mode is active */
.photo-mode p,
.photo-mode small,
.photo-mode .portrait-initials{
  display:none !important;
}

@media(max-width:760px){
  .portrait-placeholder.photo-mode{
    height:352px !important;
  }
  .photo-stage{
    inset:12px;
    border-radius:22px;
  }
  .profile-photo{
    object-position:center 18%;
  }
  .photo-mode .chip-top{
    left:16px !important;
    top:16px !important;
  }
  .photo-mode .chip-bottom{
    right:16px !important;
    bottom:18px !important;
  }
}


/* ===================================================
   V10 — move the hero photo lower inside the right card
   =================================================== */



@media(max-width:760px){
  .profile-photo{
    object-position:center 28% !important;
  }
}


/* ===================================================
   V11 — move the visible photo content lower in frame
   =================================================== */



@media(max-width:760px){
  .profile-photo{
    object-position:center 16% !important;
  }
}


/* ===================================================
   V12 — move the visible photo content even lower
   =================================================== */



@media(max-width:760px){
  .profile-photo{
    object-position:center 10% !important;
  }
}



/* ===================================================
   V13 — Recolor site palette:
   graphite / icy blue / champagne / warm steel
   Inspired by the selected KN monogram.
   =================================================== */

:root{
  --bg:#060b14;
  --bg2:#0a1220;
  --panel:#0d1625;
  --panel2:#111d2f;
  --text:#f6f4ef;
  --muted:#a7b1bf;
  --line:rgba(190,206,230,.12);

  --blue:#84c7ff;
  --cyan:#98d9ff;
  --purple:#d7b07c; /* remapped as champagne accent for old active states */
  --pink:#e8caa4;
  --green:#61e1a5;
  --orange:#e0ba86;

  --champagne:#d8b181;
  --champagne-soft:#f0d8b5;
  --steel:#8ea3bf;
  --ink:#08101b;
  --shadow:0 24px 72px rgba(0,0,0,.38);
}

/* Base background */
body{
  background:
    radial-gradient(circle at 17% 0%, rgba(122,147,197,.14), transparent 26%),
    radial-gradient(circle at 88% 22%, rgba(219,179,126,.10), transparent 26%),
    radial-gradient(circle at 82% 76%, rgba(92,141,197,.10), transparent 24%),
    linear-gradient(180deg, #050a12 0%, #060c16 48%, #040810 100%) !important;
  color:var(--text);
}
body::before{
  background-image:
    linear-gradient(rgba(255,255,255,.014) 1px, transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.014) 1px, transparent 1px);
}

/* Header + brand */
.site-header{
  background:rgba(5,10,18,.82) !important;
  border-bottom:1px solid rgba(196,206,220,.10) !important;
}
.brand-mark{
  border:1px solid rgba(227,193,143,.36) !important;
  background:
    linear-gradient(145deg, rgba(99,129,170,.18), rgba(13,21,35,.78)),
    radial-gradient(circle at 30% 28%, rgba(240,216,181,.12), transparent 45%) !important;
  color:#f4eee5 !important;
  box-shadow:
    0 0 26px rgba(127,167,224,.10),
    0 0 14px rgba(221,181,125,.08) !important;
}
.brand-copy small{
  color:#98a3b2 !important;
}

/* Nav accents */
.nav a{color:#c0cad6 !important;}
.nav a:hover,.nav a.active{
  color:#f7f4ef !important;
}
.nav a.active::after{
  background:var(--champagne) !important;
  box-shadow:0 0 14px rgba(216,177,129,.45) !important;
}
.nav a::before{
  background:linear-gradient(90deg,#8fcfff,#d8b181,#8fcfff) !important;
  box-shadow:0 0 10px rgba(216,177,129,.18) !important;
}

/* Hero typography */
.eyebrow{color:#9fb0c6 !important;}
.dot-blue{
  background:var(--blue) !important;
  box-shadow:0 0 16px rgba(132,199,255,.45) !important;
}
.gradient-text,
.shimmer-text{
  background-image:linear-gradient(
    90deg,
    #dfeaf7 0%,
    #9fcfff 28%,
    #e8cfaa 62%,
    #b6cae3 100%
  ) !important;
  color:transparent !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
}
.hero h2{color:#ece8e1 !important;}
.hero-lead{color:#adb8c6 !important;}

/* Buttons */
.button{
  background:#0a1421 !important;
  border-color:rgba(212,219,229,.10) !important;
}
.button-primary{
  background-image:linear-gradient(
    90deg,
    #5f84b2 0%,
    #88c8ff 42%,
    #d6b07f 100%
  ) !important;
  border-color:transparent !important;
  color:#fbfaf7 !important;
  box-shadow:
    0 12px 36px rgba(107,145,191,.22),
    0 0 22px rgba(216,177,129,.10) !important;
}
.button-primary:hover{
  box-shadow:
    0 16px 40px rgba(106,145,191,.28),
    0 0 24px rgba(216,177,129,.18) !important;
}
.button-ghost{
  background:rgba(8,15,25,.66) !important;
}
.button-ghost:hover{
  border-color:rgba(216,177,129,.28) !important;
  box-shadow:0 0 18px rgba(216,177,129,.08) !important;
}

/* Skill pills + tags */
.skill-strip span,
.tags span{
  color:#cdd6df !important;
  background:rgba(255,255,255,.038) !important;
  border-color:rgba(217,224,232,.10) !important;
}
.skill-strip span:hover{
  border-color:rgba(216,177,129,.28) !important;
  box-shadow:0 0 12px rgba(216,177,129,.08) !important;
}

/* Hero right card */
/* Hero right card */

.portrait-card,
.portrait-card *{
  --line:rgba(214,220,229,.10);
}

/* Полностью очищаем подложку под фотографией от синеватых отсветов */


/* Полностью очищаем оверлей-фильтр поверх фотографии, чтобы убрать серо-голубую дымку */


.inside-chip{
  background:rgba(15,24,37,.68) !important;
  border-color:rgba(209,216,225,.10) !important;
}
.inside-chip span{color:#98a7ba !important;}
.inside-chip b{color:#f6f1e8 !important;}
.portrait-caption{
  color:#c9d0d7 !important;
  background:rgba(5,10,18,.42) !important;
}
.status i{
  background:#55e5a3 !important;
  box-shadow:0 0 10px rgba(85,229,163,.7) !important;
}
.online{color:#78ebb2 !important;}

/* Runner under skills */
.neon-flow-line{
  background:linear-gradient(
    90deg,
    rgba(125,160,203,.06) 0%,
    rgba(137,194,246,.18) 28%,
    rgba(216,177,129,.16) 72%,
    rgba(216,177,129,.04) 100%
  ) !important;
}
.neon-flow-line i{
  background:linear-gradient(
    90deg,
    transparent 0%,
    rgba(144,203,255,.15) 10%,
    #8dd0ff 34%,
    #f1d8b2 64%,
    #86c8ff 86%,
    transparent 100%
  ) !important;
  box-shadow:
    0 0 7px rgba(141,208,255,.78),
    0 0 16px rgba(216,177,129,.34),
    0 0 26px rgba(141,208,255,.16) !important;
}

/* Cards in projects */
.project-card{
  background:linear-gradient(180deg,rgba(11,20,32,.96),rgba(6,12,21,.98)) !important;
  border-color:rgba(210,218,228,.10) !important;
}
.project-card:hover{
  border-color:rgba(216,177,129,.24) !important;
  box-shadow:
    0 28px 72px rgba(0,0,0,.32),
    0 0 26px rgba(216,177,129,.06) !important;
}
.project-body p,
.section-heading p{
  color:#a8b4c2 !important;
}
.project-icon{
  border:1px solid rgba(212,219,227,.08);
}
.purple{
  background:rgba(216,177,129,.12) !important;
  color:#f0d8b5 !important;
}
.green{
  background:rgba(102,158,216,.12) !important;
  color:#9ed0ff !important;
}
.cyan{
  background:rgba(205,191,170,.10) !important;
  color:#f0dbc0 !important;
}
.blue{
  background:rgba(128,178,228,.12) !important;
  color:#b8ddff !important;
}
.badge{
  border-color:rgba(210,218,228,.10) !important;
}
.purple-badge{color:#e4c79e !important;}
.green-badge{color:#a8d6ff !important;}
.cyan-badge{color:#f2dcc0 !important;}
.blue-badge{color:#c3dfff !important;}

/* Preview areas with new palette */
.shparg-preview{
  background:radial-gradient(circle at 90% 10%,rgba(216,177,129,.18),transparent 40%),#0a1321 !important;
}
.mini-window{background:#0e1828 !important;border-color:rgba(210,218,228,.08) !important;}
.mini-toolbar{background:#09111d !important;}
.fake-line{background:#23374f !important;}
.fake-note{
  background:rgba(216,177,129,.11) !important;
  border-color:rgba(216,177,129,.20) !important;
  color:#e9d1ac !important;
}
.voice-preview{
  background:radial-gradient(circle at 50% 50%,rgba(216,177,129,.10),transparent 34%),linear-gradient(180deg,#0c1724,#09111c) !important;
}
.waveform span{
  background:linear-gradient(#e8d1ab,#8ecfff) !important;
}
.call-chip{
  background:rgba(8,16,28,.34) !important;
  color:#c2cfdd !important;
  border-color:rgba(210,218,228,.10) !important;
}
.fuel-preview{
  background:radial-gradient(circle at 85% 10%,rgba(216,177,129,.11),transparent 35%),#0b1522 !important;
}
.chart i{
  background:linear-gradient(#e3c697,#83c6ff) !important;
}
.fuel-stat{color:#a6b3c3 !important;}
.fuel-stat strong{color:#e6c99d !important;}
.rag-preview{
  background:linear-gradient(145deg,#0f1827,#09111e) !important;
}
.chat-bubble.user{
  background:linear-gradient(90deg,#5e82ae,#d3af7e) !important;
}
.chat-bubble.ai{
  background:#142033 !important;
  color:#c8d3df !important;
}
.sources{color:#8193a8 !important;}

/* Ecosystem section */
.ecosystem{
  border-color:rgba(208,217,228,.10) !important;
  background:
    radial-gradient(circle at 50% 48%,rgba(216,177,129,.12),transparent 22%),
    radial-gradient(circle at 70% 25%,rgba(138,198,255,.07),transparent 24%),
    #060f1a !important;
}
.network-lines{
  background:
    radial-gradient(circle at 50% 50%,transparent 0 12%,rgba(214,177,129,.12) 12.4% 12.8%,transparent 13% 24%,rgba(132,199,255,.07) 24.3% 24.6%,transparent 25%),
    repeating-radial-gradient(circle at 50% 50%,transparent 0 58px,rgba(255,255,255,.018) 59px 60px) !important;
}
.eco-node{
  border-color:rgba(204,214,227,.14) !important;
  background:rgba(9,18,31,.90) !important;
  box-shadow:0 0 35px rgba(216,177,129,.06) !important;
}
.eco-node:hover,.eco-node.active{
  box-shadow:
    0 0 38px rgba(216,177,129,.12),
    0 0 20px rgba(132,199,255,.08) !important;
}
.eco-node small,
.eco-project span{
  color:#97a6ba !important;
}
.core{
  background:radial-gradient(circle,rgba(216,177,129,.14),rgba(7,17,30,.94)) !important;
  border-color:rgba(216,177,129,.30) !important;
}
.eco-project{
  background:rgba(10,20,34,.88) !important;
  border-color:rgba(210,218,228,.10) !important;
}

/* General glass cards / secondary text */
.glass-card{
  background:linear-gradient(180deg,rgba(15,28,46,.78),rgba(8,16,28,.72)) !important;
  border-color:rgba(208,217,228,.10) !important;
}
.section-heading h2,
.project-body h3{
  color:#f5f2eb !important;
}



/* ===================================================
   V14 — black background, closer to selected KN logo
   =================================================== */

:root{
  --bg:#000000;
  --bg2:#04070c;
  --panel:#090d14;
  --panel2:#0d121b;
  --text:#f4f1ea;
  --muted:#a7b0bc;
  --line:rgba(214,220,228,.10);

  --blue:#8fcfff;
  --cyan:#a8dcff;
  --purple:#d9b583;
  --pink:#eed4af;
  --green:#64e2a7;
  --orange:#ddb786;
}

/* true black base */
html, body{
  background:#000 !important;
}
body{
  background:
    radial-gradient(circle at 18% 0%, rgba(110,145,200,.10), transparent 24%),
    radial-gradient(circle at 86% 18%, rgba(221,185,130,.08), transparent 22%),
    radial-gradient(circle at 82% 78%, rgba(106,150,205,.08), transparent 22%),
    linear-gradient(180deg, #000000 0%, #010204 50%, #000000 100%) !important;
}
body::before{
  background-image:
    linear-gradient(rgba(255,255,255,.012) 1px, transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.012) 1px, transparent 1px) !important;
}

/* header closer to black */
.site-header{
  background:rgba(0,0,0,.88) !important;
  border-bottom:1px solid rgba(214,220,228,.08) !important;
}

/* logo area a bit closer to the selected monogram */
.brand-mark{
  border-color:rgba(221,185,130,.30) !important;
  background:
    radial-gradient(circle at 30% 28%, rgba(240,216,181,.07), transparent 46%),
    linear-gradient(145deg, rgba(91,125,170,.12), rgba(5,8,14,.96)) !important;
  box-shadow:
    0 0 16px rgba(138,196,255,.06),
    0 0 12px rgba(221,185,130,.06) !important;
}

/* hero and content cards darker */
.glass-card,
.project-card,
.eco-project,
.eco-node,
.inside-chip{
  background-color:rgba(8,11,17,.82) !important;
}

.project-card{
  background:linear-gradient(180deg,rgba(7,10,16,.97),rgba(3,6,10,.99)) !important;
}
.ecosystem{
  background:
    radial-gradient(circle at 50% 48%,rgba(216,177,129,.10),transparent 20%),
    radial-gradient(circle at 70% 25%,rgba(138,198,255,.06),transparent 22%),
    #03060a !important;
}




.portrait-caption{
  background:rgba(0,0,0,.42) !important;
}

/* name + buttons closer to chosen logo */
.gradient-text,
.shimmer-text{
  background-image:linear-gradient(
    90deg,
    #f0e3cf 0%,
    #efe6d9 10%,
    #9bd3ff 38%,
    #e4c08f 72%,
    #d5dce6 100%
  ) !important;
}

.button-primary{
  background-image:linear-gradient(
    90deg,
    #587aa6 0%,
    #88ccff 42%,
    #d9b583 100%
  ) !important;
  box-shadow:
    0 12px 30px rgba(102,145,201,.18),
    0 0 20px rgba(221,185,130,.09) !important;
}
.button-ghost{
  background:rgba(4,6,10,.86) !important;
}

/* skill rail brighter on black */
.neon-flow-line{
  background:linear-gradient(
    90deg,
    rgba(120,160,210,.05) 0%,
    rgba(143,207,255,.15) 26%,
    rgba(221,185,130,.14) 74%,
    rgba(221,185,130,.03) 100%
  ) !important;
}
.neon-flow-line i{
  background:linear-gradient(
    90deg,
    transparent 0%,
    rgba(151,211,255,.18) 10%,
    #98d4ff 34%,
    #edd4ae 65%,
    #8ac9ff 86%,
    transparent 100%
  ) !important;
}

/* some global text/readability fine-tuning */
.nav a{color:#cad2dc !important;}
.section-heading h2,
.project-body h3,
.hero h2{
  color:#f2efe8 !important;
}
.hero-lead,
.project-body p,
.section-heading p{
  color:#adb7c3 !important;
}


/* ===================================================
   V15 — bronze hero name with moving icy-blue glint
   =================================================== */

.hero-name-metal .hero-name-metal-text{
  display:inline-block;
  background-image:
    linear-gradient(
      105deg,
      #f3e6d2 0%,
      #e6c89c 14%,
      #be8852 30%,
      #f4e7d4 43%,
      #b67d47 58%,
      #ddb489 74%,
      #8f6238 100%
    ),
    linear-gradient(
      115deg,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,0) 42%,
      rgba(141,212,255,.00) 46%,
      rgba(141,212,255,.90) 49%,
      rgba(223,246,255,.98) 50%,
      rgba(141,212,255,.92) 51%,
      rgba(141,212,255,.00) 54%,
      rgba(255,255,255,0) 58%,
      rgba(255,255,255,0) 100%
    );
  background-size:100% 100%, 240% 100%;
  background-position:0 0, -160% 0;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent !important;
  -webkit-text-fill-color: transparent;
  filter:
    drop-shadow(0 0 1px rgba(255,236,208,.20))
    drop-shadow(0 0 10px rgba(197,147,93,.10));
  animation:heroBronzeBlueGlint 4.6s ease-in-out infinite;
}

/* Disable old surname-only gradient logic inside the new H1 */
.hero-name-metal .gradient-text,
.hero-name-metal .shimmer-text{
  background:none !important;
  color:inherit !important;
}

@keyframes heroBronzeBlueGlint{
  0%{
    background-position:0 0, -170% 0;
  }
  42%{
    background-position:0 0, -170% 0;
  }
  58%{
    background-position:0 0, 150% 0;
  }
  100%{
    background-position:0 0, 150% 0;
  }
}


/* ===================================================
   V17 — integrate selected KN logo into the header
   =================================================== */

.brand-mark.brand-mark-logo{
  width:46px !important;
  height:46px !important;
  padding:0 !important;
  border:none !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  overflow:visible !important;
  display:grid !important;
  place-items:center !important;
}

.brand-mark.brand-mark-logo::after{
  display:none !important;
}

.brand-mark-logo img{
  display:block;
  width:44px;
  height:44px;
  object-fit:contain;
  filter:
    drop-shadow(0 0 7px rgba(143,207,255,.22))
    drop-shadow(0 0 6px rgba(221,185,130,.16));
  transition:transform .25s ease, filter .25s ease;
}

.brand:hover .brand-mark-logo img{
  transform:scale(1.04);
  filter:
    drop-shadow(0 0 10px rgba(143,207,255,.30))
    drop-shadow(0 0 8px rgba(221,185,130,.22));
}



/* ===================================================
   V18 — true black background + surname in logo colors
   =================================================== */

/* True black overall background, less graphite */
html, body{
  background:#000 !important;
}
body{
  background:
    radial-gradient(circle at 18% 0%, rgba(102,145,205,.07), transparent 22%),
    radial-gradient(circle at 86% 18%, rgba(221,185,130,.05), transparent 18%),
    radial-gradient(circle at 82% 78%, rgba(106,150,205,.06), transparent 20%),
    linear-gradient(180deg, #000000 0%, #000000 58%, #000000 100%) !important;
}
.site-header{
  background:rgba(0,0,0,.92) !important;
}
.hero,
main,
section,
.ecosystem,
.project-card,
.glass-card,
.portrait-card{
  background-color: transparent;
}

/* Split name styling */
.hero-name-split{
  color:#f4f2ed !important;
}

/* surname matches selected KN logo palette:
   warm bronze / steel / icy-blue glint */
.hero-surname-logo{
  display:inline-block;
  background-image:
    linear-gradient(
      100deg,
      #efe2cf 0%,
      #d8b181 15%,
      #6e7682 31%,
      #92cfff 41%,
      #7b858f 50%,
      #d8b181 66%,
      #f1ddc2 82%,
      #7993ae 100%
    ),
    linear-gradient(
      115deg,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,0) 43%,
      rgba(146,217,255,0) 47%,
      rgba(146,217,255,.75) 49%,
      rgba(232,248,255,.98) 50%,
      rgba(146,217,255,.78) 51%,
      rgba(146,217,255,0) 53%,
      rgba(255,255,255,0) 57%,
      rgba(255,255,255,0) 100%
    );
  background-size:100% 100%, 240% 100%;
  background-position:0 0, -160% 0;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent !important;
  -webkit-text-fill-color: transparent !important;
  filter:
    drop-shadow(0 0 1px rgba(255,241,223,.18))
    drop-shadow(0 0 12px rgba(143,207,255,.08))
    drop-shadow(0 0 8px rgba(216,177,129,.08));
  animation:surnameLogoGlint 4.8s ease-in-out infinite;
}

/* kill previous full-name metallic effect */
.hero-name-metal .hero-name-metal-text{
  animation:none !important;
}

/* stronger black hero card / dark sections */

.project-card{
  background:linear-gradient(180deg,rgba(4,6,10,.97),rgba(0,0,0,.99)) !important;
}
.glass-card,
.eco-project,
.eco-node,
.inside-chip{
  background-color:rgba(4,6,10,.82) !important;
}
.ecosystem{
  background:
    radial-gradient(circle at 50% 48%,rgba(216,177,129,.08),transparent 20%),
    radial-gradient(circle at 70% 25%,rgba(138,198,255,.05),transparent 22%),
    #010204 !important;
}
.button-ghost{
  background:rgba(0,0,0,.88) !important;
}

@keyframes surnameLogoGlint{
  0%{background-position:0 0, -165% 0}
  46%{background-position:0 0, -165% 0}
  60%{background-position:0 0, 145% 0}
  100%{background-position:0 0, 145% 0}
}


/* ===================================================
   V19 — Ksenia white, Nikulina in emblem palette
   =================================================== */

.hero-name-split{
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
  text-shadow:
    0 0 1px rgba(255,255,255,.12),
    0 0 18px rgba(255,255,255,.03);
}

.hero-surname-logo{
  background-image:
    linear-gradient(
      100deg,
      #f1e4d0 0%,
      #ddb786 14%,
      #6f7782 30%,
      #97d4ff 40%,
      #7b848e 50%,
      #d6af7c 66%,
      #f0dcc0 82%,
      #86a3c0 100%
    ),
    linear-gradient(
      115deg,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,0) 43%,
      rgba(150,220,255,0) 47%,
      rgba(150,220,255,.78) 49%,
      rgba(235,249,255,1) 50%,
      rgba(150,220,255,.82) 51%,
      rgba(150,220,255,0) 53%,
      rgba(255,255,255,0) 57%,
      rgba(255,255,255,0) 100%
    ) !important;
  background-size:100% 100%, 240% 100% !important;
  background-position:0 0, -160% 0 !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
  color:transparent !important;
  -webkit-text-fill-color: transparent !important;
  filter:
    drop-shadow(0 0 1px rgba(255,241,223,.18))
    drop-shadow(0 0 12px rgba(143,207,255,.08))
    drop-shadow(0 0 8px rgba(216,177,129,.08)) !important;
  animation:surnameLogoGlint 4.8s ease-in-out infinite !important;
}



/* ===================================================
   V20 — true black background + floating hero card glow
   =================================================== */

/* exact black background */
html,
body{
  background:#000000 !important;
}

body{
  background:#000000 !important;
}

/* remove residual blue graph / texture feeling */
body::before{
  opacity:.18 !important;
  background-image:none !important;
}

/* let the main stage sit on real black */
main,
.hero,
.hero-grid,
section{
  background:transparent !important;
}

/* true black atmosphere, only content glows */
.site-header{
  background:rgba(0,0,0,.94) !important;
  border-bottom:1px solid rgba(255,255,255,.06) !important;
}

/* make the right card float over the black background */
/* 1. Возвращаем карточку в исходное состояние (не трогаем overflow) */


/* 2. ПЕРЕНОСИМ СВЕЧЕНИЕ НА ВНЕШНИЙ БЛОК (он шире и ничего не режет) */



/* 3. Отключаем старые слои, чтобы они точно не двоились */
.portrait-card::before,
.portrait-card::after {
  display: none !important;
}


/* ===================================================
   FINAL — cleaned hero/photo rules
   One authoritative set to avoid old V2–V20 conflicts.
   =================================================== */

.hero-neon-bg{
  position:absolute !important;
  left:50% !important;
  right:auto !important;
  top:0 !important;
  bottom:0 !important;
  width:100vw !important;
  height:100% !important;
  transform:translateX(-50%) !important;
  overflow:hidden !important;
  pointer-events:none !important;
  z-index:-2 !important;
  opacity:1 !important;
  background:transparent !important;
  mask-image:none !important;
  -webkit-mask-image:none !important;
}

.portrait-card{
  position:relative !important;
  width:min(530px,91%) !important;
  height:500px !important;
  border-radius:30px !important;
  overflow:hidden !important;
  isolation:isolate !important;
  z-index:1 !important;

  /* Solid black masks the external glow so it cannot shine
     through the gap between the photo and the card. */
  background:#000000 !important;

  border:1px solid rgba(255,255,255,.08) !important;
  box-shadow:
    0 22px 56px rgba(0,0,0,.62),
    0 0 0 1px rgba(255,255,255,.03) inset !important;
}

/* External glow only — behind the entire card. */
.hero-visual::before{
  content:"" !important;
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  transform:translate(-50%,-50%) !important;
  width:min(530px,91%) !important;
  height:500px !important;
  z-index:0 !important;
  border-radius:30px !important;
  background:#000000 !important;
  border:none !important;
  box-shadow:
    0 0 34px 6px rgba(132,199,255,.32),
    0 0 60px 10px rgba(132,199,255,.16) !important;
  pointer-events:none !important;
}

/* Old internal portrait glows are disabled. */
.portrait-card::before,
.portrait-card::after{
  display:none !important;
}

/* Real photo area. */
.portrait-placeholder.photo-mode{
  position:relative !important;
  display:block !important;
  height:420px !important;
  overflow:hidden !important;
  border-radius:26px 26px 0 0 !important;
}

/* This was one source of the inner blue/cyan flare. */
.photo-mode .portrait-glow-ring{
  display:none !important;
}

.photo-stage{
  position:absolute !important;
  inset:18px !important;
  border-radius:26px !important;
  overflow:hidden !important;
  z-index:2 !important;
  background:transparent !important;
  box-shadow:none !important;
}

.profile-photo{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:center 10% !important;
  filter:saturate(.96) contrast(1.02) brightness(.96) !important;
  transform:scale(1.02) !important;
}

.photo-overlay{
  position:absolute !important;
  inset:0 !important;
  background:transparent !important;
  pointer-events:none !important;
}

@media(max-width:760px){
  .portrait-card{
    height:430px !important;
  }

  .portrait-placeholder.photo-mode{
    height:352px !important;
  }

  .hero-visual::before{
    height:430px !important;
  }

  .photo-stage{
    inset:12px !important;
    border-radius:22px !important;
  }

  .profile-photo{
    object-position:center 10% !important;
  }
}
.hero-surname-logo{
  position:relative;
  display:inline-block;
  color:transparent !important;
  -webkit-text-fill-color:transparent !important;

  /* бронзовая заливка */
  background-image:
    linear-gradient(
      90deg,
      #f4e6d2 0%,
      #d9b27a 16%,
      #b57d3f 34%,
      #f1d3a6 52%,
      #a96d33 70%,
      #e6c190 84%,
      #fff3df 100%
    );
  background-size:100% 100%;
  background-clip:text;
  -webkit-background-clip:text;

  /* глубина */
  text-shadow:
    0 0 1px rgba(255,240,220,.22),
    0 0 10px rgba(181,125,63,.10),
    0 0 18px rgba(217,178,122,.08);

  filter:
    drop-shadow(0 0 1px rgba(255,244,230,.18))
    drop-shadow(0 0 8px rgba(181,125,63,.08));
}

/* первый бегущий голубой контур */
.hero-surname-logo::before,
.hero-surname-logo::after{
  content:attr(data-text);
  position:absolute;
  inset:0;
  color:transparent;
  -webkit-text-fill-color:transparent;
  pointer-events:none;
  z-index:-1;
}

/* контур + голубое свечение */
.hero-surname-logo::before{
  -webkit-text-stroke: 1.6px rgba(132,210,255,.98);
  text-shadow:
    0 0 8px rgba(132,210,255,.65),
    0 0 16px rgba(132,210,255,.36),
    0 0 26px rgba(76,188,255,.22);

  mask-image:
    linear-gradient(
      115deg,
      transparent 0%,
      transparent 38%,
      rgba(0,0,0,.15) 44%,
      rgba(0,0,0,1) 50%,
      rgba(0,0,0,.18) 56%,
      transparent 64%,
      transparent 100%
    );
  -webkit-mask-image:
    linear-gradient(
      115deg,
      transparent 0%,
      transparent 38%,
      rgba(0,0,0,.15) 44%,
      rgba(0,0,0,1) 50%,
      rgba(0,0,0,.18) 56%,
      transparent 64%,
      transparent 100%
    );
  -webkit-mask-size:220% 100%;
  mask-size:220% 100%;
  animation:borderGlintOne 5.2s ease-in-out infinite;
}

/* второй блик — другой ритм и траектория */
.hero-surname-logo::after{
  -webkit-text-stroke: 1px rgba(90,190,255,.85);
  text-shadow:
    0 0 5px rgba(90,190,255,.52),
    0 0 10px rgba(90,190,255,.24),
    0 0 18px rgba(90,190,255,.14);

  mask-image:
    linear-gradient(
      65deg,
      transparent 0%,
      transparent 42%,
      rgba(0,0,0,.10) 47%,
      rgba(0,0,0,1) 50%,
      rgba(0,0,0,.12) 53%,
      transparent 58%,
      transparent 100%
    );
  -webkit-mask-image:
    linear-gradient(
      65deg,
      transparent 0%,
      transparent 42%,
      rgba(0,0,0,.10) 47%,
      rgba(0,0,0,1) 50%,
      rgba(0,0,0,.12) 53%,
      transparent 58%,
      transparent 100%
    );
  -webkit-mask-size:240% 100%;
  mask-size:240% 100%;
  animation:borderGlintTwo 7.1s ease-in-out infinite;
  animation-delay:1.3s;
}

@keyframes borderGlintOne{
  0%{
    -webkit-mask-position:160% 0;
    mask-position:160% 0;
    opacity:0;
  }
  8%{
    opacity:.15;
  }
  18%{
    opacity:.95;
  }
  34%{
    opacity:.55;
  }
  48%{
    -webkit-mask-position:-40% 0;
    mask-position:-40% 0;
    opacity:.18;
  }
  100%{
    -webkit-mask-position:-40% 0;
    mask-position:-40% 0;
    opacity:0;
  }
}

@keyframes borderGlintTwo{
  0%{
    -webkit-mask-position:-60% 0;
    mask-position:-60% 0;
    opacity:0;
  }
  10%{
    opacity:0;
  }
  22%{
    opacity:.75;
  }
  36%{
    opacity:.35;
  }
  52%{
    -webkit-mask-position:170% 0;
    mask-position:170% 0;
    opacity:.14;
  }
  100%{
    -webkit-mask-position:170% 0;
    mask-position:170% 0;
    opacity:0;
  }
}

/* ===================================================
   V25 — surname contour pulse
   One luminous dash traces one randomly chosen letter at a time.
   =================================================== */

.hero-name-split{
  display:flex !important;
  align-items:baseline !important;
  gap:.08em !important;
  flex-wrap:wrap !important;
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
}

.surname-svg-wrap{
  display:inline-block;
  width:4.18em;
  height:.98em;
  overflow:visible;
  vertical-align:-.06em;
  line-height:1;
  flex:0 0 auto;
}

.surname-svg{
  display:block;
  width:100%;
  height:100%;
  overflow:visible;
}

.surname-svg-base,
.surname-letter-pulse{
  font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size:112px;
  font-weight:800;
  letter-spacing:-5px;
}

.surname-svg-base{
  fill:url(#surnameBronze);
  stroke:rgba(255,244,226,.08);
  stroke-width:.35px;
  paint-order:stroke fill;
  filter:drop-shadow(0 0 1px rgba(255,240,216,.16))
         drop-shadow(0 0 7px rgba(190,128,67,.08));
}

.surname-letter-pulse{
  fill:none;
  stroke:#8edcff;
  stroke-width:1.7px;
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-dasharray:16 280;
  stroke-dashoffset:0;
  opacity:0;
  filter:url(#surnamePulseGlow);
  paint-order:stroke;
  pointer-events:none;
}

.surname-letter-pulse.is-pulsing{
  animation:surnameLetterTrace .92s cubic-bezier(.35,.02,.25,1) 1;
}

@keyframes surnameLetterTrace{
  0%{
    opacity:0;
    stroke-dashoffset:24;
  }
  10%{
    opacity:1;
  }
  72%{
    opacity:1;
  }
  100%{
    opacity:0;
    stroke-dashoffset:-300;
  }
}

@media(max-width:760px){
  .hero-name-split{
    gap:.05em !important;
  }
  .surname-svg-wrap{
    width:4.1em;
  }
}


/* ===================================================
   V26 — final surname layout + clear random contour pulse
   =================================================== */

/* Keep first name + surname on one line on desktop */
.hero-name-split{
  display:block !important;
  white-space:nowrap !important;
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
}

/* Inline SVG surname sits on the same baseline */
.surname-svg-wrap{
  display:inline-block !important;
  width:4.18em !important;
  height:.98em !important;
  margin-left:.05em !important;
  vertical-align: 0em !important;
  overflow:visible !important;
  line-height:1 !important;
}

.surname-svg{
  display:block !important;
  width:100% !important;
  height:100% !important;
  overflow:visible !important;
}

.surname-letter-pulse{
  fill:none !important;
  stroke:#8fdcff !important;
  stroke-width:3px !important;
  stroke-linecap:round !important;
  stroke-linejoin:round !important;

  /* One short bright pulse + a very long empty interval */
  stroke-dasharray:22 520 !important;
  stroke-dashoffset:0;

  opacity:0;
  filter:url(#surnamePulseGlow) !important;
  paint-order:stroke !important;
  pointer-events:none !important;
}

.surname-letter-pulse.is-pulsing{
  animation:surnameLetterTraceV26 1.15s cubic-bezier(.32,.04,.22,1) 1 !important;
}

@keyframes surnameLetterTraceV26{
  0%{
    opacity:0;
    stroke-dashoffset:35;
  }
  8%{
    opacity:1;
  }
  78%{
    opacity:1;
  }
  100%{
    opacity:0;
    stroke-dashoffset:-540;
  }
}

/* Do not let older reduced-motion rules kill this decorative effect */
@media (prefers-reduced-motion: reduce){
  .surname-letter-pulse.is-pulsing{
    animation:surnameLetterTraceV26 1.15s cubic-bezier(.32,.04,.22,1) 1 !important;
  }
}

/* On small screens wrapping is allowed */
@media(max-width:760px){
  .hero-name-split{
    white-space:normal !important;
  }
  .surname-svg-wrap{
    margin-left:0 !important;
  }
}


/* ===================================================
   V27 — two independent surname contour pulses
   =================================================== */

.surname-letter-pulse.pulse-a{
  stroke:#8fdcff !important;
  stroke-width:3px !important;
  filter:url(#surnamePulseGlow) !important;
}

.surname-letter-pulse.pulse-b{
  stroke:#6fbfff !important;
  stroke-width:2.4px !important;
  opacity:0;
  filter:url(#surnamePulseGlow) !important;
}

.surname-letter-pulse.pulse-a.is-pulsing{
  animation:surnameLetterTraceA 1.12s cubic-bezier(.32,.04,.22,1) 1 !important;
}

.surname-letter-pulse.pulse-b.is-pulsing{
  animation:surnameLetterTraceB 1.28s cubic-bezier(.34,.02,.24,1) 1 !important;
}

@keyframes surnameLetterTraceA{
  0%{
    opacity:0;
    stroke-dashoffset:35;
  }
  8%{opacity:1}
  78%{opacity:1}
  100%{
    opacity:0;
    stroke-dashoffset:-540;
  }
}

@keyframes surnameLetterTraceB{
  0%{
    opacity:0;
    stroke-dashoffset:-20;
  }
  10%{opacity:.92}
  74%{opacity:.92}
  100%{
    opacity:0;
    stroke-dashoffset:520;
  }
}

@media (prefers-reduced-motion: reduce){
  .surname-letter-pulse.pulse-a.is-pulsing{
    animation:surnameLetterTraceA 1.12s cubic-bezier(.32,.04,.22,1) 1 !important;
  }
  .surname-letter-pulse.pulse-b.is-pulsing{
    animation:surnameLetterTraceB 1.28s cubic-bezier(.34,.02,.24,1) 1 !important;
  }
}


/* ===================================================
   V28 — three independent surname contour pulses
   =================================================== */

.surname-letter-pulse.pulse-c{
  stroke:#b7e8ff !important;
  stroke-width:1.9px !important;
  opacity:0;
  filter:url(#surnamePulseGlow) !important;
}

.surname-letter-pulse.pulse-c.is-pulsing{
  animation:surnameLetterTraceC 1.02s cubic-bezier(.30,.03,.20,1) 1 !important;
}

@keyframes surnameLetterTraceC{
  0%{
    opacity:0;
    stroke-dashoffset:10;
  }
  9%{opacity:.82}
  70%{opacity:.82}
  100%{
    opacity:0;
    stroke-dashoffset:-500;
  }
}

@media (prefers-reduced-motion: reduce){
  .surname-letter-pulse.pulse-c.is-pulsing{
    animation:surnameLetterTraceC 1.02s cubic-bezier(.30,.03,.20,1) 1 !important;
  }
}


/* ===================================================
   V29 — main value proposition under specialization
   =================================================== */

.hero-value{
  margin:20px 0 0 !important;
  max-width:760px !important;
  font-size:19px !important;
  line-height:1.68 !important;
  font-weight:400 !important;
  color:#b8c2cf !important;
  letter-spacing:-.01em !important;
}

@media(max-width:760px){
  .hero-value{
    font-size:16px !important;
    line-height:1.62 !important;
    margin-top:16px !important;
  }
}



/* ===================================================
   V32 — stronger projects count in top chip
   7+ is slightly larger and brighter, but still elegant.
   =================================================== */

.count-green{
  display:inline-block !important;
  font-size:1.22em !important;
  font-weight:800 !important;
  line-height:1 !important;
  letter-spacing:-.02em !important;
  color:#54f0ab !important;
  text-shadow:
    0 0 7px rgba(84,240,171,.88),
    0 0 14px rgba(84,240,171,.56),
    0 0 24px rgba(84,240,171,.28) !important;
}


/* V34 — FIX: override `.inside-chip span` which was forcing 7+ back to 8px */
.inside-chip b .count-green{
  display:inline-block !important;
  font-size:2em !important;
  font-weight:900 !important;
  line-height:1 !important;
  letter-spacing:-.02em !important;
  color:#54f0ab !important;
  text-shadow:
    0 0 7px rgba(84,240,171,.88),
    0 0 14px rgba(84,240,171,.56),
    0 0 24px rgba(84,240,171,.28) !important;
}


/* ===================================================
   V35 — English School AI project card + interactive demo
   =================================================== */

.english-project-card{
  position:relative;
}

.english-project-card .project-icon{
  font-size:13px !important;
  letter-spacing:.08em;
  background:linear-gradient(135deg,rgba(123,94,255,.25),rgba(65,196,255,.17));
  color:#e8e2ff;
}

.english-preview{
  padding:16px;
  background:
    radial-gradient(circle at 90% 0%,rgba(95,96,255,.18),transparent 38%),
    radial-gradient(circle at 10% 100%,rgba(54,205,205,.10),transparent 42%),
    #08121f;
}

.english-mini-shell{
  height:100%;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  border:1px solid rgba(157,175,225,.13);
  border-radius:16px;
  background:rgba(8,16,29,.93);
  box-shadow:0 18px 38px rgba(0,0,0,.20);
}

.english-mini-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:13px 15px;
  border-bottom:1px solid rgba(255,255,255,.07);
  background:rgba(255,255,255,.025);
}

.english-mini-head > div{
  display:flex;
  flex-direction:column;
  gap:4px;
}

.english-mini-head strong{font-size:13px;color:#f6f8ff}
.english-mini-head small{font-size:9px;color:#8fa2b9}
.english-mini-head small i{
  display:inline-block;width:6px;height:6px;border-radius:50%;
  margin-right:5px;background:#3ce496;box-shadow:0 0 9px #3ce496;
}
.english-mini-head > span{
  padding:6px 9px;border-radius:999px;font-size:9px;
  border:1px solid rgba(116,139,205,.16);color:#9db1ca;
}

.english-mini-chat{
  flex:1;
  padding:15px;
  display:flex;
  flex-direction:column;
  gap:10px;
  justify-content:center;
}

.english-msg{
  max-width:82%;
  padding:9px 11px;
  border-radius:12px;
  font-size:10px;
  line-height:1.45;
}

.english-msg-user{
  align-self:flex-end;
  background:linear-gradient(135deg,#456dff,#725cff);
  color:#fff;
  border-bottom-right-radius:4px;
}

.english-msg-ai{
  align-self:flex-start;
  color:#cdd9e8;
  background:#122238;
  border:1px solid rgba(140,166,220,.10);
  border-bottom-left-radius:4px;
}

.english-msg-ai small{
  display:block;
  margin-top:7px;
  color:#7f97b5;
  font-size:8px;
}

.english-mini-modes{
  display:flex;
  gap:6px;
  padding:0 14px 13px;
}

.english-mini-modes span{
  padding:5px 8px;
  border-radius:999px;
  font-size:8px;
  color:#8093aa;
  border:1px solid rgba(255,255,255,.07);
}

.english-mini-modes span.active{
  color:#d9efff;
  border-color:rgba(83,182,255,.30);
  background:rgba(72,145,255,.10);
  box-shadow:0 0 14px rgba(84,158,255,.07);
}

/* DEMO MODAL */
.english-demo{
  display:grid;
  gap:18px;
}

.english-demo-top{
  display:flex;
  justify-content:space-between;
  gap:20px;
  align-items:flex-start;
}

.english-demo-kicker{
  font-size:10px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#7e93ad;
}

.english-demo-top h3{
  margin:6px 0 8px;
  font-size:30px;
  color:#f5f8ff;
}

.english-demo-top p{
  margin:0;
  color:#91a3b9;
  line-height:1.55;
  max-width:620px;
}

.english-demo-badge{
  flex:0 0 auto;
  font-size:10px;
  color:#a9bdd4;
  border:1px solid rgba(255,255,255,.09);
  border-radius:999px;
  padding:8px 11px;
  background:rgba(255,255,255,.03);
}

.english-architecture{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:7px;
  padding:12px 14px;
  border:1px solid rgba(255,255,255,.07);
  border-radius:14px;
  background:rgba(7,14,25,.65);
}

.english-architecture span{
  font-size:10px;
  color:#c3cfdd;
  border:1px solid rgba(129,151,210,.12);
  background:#0d1a2c;
  padding:7px 9px;
  border-radius:9px;
}

.english-architecture i{
  font-style:normal;
  color:#657990;
  font-size:12px;
}

.english-tabs{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.english-tab{
  border:1px solid rgba(255,255,255,.08);
  background:#0c1829;
  color:#91a5bd;
  border-radius:11px;
  padding:9px 13px;
  cursor:pointer;
  transition:.2s ease;
}

.english-tab:hover{color:#fff;border-color:rgba(109,130,255,.28)}
.english-tab.active{
  color:#fff;
  background:linear-gradient(135deg,rgba(63,129,255,.22),rgba(126,85,255,.18));
  border-color:rgba(105,128,255,.32);
  box-shadow:0 0 20px rgba(90,106,255,.08);
}

.english-workspace{
  min-height:350px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:18px;
  overflow:hidden;
  display:grid;
  grid-template-columns:170px 1fr;
  background:#081321;
}

.english-side{
  border-right:1px solid rgba(255,255,255,.07);
  padding:16px 13px;
  background:#09101d;
}

.english-side strong{
  display:block;
  font-size:12px;
  margin-bottom:12px;
}

.english-side small{
  color:#71869f;
  font-size:9px;
  line-height:1.5;
}

.english-side .kb-file{
  display:block;
  margin-top:8px;
  padding:8px;
  border-radius:9px;
  font-size:9px;
  color:#9bacbf;
  background:rgba(255,255,255,.025);
  border:1px solid rgba(255,255,255,.05);
}

.english-side .kb-file.active{
  color:#cde9ff;
  border-color:rgba(86,175,255,.22);
  background:rgba(69,139,255,.08);
}

.english-chat-area{
  min-width:0;
  display:flex;
  flex-direction:column;
  padding:18px;
}

.english-demo-chat{
  flex:1;
  min-height:225px;
  display:flex;
  flex-direction:column;
  gap:12px;
  overflow:auto;
  padding-right:4px;
}

.echat{
  max-width:84%;
  padding:11px 13px;
  border-radius:14px;
  font-size:12px;
  line-height:1.55;
  white-space:pre-line;
}

.echat.user{
  align-self:flex-end;
  background:linear-gradient(135deg,#3f70f5,#715cff);
  color:#fff;
  border-bottom-right-radius:4px;
}

.echat.ai{
  align-self:flex-start;
  background:#112039;
  color:#cad6e5;
  border:1px solid rgba(255,255,255,.06);
  border-bottom-left-radius:4px;
}

.echat.system{
  align-self:center;
  max-width:94%;
  color:#7f93aa;
  font-size:10px;
  padding:7px 10px;
  background:rgba(255,255,255,.025);
  border:1px solid rgba(255,255,255,.05);
}

.echat .source{
  display:block;
  margin-top:8px;
  padding-top:7px;
  border-top:1px solid rgba(255,255,255,.06);
  color:#7ea7cc;
  font-size:9px;
}

.english-input-row{
  display:flex;
  gap:9px;
  margin-top:14px;
}

.english-input-row input[type="text"]{
  flex:1;
  min-width:0;
  background:#091526;
  color:#eaf1fb;
  border:1px solid rgba(255,255,255,.08);
  border-radius:11px;
  padding:11px 12px;
  outline:none;
}

.english-input-row input[type="text"]:focus{
  border-color:rgba(92,153,255,.34);
  box-shadow:0 0 18px rgba(72,129,255,.06);
}

.english-send{
  border:0;
  border-radius:11px;
  padding:0 15px;
  color:white;
  cursor:pointer;
  background:linear-gradient(135deg,#477fff,#775dff);
}

.english-quick{
  display:flex;
  gap:7px;
  flex-wrap:wrap;
  margin-top:10px;
}

.english-quick button,
.english-upload-label,
.english-voice-btn{
  cursor:pointer;
  border:1px solid rgba(255,255,255,.08);
  border-radius:999px;
  background:rgba(255,255,255,.025);
  color:#9fb0c4;
  font-size:9px;
  padding:7px 10px;
}

.english-quick button:hover,
.english-upload-label:hover,
.english-voice-btn:hover{
  color:#fff;
  border-color:rgba(106,134,255,.30);
}

.english-upload{
  display:none;
}

.english-image-preview{
  max-width:220px;
  max-height:130px;
  object-fit:cover;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.08);
  margin-top:8px;
}

.english-case-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  margin-top:16px;
}

.english-case-box{
  padding:16px;
  border:1px solid rgba(255,255,255,.07);
  border-radius:14px;
  background:#0b1728;
}

.english-case-box b{
  display:block;
  color:#f0f5fc;
  font-size:12px;
  margin-bottom:8px;
}

.english-case-box p{
  margin:0;
  color:#92a4b8;
  font-size:11px;
  line-height:1.6;
}

.english-case-stack{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin-top:16px;
}

.english-case-stack span{
  padding:7px 9px;
  border-radius:999px;
  font-size:9px;
  color:#b4c4d6;
  border:1px solid rgba(255,255,255,.07);
  background:rgba(255,255,255,.025);
}

@media(max-width:760px){
  .english-demo-top{flex-direction:column}
  .english-workspace{grid-template-columns:1fr}
  .english-side{display:none}
  .english-case-grid{grid-template-columns:1fr}
  .english-input-row{flex-direction:column}
  .english-send{padding:11px 15px}
}


/* ===================================================
   V39 — clean portfolio demo: no technical source/system pills
   =================================================== */
.english-demo .echat.system,
.english-demo .echat .source{
  display:none !important;
}


/* ===================================================
   V40 — voice demo: show recognized speech, hide technical pipeline
   =================================================== */
.english-demo .echat.recognized{
  align-self:center;
  max-width:94%;
  color:#9fb3ca;
  font-size:10px;
  padding:7px 10px;
  background:rgba(255,255,255,.025);
  border:1px solid rgba(255,255,255,.06);
  border-radius:999px;
  display:block !important;
}


/* V42 — voice demo cleanup */
.english-demo .echat.system{
  display:none !important;
}


/* ===================================================
   V44 — ANC / Sales / Onboarding project previews
   =================================================== */

.anc-preview,
.sales-preview,
.onboard-preview{
  padding:18px;
  background:
    radial-gradient(circle at 90% 0%,rgba(63,140,255,.14),transparent 42%),
    #091320;
}

.anc-window{
  height:100%;
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px;
  padding:16px;
  background:#0b1728;
  display:flex;
  flex-direction:column;
  gap:16px;
}
.anc-head{display:flex;justify-content:space-between;font-size:10px;color:#aebed0}
.anc-head i{font-style:normal;color:#52e5a0}
.anc-search{
  display:flex;gap:8px;align-items:center;
  padding:10px;border:1px solid rgba(255,255,255,.07);border-radius:12px;
  background:#08111f;
}
.anc-search span{flex:1;color:#cdd8e6;font-size:11px}
.anc-search b{font-size:9px;color:white;padding:7px 9px;border-radius:8px;background:#376ff0}
.anc-result{
  margin-top:auto;padding:13px;border-radius:12px;
  background:rgba(50,211,140,.06);
  border:1px solid rgba(50,211,140,.12);
  display:flex;flex-direction:column;gap:5px;
}
.anc-result small{color:#7f95ac;font-size:8px}
.anc-result strong{color:#66e8ad;font-size:13px}
.anc-result span{color:#8ea0b4;font-size:8px}

.sales-flow{
  display:flex;align-items:center;justify-content:center;gap:7px;
  flex-wrap:wrap;margin-top:18px;
}
.sales-node{
  padding:9px 10px;border-radius:10px;font-size:9px;
  color:#c8d4e3;background:#0d1d31;border:1px solid rgba(255,255,255,.07);
}
.sales-flow > span{color:#5f7793;font-size:11px}
.sales-output{
  margin-top:28px;padding:14px;border-radius:14px;
  background:#0c1929;border:1px solid rgba(255,255,255,.07);
  display:flex;flex-direction:column;gap:6px;
}
.sales-output small{font-size:8px;color:#778ba4}
.sales-output b{font-size:13px;color:#f2f6fc}
.sales-output span{font-size:8px;color:#8095ae}

.onboard-shell{
  height:100%;padding:14px;border-radius:16px;
  background:#0b1728;border:1px solid rgba(255,255,255,.08);
}
.onboard-title{font-size:12px;color:#f2f5fb;margin-bottom:14px}
.onboard-step{
  display:flex;align-items:center;gap:10px;
  padding:10px;border-radius:11px;margin-bottom:8px;
  border:1px solid rgba(255,255,255,.05);
  color:#7f92aa;background:#091321;font-size:9px;
}
.onboard-step b{
  width:23px;height:23px;border-radius:50%;display:grid;place-items:center;
  background:#14243b;color:#7892b2;font-size:9px;
}
.onboard-step.active{
  color:#d8e4f2;border-color:rgba(123,95,255,.20);
  background:rgba(101,78,255,.07);
}
.onboard-step.active b{color:#d9d2ff;background:rgba(126,91,255,.20)}


/* ===================================================
   V46 — scripted demos for all project cards except English School
   =================================================== */

.portfolio-demo{
  display:grid;
  gap:18px;
}

.pd-head{
  display:flex;
  justify-content:space-between;
  gap:22px;
  align-items:flex-start;
}

.pd-kicker{
  color:#7990aa;
  font-size:10px;
  letter-spacing:.14em;
  text-transform:uppercase;
  margin-bottom:6px;
}

.pd-head h3{
  margin:0 0 8px;
  font-size:30px;
  color:#f5f8ff;
}

.pd-head p{
  margin:0;
  max-width:690px;
  color:#91a4ba;
  line-height:1.6;
}

.pd-badge{
  flex:0 0 auto;
  padding:8px 11px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:999px;
  color:#a9bcd1;
  background:rgba(255,255,255,.025);
  font-size:9px;
}

.pd-tabs{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.pd-tab{
  border:1px solid rgba(255,255,255,.08);
  border-radius:11px;
  background:#0b1727;
  color:#8fa3ba;
  padding:9px 12px;
  cursor:pointer;
  transition:.2s ease;
}

.pd-tab:hover{
  color:#fff;
  border-color:rgba(104,133,255,.25);
}

.pd-tab.active{
  color:#fff;
  background:linear-gradient(135deg,rgba(70,127,255,.18),rgba(126,89,255,.16));
  border-color:rgba(107,127,255,.30);
}

.pd-card{
  padding:17px;
  border:1px solid rgba(255,255,255,.07);
  border-radius:16px;
  background:#091525;
}

.pd-field{
  display:grid;
  gap:7px;
  margin-bottom:12px;
}

.pd-field label{
  color:#7f95ad;
  font-size:9px;
  text-transform:uppercase;
  letter-spacing:.11em;
}

.pd-quick{
  display:flex;
  gap:7px;
  flex-wrap:wrap;
  margin:10px 0 14px;
}

.pd-quick button{
  border:1px solid rgba(255,255,255,.07);
  border-radius:999px;
  background:rgba(255,255,255,.025);
  color:#91a4b9;
  padding:7px 10px;
  font-size:9px;
  cursor:pointer;
}

.pd-quick button:hover{
  color:#fff;
  border-color:rgba(101,133,255,.28);
}

.pd-output{
  min-height:190px;
  margin-top:14px;
  line-height:1.65;
}

.pd-call-status{
  display:flex;
  justify-content:space-between;
  gap:20px;
  align-items:center;
  padding:10px 13px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.07);
  background:#091422;
  color:#8fa3ba;
  font-size:10px;
}

.pd-call-status span i{
  display:inline-block;
  width:7px;
  height:7px;
  border-radius:50%;
  background:#3ce496;
  box-shadow:0 0 10px #3ce496;
  margin-right:6px;
}

.pd-call-status b{
  color:#d5dfeb;
  font-weight:600;
}

.pd-summary{
  display:grid;
  gap:6px;
  margin-top:14px;
  padding:13px;
  border-radius:12px;
  border:1px solid rgba(60,228,150,.13);
  background:rgba(60,228,150,.05);
}

.pd-summary b{
  color:#67e7ac;
  font-size:12px;
}

.pd-summary span{
  color:#9db0c3;
  font-size:10px;
}

.pd-progress{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:7px;
}

.pd-progress span{
  padding:9px 10px;
  border-radius:10px;
  text-align:center;
  font-size:9px;
  color:#6f8299;
  border:1px solid rgba(255,255,255,.06);
  background:#091320;
}

.pd-progress span.active{
  color:#d9e5f3;
  background:rgba(104,83,255,.08);
  border-color:rgba(111,93,255,.20);
}

@media(max-width:760px){
  .pd-head{
    flex-direction:column;
  }

  .pd-badge{
    align-self:flex-start;
  }

  .pd-progress{
    grid-template-columns:repeat(2,1fr);
  }

  .pd-output{
    min-height:160px;
  }
}


/* ===================================================
   V47 — Shpargalochka cached mini-lessons + real local test
   =================================================== */

.sh-topic-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
}

.sh-topic-card{
  appearance:none;
  text-align:left;
  cursor:pointer;
  padding:15px;
  border-radius:15px;
  border:1px solid rgba(255,255,255,.07);
  background:#091525;
  color:#d9e4f1;
  transition:.22s ease;
}

.sh-topic-card:hover{
  transform:translateY(-2px);
  border-color:rgba(102,137,255,.24);
}

.sh-topic-card.active{
  border-color:rgba(105,133,255,.34);
  background:linear-gradient(135deg,rgba(73,133,255,.12),rgba(130,90,255,.10));
  box-shadow:0 0 24px rgba(82,107,255,.06);
}

.sh-topic-card span{
  display:block;
  color:#7f95ad;
  font-size:9px;
  text-transform:uppercase;
  letter-spacing:.12em;
  margin-bottom:7px;
}

.sh-topic-card b{
  display:block;
  font-size:16px;
  margin-bottom:6px;
}

.sh-topic-card small{
  color:#7c8fa6;
  font-size:9px;
}

.sh-content-card{
  border:1px solid rgba(255,255,255,.07);
  border-radius:18px;
  background:#081423;
  padding:18px;
}

.sh-lesson-head,
.sh-test-head{
  display:flex;
  justify-content:space-between;
  gap:18px;
  align-items:flex-start;
  margin-bottom:16px;
}

.sh-lesson-head span,
.sh-test-head span{
  color:#7590ad;
  font-size:9px;
  text-transform:uppercase;
  letter-spacing:.12em;
}

.sh-lesson-head h4,
.sh-test-head h4{
  margin:5px 0 5px;
  font-size:24px;
  color:#f3f7fc;
}

.sh-lesson-head p,
.sh-test-head p{
  margin:0;
  color:#93a7bd;
  line-height:1.5;
  font-size:11px;
}

.sh-ready{
  flex:0 0 auto;
  color:#64e8ad;
  font-size:9px;
  padding:7px 9px;
  border:1px solid rgba(72,220,152,.14);
  border-radius:999px;
  background:rgba(72,220,152,.04);
}

.sh-lecture-list{
  display:grid;
  gap:8px;
}

.sh-lecture-row{
  display:grid;
  grid-template-columns:30px 1fr;
  gap:11px;
  align-items:flex-start;
  padding:11px;
  border-radius:12px;
  background:#0b192a;
  border:1px solid rgba(255,255,255,.05);
}

.sh-lecture-row > b{
  width:26px;
  height:26px;
  display:grid;
  place-items:center;
  border-radius:9px;
  background:rgba(93,121,255,.12);
  color:#aebdff;
  font-size:10px;
}

.sh-lecture-row strong{
  display:block;
  font-size:11px;
  color:#dce6f2;
  margin-bottom:3px;
}

.sh-lecture-row p{
  margin:0;
  color:#91a4b9;
  font-size:10px;
  line-height:1.55;
}

.sh-example{
  margin-top:12px;
  padding:13px;
  border-radius:12px;
  background:rgba(69,177,255,.05);
  border:1px solid rgba(69,177,255,.10);
}

.sh-example small{
  color:#79a6c9;
  text-transform:uppercase;
  letter-spacing:.1em;
  font-size:8px;
}

.sh-example p{
  margin:6px 0 0;
  color:#b7c7d8;
  font-size:10px;
  line-height:1.6;
}

.sh-actions{
  display:flex;
  gap:9px;
  flex-wrap:wrap;
  margin-top:15px;
}

.sh-test-list{
  display:grid;
  gap:10px;
}

.sh-question{
  padding:13px;
  border:1px solid rgba(255,255,255,.06);
  border-radius:13px;
  background:#0a1727;
}

.sh-question.correct{
  border-color:rgba(65,222,151,.22);
  background:rgba(65,222,151,.04);
}

.sh-question.wrong{
  border-color:rgba(255,181,72,.22);
  background:rgba(255,181,72,.04);
}

.sh-question > strong{
  display:block;
  font-size:11px;
  color:#e1e9f3;
  margin-bottom:9px;
}

.sh-options{
  display:grid;
  gap:6px;
}

.sh-options label{
  display:flex;
  gap:8px;
  align-items:center;
  padding:8px 9px;
  border-radius:9px;
  background:rgba(255,255,255,.025);
  border:1px solid rgba(255,255,255,.04);
  cursor:pointer;
}

.sh-options label:hover{
  border-color:rgba(99,129,255,.16);
}

.sh-options span{
  color:#9eafc2;
  font-size:10px;
}

.sh-result{
  margin-top:13px;
  padding:12px;
  border-radius:12px;
  display:flex;
  flex-direction:column;
  gap:4px;
}

.sh-result b{font-size:17px}
.sh-result span{font-size:10px}

.sh-result.good{
  color:#63e8ad;
  background:rgba(63,232,173,.05);
  border:1px solid rgba(63,232,173,.14);
}

.sh-result.medium{
  color:#f1c873;
  background:rgba(241,200,115,.05);
  border:1px solid rgba(241,200,115,.14);
}

.sh-result.bad,
.sh-result.warn{
  color:#ef9b82;
  background:rgba(239,155,130,.05);
  border:1px solid rgba(239,155,130,.14);
}

@media(max-width:760px){
  .sh-topic-grid{
    grid-template-columns:1fr;
  }

  .sh-lesson-head,
  .sh-test-head{
    flex-direction:column;
  }
}


/* ===================================================
   V48 — unified "О проекте" layout
   All project cases now use the same card structure as English School.
   =================================================== */
.project-case-demo .english-demo-top h3{
  max-width:880px;
}

.project-case-demo .english-case-box{
  min-height:130px;
}

@media(max-width:760px){
  .project-case-demo .english-case-box{
    min-height:0;
  }
}


/* ===================================================
   V51 — Virtual Sales Assistant project
   =================================================== */

.virtual-sales-preview{
  padding:16px;
  background:
    radial-gradient(circle at 85% 10%,rgba(108,97,255,.18),transparent 40%),
    radial-gradient(circle at 15% 100%,rgba(81,157,255,.10),transparent 45%),
    #091321;
}

.vsa-shell{
  height:100%;
  display:flex;
  flex-direction:column;
  gap:12px;
  border:1px solid rgba(255,255,255,.07);
  border-radius:16px;
  padding:14px;
  background:#0b1728;
}

.vsa-top{
  display:flex;
  align-items:center;
  gap:10px;
  padding-bottom:10px;
  border-bottom:1px solid rgba(255,255,255,.06);
}

.vsa-avatar{
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border-radius:11px;
  color:#e8efff;
  background:linear-gradient(135deg,#5c89ff,#7a5cff);
  box-shadow:0 0 20px rgba(97,103,255,.16);
}

.vsa-top strong{
  display:block;
  color:#f2f6fc;
  font-size:11px;
}

.vsa-top small{
  color:#7d91aa;
  font-size:8px;
}

.vsa-chat{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-top:auto;
  margin-bottom:auto;
}

.vsa-msg{
  max-width:88%;
  padding:8px 10px;
  border-radius:11px;
  font-size:9px;
  line-height:1.45;
}

.vsa-msg.user{
  align-self:flex-end;
  color:#fff;
  background:linear-gradient(135deg,#4679f5,#735cff);
  border-bottom-right-radius:4px;
}

.vsa-msg.ai{
  align-self:flex-start;
  color:#b9c8d8;
  background:#122138;
  border:1px solid rgba(255,255,255,.05);
  border-bottom-left-radius:4px;
}


/* ===================================================
   V52 — AI ecosystem rebuilt around current projects
   =================================================== */

.ecosystem-v2{
  position:relative;
  min-height:auto !important;
  padding:30px !important;
  overflow:hidden;
  border-radius:30px;
  border:1px solid rgba(255,255,255,.07);
  background:
    radial-gradient(circle at 50% 0%,rgba(85,113,255,.10),transparent 34%),
    rgba(5,10,17,.72);
}

.ecosystem-v2 .network-lines{
  display:none !important;
}

.eco-glow{
  position:absolute;
  width:300px;
  height:300px;
  border-radius:50%;
  filter:blur(90px);
  opacity:.09;
  pointer-events:none;
}

.eco-glow-a{
  left:-80px;
  top:60px;
  background:#4aaeff;
}

.eco-glow-b{
  right:-60px;
  bottom:0;
  background:#775cff;
}

.eco-core-wrap{
  display:flex;
  justify-content:center;
  margin-bottom:24px;
  position:relative;
  z-index:2;
}

.ecosystem-v2 .eco-node{
  position:relative !important;
  inset:auto !important;
  transform:none !important;
}

.ecosystem-v2 .eco-node.core{
  width:112px;
  height:112px;
  border-radius:50%;
  display:grid;
  place-items:center;
  align-content:center;
  gap:4px;
  border:1px solid rgba(116,144,255,.25);
  background:
    radial-gradient(circle at 30% 25%,rgba(100,160,255,.20),transparent 44%),
    #091525;
  box-shadow:
    0 0 0 8px rgba(88,115,255,.025),
    0 0 40px rgba(77,111,255,.10);
}

.ecosystem-v2 .eco-node.core span{
  font-size:24px;
  font-weight:800;
  letter-spacing:.04em;
  color:#f5f8ff;
}

.ecosystem-v2 .eco-node.core small{
  font-size:9px;
  color:#7f93ac;
}

.eco-tech-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
  position:relative;
  z-index:2;
}

.ecosystem-v2 .eco-node.tech{
  min-height:86px;
  width:auto !important;
  height:auto !important;
  border-radius:16px;
  padding:14px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  gap:5px;
  text-align:left;
  cursor:pointer;
  border:1px solid rgba(255,255,255,.065);
  background:#091522;
  transition:.22s ease;
}

.ecosystem-v2 .eco-node.tech:hover{
  transform:translateY(-2px) !important;
  border-color:rgba(101,136,255,.28);
}

.ecosystem-v2 .eco-node.tech.active{
  border-color:rgba(105,136,255,.40);
  background:linear-gradient(135deg,rgba(65,129,255,.13),rgba(119,91,255,.10));
  box-shadow:0 0 22px rgba(89,108,255,.07);
}

.ecosystem-v2 .eco-node.tech b{
  font-size:12px;
  color:#e6edf7;
}

.ecosystem-v2 .eco-node.tech small{
  font-size:9px;
  line-height:1.45;
  color:#7f93aa;
}

.eco-projects-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  margin-top:22px;
  position:relative;
  z-index:2;
}

.ecosystem-v2 .eco-project{
  position:relative !important;
  inset:auto !important;
  width:auto !important;
  min-height:76px;
  display:flex;
  align-items:center;
  gap:12px;
  padding:13px 14px;
  border-radius:15px;
  border:1px solid rgba(255,255,255,.06);
  background:rgba(10,21,35,.86);
  transition:
    opacity .22s ease,
    transform .22s ease,
    border-color .22s ease,
    box-shadow .22s ease;
}

.ecosystem-v2 .eco-project.dim{
  opacity:.16;
  transform:scale(.985);
  filter:saturate(.45);
}

.ecosystem-v2 .eco-project.hit{
  opacity:1;
  transform:translateY(-2px);
  border-color:rgba(92,145,255,.28);
  box-shadow:0 0 24px rgba(69,118,255,.06);
}

.eco-project-mark{
  flex:0 0 auto;
  width:39px;
  height:39px;
  display:grid;
  place-items:center;
  border-radius:12px;
  font-size:10px;
  font-weight:800;
  color:#dce9ff;
  border:1px solid rgba(109,137,255,.16);
  background:linear-gradient(135deg,rgba(61,124,255,.15),rgba(126,89,255,.10));
}

.ecosystem-v2 .eco-project strong{
  display:block;
  margin-bottom:4px;
  font-size:11px;
  color:#dce5f1;
}

.ecosystem-v2 .eco-project span{
  font-size:9px;
  color:#7389a2;
}

.eco-caption{
  position:relative;
  z-index:2;
  max-width:760px;
  margin:22px auto 0;
  text-align:center;
  font-size:10px;
  line-height:1.65;
  color:#758ba5;
}

@media(max-width:900px){
  .eco-tech-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media(max-width:620px){
  .ecosystem-v2{
    padding:18px !important;
  }

  .eco-tech-grid,
  .eco-projects-grid{
    grid-template-columns:1fr;
  }

  .ecosystem-v2 .eco-node.core{
    width:94px;
    height:94px;
  }
}


/* ===================================================
   V53 — radial AI ecosystem, based on original concept
   =================================================== */

.ecosystem-radial-section{
  padding-top:110px;
}

.ecosystem-heading{
  margin-bottom:26px;
}

.ecosystem-map{
  position:relative;
  width:min(1180px,calc(100vw - 48px));
  height:760px;
  margin:0 auto;
  overflow:hidden;
  border-radius:34px;
  border:1px solid rgba(255,255,255,.055);
  background:
    radial-gradient(circle at 50% 48%,rgba(62,117,255,.10),transparent 22%),
    radial-gradient(circle at 26% 35%,rgba(137,76,255,.07),transparent 20%),
    radial-gradient(circle at 76% 60%,rgba(71,230,181,.055),transparent 22%),
    linear-gradient(180deg,rgba(5,10,17,.96),rgba(4,8,14,.98));
  box-shadow:inset 0 0 100px rgba(47,91,160,.035);
}

.ecosystem-map::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.22;
  background-image:
    radial-gradient(circle at 15% 20%,rgba(135,186,255,.8) 0 1px,transparent 1.5px),
    radial-gradient(circle at 75% 15%,rgba(134,102,255,.7) 0 1px,transparent 1.5px),
    radial-gradient(circle at 32% 68%,rgba(79,174,255,.7) 0 1px,transparent 1.5px),
    radial-gradient(circle at 86% 72%,rgba(93,230,191,.65) 0 1px,transparent 1.5px),
    radial-gradient(circle at 58% 82%,rgba(255,172,84,.55) 0 1px,transparent 1.5px);
  background-size:240px 220px,310px 270px,280px 260px,340px 310px,300px 290px;
}

.eco-links{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:1;
  pointer-events:none;
}

.eco-links path{
  fill:none;
  stroke:rgba(89,145,255,.22);
  stroke-width:1.35;
  stroke-linecap:round;
  stroke-dasharray:3 9;
  filter:drop-shadow(0 0 5px rgba(73,128,255,.18));
}

.eco-center{
  position:absolute;
  left:50%;
  top:50%;
  width:210px;
  transform:translate(-50%,-50%);
  z-index:6;
  text-align:center;
}

.eco-center-photo{
  width:146px;
  height:146px;
  margin:0 auto 10px;
  border-radius:50%;
  overflow:hidden;
  position:relative;
  z-index:3;
  border:3px solid rgba(129,176,255,.78);
  box-shadow:
    0 0 0 8px rgba(85,107,255,.07),
    0 0 34px rgba(65,122,255,.35),
    0 0 62px rgba(117,80,255,.16);
}

.eco-center-photo img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 18%;
}

.eco-center-ring{
  position:absolute;
  left:50%;
  top:73px;
  border-radius:50%;
  transform:translate(-50%,-50%);
  pointer-events:none;
}

.eco-center-ring.ring-a{
  width:184px;
  height:184px;
  border:1px solid rgba(99,145,255,.18);
  box-shadow:0 0 38px rgba(92,111,255,.08);
}

.eco-center-ring.ring-b{
  width:208px;
  height:208px;
  border:1px dashed rgba(111,91,255,.12);
  animation:ecoRingSpin 22s linear infinite;
}

@keyframes ecoRingSpin{
  to{transform:translate(-50%,-50%) rotate(360deg)}
}

.eco-center strong{
  display:block;
  color:#f3f7fd;
  font-size:17px;
  margin-bottom:4px;
}

.eco-center span{
  color:#7f94ad;
  font-size:9px;
  text-transform:uppercase;
  letter-spacing:.11em;
}

.eco-tech-node{
  position:absolute;
  z-index:5;
  width:118px;
  height:72px;
  border-radius:50%;
  border:1px solid rgba(94,145,255,.26);
  background:
    radial-gradient(circle at 35% 30%,rgba(75,157,255,.16),transparent 48%),
    rgba(8,20,34,.96);
  color:#dfe9f7;
  cursor:pointer;
  box-shadow:
    0 0 0 6px rgba(73,113,255,.025),
    0 0 24px rgba(66,112,255,.08);
  transition:.22s ease;
}

.eco-tech-node:hover,
.eco-tech-node.active{
  transform:scale(1.06);
  border-color:rgba(117,170,255,.48);
  box-shadow:
    0 0 0 7px rgba(73,113,255,.035),
    0 0 32px rgba(66,112,255,.16);
}

.eco-tech-node b{
  display:block;
  font-size:11px;
  margin-bottom:3px;
}

.eco-tech-node small{
  font-size:8px;
  color:#738aa4;
}

.eco-t1{left:28%;top:22%}
.eco-t2{left:21%;top:43%}
.eco-t3{left:27%;top:68%}
.eco-t4{left:45%;top:13%}
.eco-t5{left:67%;top:27%}
.eco-t6{left:70%;top:57%}
.eco-t7{left:56%;top:76%}

.eco-reset{
  position:absolute;
  z-index:7;
  left:50%;
  bottom:24px;
  transform:translateX(-50%);
  border:1px solid rgba(255,255,255,.075);
  background:rgba(8,17,29,.86);
  color:#8095ae;
  padding:8px 12px;
  border-radius:999px;
  font-size:9px;
  cursor:pointer;
}

.eco-reset:hover,
.eco-reset.active{
  color:#dbe7f6;
  border-color:rgba(103,138,255,.24);
}

.ecosystem-map .eco-project{
  position:absolute;
  z-index:4;
  width:260px;
  min-height:92px;
  padding:13px 14px;
  border-radius:17px;
  background:linear-gradient(180deg,rgba(12,24,40,.96),rgba(7,17,29,.94));
  border:1px solid rgba(255,255,255,.07);
  box-shadow:0 14px 32px rgba(0,0,0,.24);
  transition:.22s ease;
}

.ecosystem-map .eco-project::after{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:17px;
  pointer-events:none;
  opacity:.0;
  box-shadow:0 0 28px rgba(78,127,255,.16);
  transition:.22s ease;
}

.ecosystem-map .eco-project.hit{
  transform:translateY(-3px);
  border-color:rgba(99,148,255,.30);
}

.ecosystem-map .eco-project.hit::after{
  opacity:1;
}

.ecosystem-map .eco-project.dim{
  opacity:.15;
  filter:saturate(.3);
  transform:scale(.985);
}

.eco-card-top{
  display:flex;
  gap:10px;
  align-items:flex-start;
}

.eco-card-icon{
  flex:0 0 auto;
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border-radius:11px;
  font-size:9px;
  font-weight:800;
  color:#e2ecfb;
  border:1px solid rgba(111,145,255,.15);
  background:linear-gradient(135deg,rgba(64,130,255,.16),rgba(128,84,255,.12));
}

.ecosystem-map .eco-project strong{
  display:block;
  font-size:11px;
  color:#eef4fc;
  line-height:1.35;
}

.ecosystem-map .eco-project small{
  display:block;
  margin-top:3px;
  color:#71869f;
  font-size:8px;
}

.ecosystem-map .eco-project p{
  margin:10px 0 0;
  color:#8ea2b8;
  font-size:9px;
}

.eco-card-1{left:2.5%;top:7%}
.eco-card-2{left:3.5%;top:26%}
.eco-card-3{left:2.5%;top:48%}
.eco-card-4{left:6%;top:72%}
.eco-card-5{right:3%;top:7%}
.eco-card-6{right:2.5%;top:36%}
.eco-card-7{right:5%;top:70%}

@media(max-width:1050px){
  .ecosystem-map{
    height:auto;
    min-height:0;
    padding:24px;
    display:grid;
    grid-template-columns:1fr;
    gap:16px;
  }

  .eco-links,
  .eco-center-ring{
    display:none;
  }

  .eco-center,
  .eco-tech-node,
  .eco-reset,
  .ecosystem-map .eco-project{
    position:relative !important;
    inset:auto !important;
    left:auto !important;
    right:auto !important;
    top:auto !important;
    bottom:auto !important;
    transform:none !important;
    width:100%;
  }

  .eco-center{
    order:1;
    padding:10px 0 18px;
  }

  .eco-center-photo{
    width:120px;
    height:120px;
  }

  .eco-tech-node{
    order:2;
    height:auto;
    min-height:64px;
    border-radius:16px;
  }

  .eco-reset{
    order:3;
  }

  .ecosystem-map .eco-project{
    order:4;
    min-height:0;
  }
}


/* ===================================================
   V54 — interactive runners around the hero photo
   =================================================== */

.hero-visual{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:18px;
}

.hero-focus-stage{
  position:relative;
  width:min(640px, 100%);
  height:690px;
}

.hero-focus-stage .portrait-card{
  position:absolute;
  left:50%;
  top:108px;
  transform:translateX(-50%);
  width:min(520px, calc(100% - 36px));
  z-index:4;
}

.hero-focus-node{
  position:absolute;
  z-index:6;
  width:156px;
  padding:12px 13px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.07);
  background:rgba(9,21,34,.92);
  text-align:left;
  cursor:pointer;
  transition:.22s ease;
  box-shadow:0 12px 24px rgba(0,0,0,.18);
}

.hero-focus-node:hover{
  transform:translateY(-2px);
}

.hero-focus-node span{
  display:block;
  color:#82a5d1;
  font-size:9px;
  text-transform:uppercase;
  letter-spacing:.12em;
  margin-bottom:5px;
}

.hero-focus-node b{
  display:block;
  color:#edf4fc;
  font-size:14px;
  line-height:1.35;
  font-weight:600;
}

.hero-focus-node.active{
  border-color:rgba(88,167,255,.42);
  box-shadow:
    0 0 0 1px rgba(88,167,255,.14),
    0 0 28px rgba(67,156,255,.18),
    0 12px 24px rgba(0,0,0,.18);
}

.hero-focus-node.firing{
  animation:heroNodeFlash 1.25s ease;
}

@keyframes heroNodeFlash{
  0%,100%{box-shadow:0 0 0 1px rgba(88,167,255,.14),0 0 28px rgba(67,156,255,.18),0 12px 24px rgba(0,0,0,.18)}
  40%{box-shadow:0 0 0 1px rgba(117,196,255,.28),0 0 42px rgba(73,174,255,.34),0 0 72px rgba(73,174,255,.18)}
}

.node-education{left:0;top:76px}
.node-rag{left:-4px;top:260px}
.node-voice{left:26px;top:492px}
.node-automation{right:0;top:80px}
.node-sales{right:-4px;top:270px}
.node-python{right:26px;top:500px}

.hero-focus-line{
  --line-w: 180px;
  --angle: 0deg;
  position:absolute;
  left:50%;
  top:286px;
  width:var(--line-w);
  height:2px;
  transform-origin:0 50%;
  transform:rotate(var(--angle));
  opacity:.34;
  border-radius:999px;
  background:linear-gradient(90deg, rgba(110,141,184,.55), rgba(110,141,184,.04));
  z-index:3;
  pointer-events:none;
}

.hero-focus-line.active{
  opacity:1;
  background:linear-gradient(90deg, rgba(79,188,255,.96), rgba(79,188,255,.10));
  box-shadow:0 0 18px rgba(79,188,255,.18);
}

.hero-focus-line .runner{
  position:absolute;
  left:0;
  top:50%;
  width:10px;
  height:10px;
  margin:-5px 0 0 0;
  border-radius:50%;
  opacity:0;
  background:#8be3ff;
  box-shadow:0 0 12px #8be3ff, 0 0 24px rgba(139,227,255,.75);
}

.hero-focus-line.firing .runner{
  animation:heroRunner 1.06s ease-out 2;
}

.hero-focus-line.firing .runner.runner-2{
  animation-delay:.18s;
}

@keyframes heroRunner{
  0%{transform:translateX(0) scale(.7);opacity:0}
  12%{opacity:1}
  100%{transform:translateX(calc(var(--line-w) - 10px)) scale(1);opacity:0}
}

.line-education{--line-w:162px;--angle:-144deg}
.line-rag{--line-w:210px;--angle:-178deg}
.line-voice{--line-w:198px;--angle:145deg}
.line-automation{--line-w:172px;--angle:-36deg}
.line-sales{--line-w:215px;--angle:0deg}
.line-python{--line-w:206px;--angle:38deg}

.hero-focus-panel{
  width:min(520px, calc(100% - 36px));
  margin:0 auto;
  padding:16px 18px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.06);
  background:
    radial-gradient(circle at 0% 0%, rgba(64,152,255,.10), transparent 34%),
    rgba(8,18,30,.92);
  box-shadow:0 16px 28px rgba(0,0,0,.16);
}

.hero-focus-panel-head{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:center;
  margin-bottom:8px;
}

.hero-focus-panel .kicker{
  color:#7e95ad;
  font-size:9px;
  text-transform:uppercase;
  letter-spacing:.14em;
}

.hero-focus-badge{
  flex:0 0 auto;
  padding:6px 9px;
  border-radius:999px;
  border:1px solid rgba(88,167,255,.18);
  color:#b8dcff;
  background:rgba(88,167,255,.06);
  font-size:9px;
  text-transform:uppercase;
  letter-spacing:.10em;
}

.hero-focus-panel h4{
  margin:0 0 7px;
  color:#eef5fd;
  font-size:22px;
  line-height:1.25;
}

.hero-focus-panel p{
  margin:0;
  color:#98adbf;
  font-size:14px;
  line-height:1.65;
}

@media(max-width:1100px){
  .hero-focus-stage{
    height:720px;
  }

  .node-education{left:8px}
  .node-rag{left:2px}
  .node-voice{left:24px}
  .node-automation{right:8px}
  .node-sales{right:2px}
  .node-python{right:24px}
}

@media(max-width:820px){
  .hero-focus-stage{
    width:100%;
    height:auto;
    display:grid;
    gap:12px;
    grid-template-columns:1fr 1fr;
  }

  .hero-focus-stage .portrait-card{
    position:relative;
    left:auto;
    top:auto;
    transform:none;
    width:100%;
    order:1;
    grid-column:1 / -1;
  }

  .hero-focus-line{
    display:none;
  }

  .hero-focus-node{
    position:relative;
    left:auto !important;
    right:auto !important;
    top:auto !important;
    bottom:auto !important;
    width:100%;
  }

  .hero-focus-panel{
    width:100%;
  }
}

@media(max-width:560px){
  .hero-focus-stage{
    grid-template-columns:1fr;
  }

  .hero-focus-panel h4{
    font-size:19px;
  }

  .hero-focus-panel p{
    font-size:13px;
  }
}


/* ===================================================
   V55 — bilingual project labels in hero blocks
   =================================================== */

.hero-focus-node{
  width:184px !important;
}

.hero-focus-node span{
  text-transform:none !important;
  letter-spacing:.04em !important;
  line-height:1.35;
}

.hero-focus-node b{
  font-size:12px !important;
  color:#cbd8e8 !important;
  font-weight:500 !important;
}

.node-english{left:-18px;top:40px}
.node-shpargalka{left:-24px;top:205px}
.node-voice{left:0;top:478px}
.node-docs{right:-18px;top:35px}
.node-sales{right:-28px;top:188px}
.node-onboard{right:-15px;top:358px}
.node-virtual{right:16px;top:525px}

.line-english{--line-w:180px;--angle:-148deg}
.line-shpargalka{--line-w:220px;--angle:-179deg}
.line-voice{--line-w:205px;--angle:144deg}
.line-docs{--line-w:188px;--angle:-34deg}
.line-sales{--line-w:225px;--angle:-6deg}
.line-onboard{--line-w:226px;--angle:17deg}
.line-virtual{--line-w:214px;--angle:42deg}

.ecosystem-map .eco-tech-node{
  width:150px !important;
  height:82px !important;
}

.ecosystem-map .eco-tech-node b{
  font-size:10px !important;
  line-height:1.25;
}

.ecosystem-map .eco-project strong{
  font-size:10px !important;
  line-height:1.35;
}


/* ===================================================
   V56 — visible portrait runner + project launch runners
   =================================================== */

.hero-visual{
  overflow:visible !important;
}

.hero-focus-stage{
  width:min(860px, 118%) !important;
  height:650px !important;
  overflow:visible !important;
}

/* Portrait sits in the middle, leaving real space for project cards. */
.hero-focus-stage .portrait-card{
  left:50% !important;
  top:82px !important;
  width:470px !important;
  height:500px !important;
  transform:translateX(-50%) !important;
  z-index:5 !important;
}

/* Two bright segments continuously orbit the portrait perimeter. */
.portrait-runner-track{
  position:absolute;
  left:50%;
  top:82px;
  width:470px;
  height:500px;
  transform:translateX(-50%);
  border-radius:30px;
  z-index:7;
  pointer-events:none;
  overflow:visible;
}

.portrait-runner-track::before{
  content:"";
  position:absolute;
  inset:-4px;
  border-radius:34px;
  padding:3px;
  background:
    conic-gradient(
      from 0deg,
      transparent 0deg 276deg,
      rgba(98,210,255,.10) 286deg,
      rgba(104,220,255,.95) 310deg,
      #d7f7ff 322deg,
      rgba(104,220,255,.88) 334deg,
      transparent 350deg 360deg
    );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  filter:
    drop-shadow(0 0 5px rgba(93,207,255,.95))
    drop-shadow(0 0 12px rgba(74,172,255,.55));
  animation:portraitOrbit 4.8s linear infinite;
}

.portrait-runner-track::after{
  content:"";
  position:absolute;
  inset:-5px;
  border-radius:35px;
  padding:2px;
  background:
    conic-gradient(
      from 180deg,
      transparent 0deg 310deg,
      rgba(125,226,255,.06) 315deg,
      rgba(125,226,255,.68) 330deg,
      transparent 350deg 360deg
    );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  filter:drop-shadow(0 0 9px rgba(85,191,255,.55));
  animation:portraitOrbit 6.2s linear infinite reverse;
}

@keyframes portraitOrbit{
  to{transform:rotate(360deg)}
}

/* Extra small "sparks" orbiting around the portrait. */
.portrait-runner-track .orbit-runner{
  position:absolute;
  width:12px;
  height:12px;
  border-radius:50%;
  background:#bdf2ff;
  box-shadow:
    0 0 8px #95e7ff,
    0 0 18px rgba(83,196,255,.92),
    0 0 32px rgba(70,151,255,.50);
  offset-path:inset(-5px round 35px);
  offset-rotate:0deg;
  animation:portraitSpark 4.8s linear infinite;
}

.portrait-runner-track .orbit-b{
  width:8px;
  height:8px;
  animation-duration:6.2s;
  animation-delay:-2.7s;
}

@keyframes portraitSpark{
  from{offset-distance:0%}
  to{offset-distance:100%}
}

/* Project cards sit outside the photo instead of on top of it. */
.hero-focus-node{
  width:174px !important;
  min-height:72px;
  z-index:10 !important;
  background:rgba(6,16,29,.96) !important;
}

.node-english{left:0 !important;top:32px !important}
.node-shpargalka{left:0 !important;top:220px !important}
.node-voice{left:0 !important;top:472px !important}

.node-docs{right:0 !important;top:30px !important}
.node-sales{right:0 !important;top:190px !important}
.node-onboard{right:0 !important;top:350px !important}
.node-virtual{right:0 !important;top:510px !important}

/* Lines now BEGIN on the portrait border and go OUT to the selected project. */
.hero-focus-line{
  left:50% !important;
  top:0 !important;
  height:3px !important;
  opacity:.16 !important;
  z-index:8 !important;
  overflow:visible !important;
  background:rgba(91,157,214,.28) !important;
  box-shadow:none !important;
}

.hero-focus-line.active{
  opacity:1 !important;
  background:linear-gradient(
    90deg,
    rgba(172,239,255,.96),
    rgba(69,185,255,.88) 44%,
    rgba(68,154,255,.18)
  ) !important;
  box-shadow:
    0 0 9px rgba(101,212,255,.75),
    0 0 22px rgba(66,154,255,.32) !important;
}

.line-english{
  left:calc(50% - 235px) !important;
  top:150px !important;
  --line-w:120px !important;
  --angle:210deg !important;
}
.line-shpargalka{
  left:calc(50% - 235px) !important;
  top:280px !important;
  --line-w:118px !important;
  --angle:183deg !important;
}
.line-voice{
  left:calc(50% - 235px) !important;
  top:490px !important;
  --line-w:125px !important;
  --angle:174deg !important;
}

.line-docs{
  left:calc(50% + 235px) !important;
  top:150px !important;
  --line-w:120px !important;
  --angle:-30deg !important;
}
.line-sales{
  left:calc(50% + 235px) !important;
  top:255px !important;
  --line-w:118px !important;
  --angle:-5deg !important;
}
.line-onboard{
  left:calc(50% + 235px) !important;
  top:390px !important;
  --line-w:120px !important;
  --angle:4deg !important;
}
.line-virtual{
  left:calc(50% + 235px) !important;
  top:520px !important;
  --line-w:128px !important;
  --angle:15deg !important;
}

/* The "runner" is a bright pulse with a visible light trail. */
.hero-focus-line .runner{
  width:30px !important;
  height:5px !important;
  margin-top:-2.5px !important;
  border-radius:999px !important;
  opacity:0;
  background:linear-gradient(
    90deg,
    transparent 0%,
    rgba(81,190,255,.20) 24%,
    #8de5ff 72%,
    #effcff 100%
  ) !important;
  box-shadow:
    0 0 7px #8de5ff,
    0 0 16px rgba(80,194,255,.96),
    0 0 30px rgba(57,135,255,.55) !important;
}

.hero-focus-line.firing .runner{
  animation:heroRunnerV56 1.18s cubic-bezier(.22,.72,.25,1) 2 !important;
}

.hero-focus-line.firing .runner.runner-2{
  animation-delay:.24s !important;
}

@keyframes heroRunnerV56{
  0%{
    transform:translateX(0) scaleX(.45);
    opacity:0;
  }
  8%{opacity:1}
  70%{opacity:1}
  100%{
    transform:translateX(calc(var(--line-w) - 30px)) scaleX(1.1);
    opacity:0;
  }
}

/* Clicking a project visibly "receives" the pulse. */
.hero-focus-node.active{
  border-color:rgba(113,211,255,.72) !important;
  background:
    radial-gradient(circle at 0% 50%,rgba(76,190,255,.15),transparent 52%),
    rgba(6,16,29,.98) !important;
  box-shadow:
    0 0 0 1px rgba(95,194,255,.18),
    0 0 16px rgba(77,190,255,.34),
    0 0 36px rgba(55,133,255,.22) !important;
}

.hero-focus-node.firing{
  animation:heroNodeReceiveV56 1.38s ease both !important;
}

@keyframes heroNodeReceiveV56{
  0%{
    border-color:rgba(255,255,255,.07);
    box-shadow:0 12px 24px rgba(0,0,0,.18);
  }
  48%{
    border-color:#a5ebff;
    box-shadow:
      0 0 0 1px rgba(150,234,255,.56),
      0 0 24px rgba(77,207,255,.78),
      0 0 54px rgba(44,125,255,.38);
  }
  100%{
    border-color:rgba(113,211,255,.72);
    box-shadow:
      0 0 0 1px rgba(95,194,255,.18),
      0 0 16px rgba(77,190,255,.34),
      0 0 36px rgba(55,133,255,.22);
  }
}

/* The portrait also flashes when a project pulse launches. */
.hero-focus-stage.is-firing .portrait-runner-track{
  filter:brightness(1.35);
}

.hero-focus-stage.is-firing .portrait-runner-track::before{
  animation-duration:2.6s;
}

@media(max-width:1180px){
  .hero-focus-stage{
    width:min(760px, 112%) !important;
  }

  .hero-focus-stage .portrait-card,
  .portrait-runner-track{
    width:430px !important;
  }

  .hero-focus-node{
    width:158px !important;
  }

  .line-english,
  .line-shpargalka,
  .line-voice{
    left:calc(50% - 215px) !important;
  }

  .line-docs,
  .line-sales,
  .line-onboard,
  .line-virtual{
    left:calc(50% + 215px) !important;
  }
}

@media(max-width:820px){
  .portrait-runner-track{
    display:none !important;
  }

  .hero-focus-stage{
    width:100% !important;
    height:auto !important;
  }
}


/* ===================================================
   V57 — JS-driven runners (browser-safe, unmistakable)
   =================================================== */

.hero-focus-stage{
  overflow:visible !important;
}

.hero-pulse-layer{
  position:absolute;
  inset:0;
  z-index:30;
  pointer-events:none;
  overflow:visible;
}

.orbit-dot{
  position:absolute;
  width:12px;
  height:12px;
  border-radius:50%;
  background:#d9f8ff;
  box-shadow:
    0 0 8px #a5ecff,
    0 0 18px rgba(91,211,255,.95),
    0 0 34px rgba(62,143,255,.58);
  transform:translate(-50%,-50%);
}

.orbit-dot-b{
  width:8px;
  height:8px;
  opacity:.9;
}

.hero-pulse{
  position:absolute;
  left:0;
  top:0;
  width:34px;
  height:6px;
  border-radius:999px;
  transform-origin:center;
  background:
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(78,192,255,.28) 24%,
      #83e4ff 68%,
      #f2fdff 100%
    );
  box-shadow:
    0 0 8px #9cecff,
    0 0 18px rgba(76,202,255,.95),
    0 0 34px rgba(53,132,255,.60);
  opacity:0;
  pointer-events:none;
}

.hero-beam{
  position:absolute;
  left:0;
  top:0;
  height:3px;
  border-radius:999px;
  transform-origin:0 50%;
  background:
    linear-gradient(
      90deg,
      rgba(159,239,255,.95),
      rgba(70,188,255,.72) 52%,
      rgba(68,145,255,.10)
    );
  box-shadow:
    0 0 8px rgba(110,225,255,.72),
    0 0 18px rgba(62,157,255,.30);
  opacity:0;
  pointer-events:none;
}

.hero-focus-node.pulse-hit{
  animation:pulseHitV57 1.15s ease both !important;
}

@keyframes pulseHitV57{
  0%{
    border-color:rgba(255,255,255,.07);
    box-shadow:0 12px 24px rgba(0,0,0,.18);
  }
  45%{
    border-color:#b8f1ff;
    box-shadow:
      0 0 0 1px rgba(157,237,255,.55),
      0 0 28px rgba(75,211,255,.82),
      0 0 58px rgba(54,125,255,.42);
  }
  100%{
    border-color:rgba(113,211,255,.72);
    box-shadow:
      0 0 0 1px rgba(95,194,255,.18),
      0 0 16px rgba(77,190,255,.34),
      0 0 36px rgba(55,133,255,.22);
  }
}

@media(max-width:820px){
  .hero-pulse-layer{
    display:none !important;
  }
}


/* ===================================================
   V58 — guaranteed visible SVG runners
   =================================================== */

.hero-focus-stage{
  width:860px !important;
  max-width:none !important;
  height:650px !important;
  overflow:visible !important;
}

.hero-runner-svg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:9;
  overflow:visible;
  pointer-events:none;
}

.hero-orbit-path{
  fill:none;
  stroke:rgba(71,153,214,.15);
  stroke-width:2;
}

.hero-orbit-pulse{
  fill:none;
  stroke:#8fe7ff;
  stroke-width:5;
  stroke-linecap:round;
  stroke-dasharray:54 1890;
  filter:
    drop-shadow(0 0 4px #a5ecff)
    drop-shadow(0 0 10px rgba(78,194,255,.95))
    drop-shadow(0 0 22px rgba(58,132,255,.58));
  animation:heroOrbitDashV58 4.1s linear infinite;
}

.hero-orbit-pulse.orbit-pulse-b{
  stroke-width:3;
  stroke:#d8f9ff;
  stroke-dasharray:28 1916;
  animation-duration:5.8s;
  animation-delay:-2.3s;
}

@keyframes heroOrbitDashV58{
  from{stroke-dashoffset:0}
  to{stroke-dashoffset:-1944}
}

.hero-ray{
  fill:none;
  stroke:rgba(97,165,216,.25);
  stroke-width:2;
  stroke-linecap:round;
}

.hero-ray-pulse{
  fill:none;
  stroke:#9eeaff;
  stroke-width:5;
  stroke-linecap:round;
  stroke-dasharray:22 180;
  opacity:.32;
  filter:
    drop-shadow(0 0 4px #a8edff)
    drop-shadow(0 0 11px rgba(71,193,255,.82));
  animation:heroRayRunnerV58 1.75s linear infinite;
}

.hero-ray-pulse.active{
  opacity:1;
  stroke-width:7;
  stroke:#d6f8ff;
  stroke-dasharray:28 174;
  filter:
    drop-shadow(0 0 5px #c4f4ff)
    drop-shadow(0 0 13px rgba(75,207,255,1))
    drop-shadow(0 0 28px rgba(51,129,255,.72));
  animation-duration:.78s;
}

.hero-ray-pulse.active.flash{
  animation:
    heroRayRunnerV58 .62s linear infinite,
    heroRayFlashV58 .95s ease;
}

@keyframes heroRayRunnerV58{
  from{stroke-dashoffset:0}
  to{stroke-dashoffset:-202}
}

@keyframes heroRayFlashV58{
  0%,100%{opacity:1}
  45%{opacity:1;stroke-width:10}
}

.hero-focus-node{
  z-index:12 !important;
}

/* force current project border to look like it receives the running light */
.hero-focus-node.active{
  border-color:#7fdcff !important;
  box-shadow:
    0 0 0 1px rgba(151,231,255,.30),
    0 0 16px rgba(70,201,255,.52),
    0 0 34px rgba(48,128,255,.30) !important;
}

@media(max-width:1180px){
  .hero-focus-stage{
    transform:scale(.88);
    transform-origin:top center;
    margin-bottom:-74px;
  }
}

@media(max-width:700px){
  .hero-runner-svg{
    display:none !important;
  }

  .hero-focus-stage{
    width:100% !important;
    height:auto !important;
    transform:none !important;
    margin-bottom:0 !important;
  }
}


/* ===================================================
   V60 — RUNNER CONFLICT FIX
   Older global prefers-reduced-motion rules were collapsing
   all animation durations to .001ms. Keep the portfolio's
   decorative hero runners alive explicitly.
   =================================================== */

@media (prefers-reduced-motion: reduce){

  .hero-orbit-pulse{
    animation-name:v59Orbit !important;
    animation-duration:3.1s !important;
    animation-timing-function:linear !important;
    animation-delay:0s !important;
    animation-iteration-count:infinite !important;
    animation-direction:normal !important;
    animation-fill-mode:none !important;
    animation-play-state:running !important;
  }

  .hero-orbit-pulse.orbit-pulse-b{
    animation-name:v59Orbit !important;
    animation-duration:4.8s !important;
    animation-delay:-1.7s !important;
    animation-iteration-count:infinite !important;
    animation-play-state:running !important;
  }

  .hero-ray-pulse{
    animation-name:v59Ray !important;
    animation-duration:1.18s !important;
    animation-timing-function:linear !important;
    animation-delay:0s !important;
    animation-iteration-count:infinite !important;
    animation-direction:normal !important;
    animation-fill-mode:none !important;
    animation-play-state:running !important;
  }

  .hero-ray-pulse.active{
    animation-name:v59Ray !important;
    animation-duration:.56s !important;
    animation-iteration-count:infinite !important;
    animation-play-state:running !important;
  }

  .hero-focus-node.firing,
  .hero-focus-node.pulse-hit{
    animation-duration:1.15s !important;
    animation-iteration-count:1 !important;
  }
}

/* Extra safeguard: even if another old rule sets animation:none,
   these definitions at the very end win. */
.hero-orbit-pulse{
  animation:v59Orbit 3.1s linear infinite !important;
}
.hero-orbit-pulse.orbit-pulse-b{
  animation:v59Orbit 4.8s linear -1.7s infinite !important;
}
.hero-ray-pulse{
  animation:v59Ray 1.18s linear infinite !important;
}
.hero-ray-pulse.active{
  animation:v59Ray .56s linear infinite !important;
}


/* ===================================================
   V61 — RAF runners: NO CSS animation, NO SVG dependency
   =================================================== */
.hero-focus-stage{
  position:relative !important;
  overflow:visible !important;
}

.raf-runner-layer{
  position:absolute !important;
  inset:0 !important;
  z-index:999 !important;
  pointer-events:none !important;
  overflow:visible !important;
}

.raf-orbit-dot,
.raf-flight-dot{
  position:absolute !important;
  width:14px !important;
  height:14px !important;
  margin-left:-7px !important;
  margin-top:-7px !important;
  border-radius:50% !important;
  background:#e8fbff !important;
  box-shadow:
    0 0 6px #ffffff,
    0 0 14px #80e5ff,
    0 0 28px #42bfff,
    0 0 44px rgba(39,108,255,.85) !important;
  opacity:1 !important;
  visibility:visible !important;
}

.raf-orbit-dot-b{
  width:9px !important;
  height:9px !important;
  margin-left:-4.5px !important;
  margin-top:-4.5px !important;
  background:#86e4ff !important;
}

.raf-flight-line{
  position:absolute !important;
  height:3px !important;
  transform-origin:0 50% !important;
  border-radius:999px !important;
  background:linear-gradient(90deg,#dffaff,#68d8ff 52%,rgba(63,139,255,.10)) !important;
  box-shadow:0 0 7px #8ce8ff,0 0 18px rgba(58,178,255,.65) !important;
  opacity:.75 !important;
}

.hero-focus-node.raf-hit{
  border-color:#a5efff !important;
  box-shadow:
    0 0 0 1px rgba(162,237,255,.38),
    0 0 22px rgba(72,209,255,.72),
    0 0 46px rgba(45,122,255,.40) !important;
}

@media(max-width:700px){
  .raf-runner-layer{display:none !important}
}


/* ===================================================
   V62 — AI LAB HERO + ONE-ROW PROJECT GALLERY
   =================================================== */

.ai-lab-hero{
  position:relative;
  min-height:720px !important;
  display:grid !important;
  grid-template-columns:46% 54% !important;
  gap:0 !important;
  align-items:stretch !important;
  overflow:hidden !important;
  width:100% !important;
  max-width:none !important;
  padding:0 !important;
  margin:0 auto !important;
  background:#000;
}

.ai-lab-hero .hero-copy{
  position:relative;
  z-index:5;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:70px 5vw 70px 5.5vw !important;
  min-width:0;
  background:
    linear-gradient(90deg,#000 0%,#000 68%,rgba(0,0,0,.78) 86%,transparent 100%);
}

.ai-lab-hero .hero-copy::after{
  content:"";
  position:absolute;
  inset:0 -14% 0 0;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(circle at 85% 30%,rgba(53,116,255,.10),transparent 28%),
    linear-gradient(90deg,#000 0%,rgba(0,0,0,.96) 58%,rgba(0,0,0,.72) 80%,transparent 100%);
}

.ai-lab-hero .hero-name-split{
  max-width:760px;
}

.hero-lab-scene{
  position:relative;
  min-height:720px;
  overflow:hidden;
}

.hero-lab-photo{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 38%;
  transform:scale(1.02);
  filter:saturate(.96) contrast(1.03);
}

.hero-lab-fade{
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,#000 0%,rgba(0,0,0,.78) 6%,rgba(0,0,0,.20) 26%,transparent 48%),
    linear-gradient(0deg,#000 0%,transparent 18%),
    linear-gradient(180deg,rgba(0,0,0,.18),transparent 22%);
  pointer-events:none;
}

.hero-lab-glow{
  position:absolute;
  border-radius:50%;
  filter:blur(70px);
  opacity:.14;
  pointer-events:none;
}
.hero-lab-glow.glow-a{
  width:320px;height:320px;right:6%;top:8%;background:#5e58ff;
}
.hero-lab-glow.glow-b{
  width:260px;height:260px;left:8%;bottom:4%;background:#28b8ff;
}

.hero-lab-label{
  position:absolute;
  right:4vw;
  top:90px;
  color:rgba(179,221,255,.72);
  font-size:15px;
  letter-spacing:.34em;
  text-shadow:0 0 20px rgba(73,178,255,.45);
}

.hero-mini-skills{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:34px;
}

.hero-mini-skills span{
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.09);
  background:rgba(255,255,255,.025);
  color:#aebdd0;
  font-size:10px;
}

/* Hide old hero-runner debug layers completely. */
.hero-focus-stage,
.hero-focus-panel,
.hero-runner-svg,
.raf-runner-layer,
.portrait-runner-track,
.hero-pulse-layer,
.hero-focus-node,
.hero-focus-line{
  display:none !important;
}

/* Projects */
.projects-lab{
  width:100% !important;
  max-width:none !important;
  padding:52px 2.2vw 68px !important;
  background:
    linear-gradient(180deg,#02060c,#050a12 55%,#02060c);
  overflow:hidden;
}

.lab-heading{
  width:min(1500px,95vw);
  margin:0 auto 26px;
}

.projects-strip-wrap{
  width:100%;
  overflow-x:auto;
  overflow-y:hidden;
  padding-bottom:12px;
  scrollbar-width:thin;
  scrollbar-color:rgba(102,140,255,.28) transparent;
}

.projects-strip{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:minmax(220px,1fr);
  grid-template-rows:1fr;
  gap:12px;
  min-width:max-content;
  width:max-content;
  padding:0 2px;
}

.lab-project-card{
  width:230px;
  min-height:430px;
  border-radius:20px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.075);
  background:#08111d;
  cursor:pointer;
  transition:.22s ease;
  box-shadow:0 14px 30px rgba(0,0,0,.22);
}

.lab-project-card:hover{
  transform:translateY(-6px);
  border-color:rgba(91,157,255,.34);
  box-shadow:
    0 0 0 1px rgba(96,137,255,.08),
    0 18px 36px rgba(0,0,0,.32),
    0 0 24px rgba(74,125,255,.08);
}

.lab-cover{
  position:relative;
  height:200px;
  padding:17px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  background:#0b1523;
}

.lab-cover::before,
.lab-cover::after{
  content:"";
  position:absolute;
  border-radius:50%;
  filter:blur(36px);
  opacity:.32;
}

.lab-cover::before{
  width:160px;height:160px;right:-45px;top:-45px;background:#6274ff;
}

.lab-cover::after{
  width:110px;height:110px;left:-30px;bottom:-30px;background:#21b7ff;
}

.lab-cover-grid{
  position:absolute;
  inset:0;
  opacity:.12;
  background-image:
    linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);
  background-size:24px 24px;
  mask-image:linear-gradient(to bottom,black,transparent 82%);
}

.lab-cover-icon{
  position:absolute;
  left:17px;top:17px;
  width:42px;height:42px;
  display:grid;place-items:center;
  border-radius:13px;
  color:#eff7ff;
  font-weight:800;
  font-size:11px;
  background:rgba(101,120,255,.17);
  border:1px solid rgba(143,159,255,.20);
  box-shadow:0 0 20px rgba(80,117,255,.12);
}

.lab-cover-title{
  position:relative;
  z-index:2;
  color:#f1f6fc;
  font-size:15px;
  font-weight:700;
  line-height:1.28;
}

.lab-cover-en{
  position:relative;
  z-index:2;
  color:#8da3ba;
  font-size:10px;
  margin-top:5px;
}

.lab-card-body{
  padding:15px;
}

.lab-card-body h3{
  margin:0 0 9px;
  color:#eef4fb;
  font-size:13px;
  line-height:1.35;
}

.lab-card-body h3 span{
  color:#91a5bc;
  font-weight:500;
  font-size:11px;
}

.lab-card-body p{
  min-height:42px;
  margin:0 0 12px;
  color:#8295ab;
  font-size:10px;
  line-height:1.5;
}

.lab-tags{
  display:flex;
  flex-wrap:wrap;
  gap:5px;
  margin-bottom:14px;
}

.lab-tags span{
  padding:5px 7px;
  border-radius:999px;
  font-size:8px;
  color:#93a7bd;
  border:1px solid rgba(255,255,255,.06);
  background:rgba(255,255,255,.025);
}

.lab-open-btn{
  width:100%;
  padding:10px 11px;
  border-radius:11px;
  cursor:pointer;
  border:1px solid rgba(89,144,255,.24);
  background:linear-gradient(135deg,rgba(67,127,255,.11),rgba(112,82,255,.09));
  color:#dce9f9;
  font-size:10px;
}

/* Give each cover its own mood. */
.english-cover::before{background:#725cff}
.english-cover::after{background:#359bff}
.sh-cover::before{background:#8856ff}
.sh-cover::after{background:#20d0ff}
.voice-cover::before{background:#21d793}
.voice-cover::after{background:#26aaff}
.docs-cover::before{background:#33a8ff}
.docs-cover::after{background:#56e6ff}
.sales-cover::before{background:#6177ff}
.sales-cover::after{background:#744cff}
.onboard-cover::before{background:#a458ff}
.onboard-cover::after{background:#4e82ff}
.virtual-cover::before{background:#596fff}
.virtual-cover::after{background:#a65cff}

/* Unified project modal */
.project-hub{
  display:grid;
  gap:18px;
}

.project-hub-head h3{
  margin:6px 0 8px;
  color:#f2f7fd;
  font-size:30px;
  line-height:1.25;
}

.project-hub-head p{
  margin:0;
  color:#91a5bb;
  line-height:1.6;
}

.project-hub-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:4px;
}

@media(min-width:1500px){
  .projects-strip{
    width:100%;
    min-width:100%;
    grid-auto-columns:minmax(0,1fr);
  }
  .lab-project-card{
    width:auto;
    min-width:0;
  }
}

@media(max-width:980px){
  .ai-lab-hero{
    grid-template-columns:1fr !important;
    min-height:auto !important;
  }

  .ai-lab-hero .hero-copy{
    padding:70px 7vw 40px !important;
    background:#000;
  }

  .hero-lab-scene{
    min-height:560px;
  }

  .hero-lab-fade{
    background:
      linear-gradient(180deg,#000 0%,rgba(0,0,0,.15) 24%,transparent 46%),
      linear-gradient(0deg,#000 0%,transparent 18%);
  }
}

@media(max-width:620px){
  .hero-lab-scene{
    min-height:450px;
  }

  .lab-project-card{
    width:215px;
    min-height:408px;
  }

  .lab-cover{
    height:180px;
  }
}


/* ===================================================
   V64 — hero photo adjusted so the top of the head is not cropped
   =================================================== */
.hero-lab-photo{
  object-fit:contain !important;
  object-position:center 58% !important;
  transform:scale(.90) !important;
}

.hero-lab-scene{
  background:
    radial-gradient(circle at 78% 22%, rgba(100,127,255,.18), transparent 18%),
    radial-gradient(circle at 92% 56%, rgba(43,164,255,.10), transparent 20%),
    #000 !important;
}

@media(max-width:980px){
  .hero-lab-photo{
    object-position:center 54% !important;
    transform:scale(.94) !important;
  }
}

@media(max-width:620px){
  .hero-lab-photo{
    object-position:center 52% !important;
    transform:scale(.98) !important;
  }
}


/* ===================================================
   V65 — blended hero image, no hard photo rectangle
   =================================================== */

.ai-lab-hero{
  position:relative !important;
  display:block !important;
  min-height:760px !important;
  overflow:hidden !important;
  background:
    radial-gradient(circle at 82% 18%, rgba(91,104,255,.18), transparent 18%),
    radial-gradient(circle at 72% 62%, rgba(42,170,255,.09), transparent 20%),
    #000 !important;
}

.ai-lab-hero .hero-copy{
  position:relative !important;
  z-index:5 !important;
  width:min(48%, 860px) !important;
  min-height:760px !important;
  padding:90px 5vw 86px 5.5vw !important;
  background:
    linear-gradient(90deg,
      #000 0%,
      #000 64%,
      rgba(0,0,0,.93) 76%,
      rgba(0,0,0,.55) 88%,
      rgba(0,0,0,0) 100%) !important;
}

.hero-lab-scene{
  position:absolute !important;
  inset:0 0 0 34% !important;
  min-height:760px !important;
  overflow:hidden !important;
  background:transparent !important;
  z-index:1 !important;
}

.hero-lab-photo{
  position:absolute !important;
  right:-1.5% !important;
  top:0 !important;
  width:76% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:center 26% !important;
  transform:scale(1.02) !important;
  filter:saturate(.98) contrast(1.02) brightness(.97) !important;
  border:none !important;
  box-shadow:none !important;
}

.hero-lab-scene::before{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  z-index:3 !important;
  pointer-events:none !important;
  background:
    linear-gradient(90deg,
      #000 0%,
      rgba(0,0,0,.98) 8%,
      rgba(0,0,0,.82) 18%,
      rgba(0,0,0,.44) 30%,
      rgba(0,0,0,.12) 40%,
      rgba(0,0,0,0) 52%),
    linear-gradient(0deg,
      rgba(0,0,0,.55) 0%,
      rgba(0,0,0,0) 18%,
      rgba(0,0,0,0) 82%,
      rgba(0,0,0,.18) 100%);
}

.hero-lab-scene::after{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  z-index:4 !important;
  pointer-events:none !important;
  background:
    radial-gradient(circle at 76% 18%, rgba(102,132,255,.15), transparent 18%),
    radial-gradient(circle at 92% 50%, rgba(34,158,255,.09), transparent 18%);
}

.hero-lab-fade{
  display:none !important;
}

.hero-lab-label{
  right:3.8vw !important;
  top:118px !important;
  z-index:6 !important;
  letter-spacing:.42em !important;
  color:rgba(196,220,255,.78) !important;
  text-shadow:0 0 22px rgba(71,164,255,.38) !important;
}

.hero-lab-glow{
  opacity:.18 !important;
}

@media(max-width:1200px){
  .ai-lab-hero{
    min-height:700px !important;
  }
  .ai-lab-hero .hero-copy{
    width:min(52%, 760px) !important;
    min-height:700px !important;
  }
  .hero-lab-scene{
    inset:0 0 0 38% !important;
    min-height:700px !important;
  }
  .hero-lab-photo{
    width:82% !important;
    object-position:center 28% !important;
  }
}

@media(max-width:980px){
  .ai-lab-hero{
    display:grid !important;
    grid-template-columns:1fr !important;
    min-height:auto !important;
  }
  .ai-lab-hero .hero-copy{
    width:100% !important;
    min-height:auto !important;
    padding:72px 7vw 34px !important;
    background:#000 !important;
  }
  .hero-lab-scene{
    position:relative !important;
    inset:auto !important;
    min-height:560px !important;
  }
  .hero-lab-scene::before{
    background:
      linear-gradient(180deg,#000 0%,rgba(0,0,0,.22) 16%,rgba(0,0,0,0) 34%),
      linear-gradient(0deg,#000 0%,rgba(0,0,0,.06) 15%,rgba(0,0,0,0) 34%) !important;
  }
  .hero-lab-photo{
    right:0 !important;
    width:100% !important;
    object-fit:contain !important;
    object-position:center 50% !important;
    transform:scale(.96) !important;
  }
}

@media(max-width:620px){
  .hero-lab-scene{
    min-height:440px !important;
  }
  .hero-lab-photo{
    transform:scale(.98) !important;
  }
}


/* ===================================================
   V66 — move portrait right + dissolve BOTH image edges
   =================================================== */

.ai-lab-hero{
  background:#000 !important;
}

/* Let the scene occupy the full right half all the way to the viewport edge. */
.hero-lab-scene{
  position:absolute !important;
  inset:0 0 0 39% !important;
  min-height:760px !important;
  overflow:hidden !important;
  background:#000 !important;
}

/* Fill the whole scene; move the subject visually to the right. */
.hero-lab-photo{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:60% 27% !important;
  transform:scale(1.035) translateX(3.5%) !important;
  border:none !important;
  outline:none !important;
  box-shadow:none !important;
}

/* One continuous fade layer: left edge dissolves into hero text,
   right edge dissolves into black instead of ending as a rectangle. */
.hero-lab-scene::before{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  z-index:4 !important;
  pointer-events:none !important;
  background:
    linear-gradient(
      90deg,
      #000 0%,
      rgba(0,0,0,.99) 7%,
      rgba(0,0,0,.82) 15%,
      rgba(0,0,0,.43) 24%,
      rgba(0,0,0,.12) 32%,
      rgba(0,0,0,0) 42%,
      rgba(0,0,0,0) 78%,
      rgba(0,0,0,.10) 86%,
      rgba(0,0,0,.42) 93%,
      #000 100%
    ),
    linear-gradient(
      0deg,
      rgba(0,0,0,.38) 0%,
      rgba(0,0,0,0) 16%,
      rgba(0,0,0,0) 84%,
      rgba(0,0,0,.12) 100%
    ) !important;
}

/* Soft atmospheric glow remains over the photo, but no hard side strip. */
.hero-lab-scene::after{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  z-index:5 !important;
  pointer-events:none !important;
  background:
    radial-gradient(circle at 78% 18%, rgba(108,120,255,.14), transparent 18%),
    radial-gradient(circle at 72% 58%, rgba(38,159,255,.07), transparent 24%) !important;
}

/* Keep text panel black, but make its edge transparent enough to merge. */
.ai-lab-hero .hero-copy{
  z-index:6 !important;
  background:
    linear-gradient(
      90deg,
      #000 0%,
      #000 62%,
      rgba(0,0,0,.96) 72%,
      rgba(0,0,0,.72) 84%,
      rgba(0,0,0,.24) 94%,
      rgba(0,0,0,0) 100%
    ) !important;
}

/* Put AI LAB over the image instead of in a separate black zone. */
.hero-lab-label{
  right:4.5vw !important;
  top:118px !important;
  z-index:8 !important;
}

@media(max-width:1200px){
  .hero-lab-scene{
    inset:0 0 0 41% !important;
  }

  .hero-lab-photo{
    object-position:62% 28% !important;
    transform:scale(1.04) translateX(4%) !important;
  }
}

@media(max-width:980px){
  .hero-lab-scene{
    position:relative !important;
    inset:auto !important;
    min-height:560px !important;
  }

  .hero-lab-photo{
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    object-position:56% 35% !important;
    transform:scale(1.02) !important;
  }

  .hero-lab-scene::before{
    background:
      linear-gradient(180deg,
        #000 0%,
        rgba(0,0,0,.20) 16%,
        rgba(0,0,0,0) 34%,
        rgba(0,0,0,0) 80%,
        #000 100%
      ) !important;
  }
}


/* ===================================================
   V67 — approved visual-style project covers
   =================================================== */

.projects-lab{
  padding-top:58px !important;
}

.projects-strip{
  gap:14px !important;
}

.lab-project-card{
  width:245px !important;
  min-height:470px !important;
  border-radius:22px !important;
  background:
    linear-gradient(180deg,rgba(9,17,31,.98),rgba(5,10,18,.98)) !important;
  border:1px solid rgba(109,91,255,.24) !important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.015) inset,
    0 18px 40px rgba(0,0,0,.28) !important;
}

.lab-project-card:nth-child(2){
  border-color:rgba(35,224,190,.40) !important;
  box-shadow:0 0 26px rgba(25,220,190,.06),0 18px 40px rgba(0,0,0,.28) !important;
}
.lab-project-card:nth-child(3),
.lab-project-card:nth-child(4){
  border-color:rgba(53,167,255,.35) !important;
}
.lab-project-card:nth-child(5),
.lab-project-card:nth-child(7){
  border-color:rgba(188,69,255,.34) !important;
}
.lab-project-card:nth-child(6){
  border-color:rgba(255,153,54,.38) !important;
}

.lab-cover{
  height:245px !important;
  padding:0 !important;
  background:
    linear-gradient(180deg,rgba(3,8,18,.10),rgba(3,8,18,.18)),
    var(--cover) center/cover no-repeat !important;
  border-bottom:1px solid rgba(255,255,255,.055);
}

.lab-cover::before,
.lab-cover::after,
.lab-cover-grid{
  display:none !important;
}

.lab-cover-icon{
  left:14px !important;
  top:14px !important;
  width:auto !important;
  min-width:38px !important;
  height:28px !important;
  padding:0 9px !important;
  border-radius:9px !important;
  background:rgba(5,12,25,.72) !important;
  backdrop-filter:blur(8px);
  border:1px solid rgba(142,115,255,.48) !important;
  font-size:10px !important;
}

.lab-cover-title{
  position:absolute !important;
  left:15px !important;
  right:15px !important;
  bottom:38px !important;
  padding:0 !important;
  font-size:15px !important;
  text-shadow:0 2px 14px rgba(0,0,0,.90);
}

.lab-cover-en{
  position:absolute !important;
  left:15px !important;
  right:15px !important;
  bottom:17px !important;
  margin:0 !important;
  color:#a8b6ca !important;
  text-shadow:0 2px 10px rgba(0,0,0,.9);
}

.lab-card-body{
  padding:15px 15px 14px !important;
}

.lab-card-body h3{
  font-size:13px !important;
  margin-bottom:8px !important;
}

.lab-card-body p{
  min-height:44px !important;
  color:#8fa2ba !important;
}

.lab-tags{
  min-height:50px;
}

.lab-tags span{
  padding:6px 8px !important;
  background:rgba(255,255,255,.035) !important;
  border-color:rgba(255,255,255,.075) !important;
}

.lab-open-btn{
  margin-top:auto;
  min-height:42px;
  font-size:10px !important;
  font-weight:600;
  color:white !important;
  border:none !important;
  background:linear-gradient(90deg,#6547ff,#d840ff) !important;
  box-shadow:0 0 20px rgba(112,75,255,.16);
}

.lab-project-card:nth-child(2) .lab-open-btn{
  color:#041310 !important;
  background:linear-gradient(90deg,#18d4c5,#31f0b5) !important;
}
.lab-project-card:nth-child(3) .lab-open-btn,
.lab-project-card:nth-child(4) .lab-open-btn{
  background:linear-gradient(90deg,#2589ff,#21c7ff) !important;
}
.lab-project-card:nth-child(6) .lab-open-btn{
  color:#1c0d00 !important;
  background:linear-gradient(90deg,#ff8c31,#ffbd4a) !important;
}

@media(min-width:1600px){
  .projects-strip{
    width:100% !important;
    min-width:100% !important;
    grid-auto-columns:minmax(0,1fr) !important;
  }
  .lab-project-card{
    width:auto !important;
  }
}

@media(max-width:620px){
  .lab-project-card{
    width:225px !important;
    min-height:445px !important;
  }
  .lab-cover{
    height:220px !important;
  }
}


/* ===================================================
   V72 — FIX: project cover images always visible
   Layout/architecture is unchanged.
   =================================================== */

.projects-lab .lab-cover{
  background-image:none !important;
  background-color:#08111d !important;
  background-position:center !important;
  background-size:cover !important;
  background-repeat:no-repeat !important;
}

.projects-lab .lab-project-card:nth-child(1) .lab-cover{
  background-image:url("../assets/cover_english_school.webp") !important;
}
.projects-lab .lab-project-card:nth-child(2) .lab-cover{
  background-image:url("../assets/cover_shpargalochka.webp") !important;
}
.projects-lab .lab-project-card:nth-child(3) .lab-cover{
  background-image:url("../assets/cover_voice_sales.webp") !important;
}
.projects-lab .lab-project-card:nth-child(4) .lab-cover{
  background-image:url("../assets/cover_document_monitor.webp") !important;
}
.projects-lab .lab-project-card:nth-child(5) .lab-cover{
  background-image:url("../assets/cover_sales_assistant.webp") !important;
}
.projects-lab .lab-project-card:nth-child(6) .lab-cover{
  background-image:url("../assets/cover_onboarding.webp") !important;
}
.projects-lab .lab-project-card:nth-child(7) .lab-cover{
  background-image:url("../assets/cover_virtual_sales.webp") !important;
}


/* ===================================================
   V73 — remove duplicated text/badges over project cover images
   =================================================== */
.projects-lab .lab-cover-icon,
.projects-lab .lab-cover-title,
.projects-lab .lab-cover-en{
  display:none !important;
}


/* =========================================================
   V80 FULL — consolidated agreed layout
   ========================================================= */

/* ---------- PROJECT TYPE LABELS ---------- */
.projects-lab .project-type{
  margin: 0 !important;
  font-size: 10px !important;
  line-height: 1.25 !important;
  letter-spacing: .08em !important;
  color: #7f93aa !important;
  text-transform: uppercase !important;
}

/* ---------- PROJECT PAGE: final order/colors/geometry ---------- */
@media (min-width:981px){
  .projects-lab{
    padding-top: 60px !important;
    padding-bottom: 22px !important;
  }

  .projects-lab .lab-heading{
    margin-bottom: 18px !important;
  }

  .projects-lab .lab-project-card{
    height: 548px !important;
    min-height: 548px !important;
    display:flex !important;
    flex-direction:column !important;
  }

  .projects-lab .lab-cover{
    height:210px !important;
    min-height:210px !important;
    flex:0 0 210px !important;
  }

  .projects-lab .lab-card-body{
    flex:1 1 auto !important;
    min-height:0 !important;
    display:grid !important;
    grid-template-rows:58px 28px 58px 52px 44px !important;
    row-gap:8px !important;
    padding:14px 16px !important;
    box-sizing:border-box !important;
  }

  .projects-lab .lab-card-body h3,
  .projects-lab .project-type,
  .projects-lab .lab-card-body p,
  .projects-lab .lab-tags,
  .projects-lab .lab-open-btn{
    margin:0 !important;
    min-height:0 !important;
  }

  .projects-lab .lab-card-body h3,
  .projects-lab .lab-card-body p{
    overflow:hidden !important;
  }

  .projects-lab .lab-tags{
    display:flex !important;
    flex-wrap:wrap !important;
    align-content:flex-start !important;
    align-items:flex-start !important;
    gap:6px !important;
  }

  .projects-lab .lab-open-btn{
    width:100% !important;
    height:44px !important;
    min-height:44px !important;
    align-self:end !important;
    transform:none !important;
  }

  /* 01 Shpargalochka — orange */
  .projects-lab .lab-project-card:nth-child(1){
    border-color:rgba(255,145,40,.92) !important;
    box-shadow:0 0 20px rgba(255,145,40,.10) !important;
  }
  .projects-lab .lab-project-card:nth-child(1) .lab-open-btn{
    background:linear-gradient(90deg,#ff8a2a,#ffb347) !important;
    color:#111 !important;
  }

  /* 02 English School — blue */
  .projects-lab .lab-project-card:nth-child(2){
    border-color:rgba(55,170,255,.85) !important;
    box-shadow:0 0 20px rgba(55,170,255,.08) !important;
  }
  .projects-lab .lab-project-card:nth-child(2) .lab-open-btn{
    background:linear-gradient(90deg,#3f7cff,#19d8ff) !important;
    color:#fff !important;
  }
}

/* ---------- HERO: show full head ---------- */
@media (min-width:981px){
  .hero-lab-photo{
    object-fit:cover !important;
    object-position:61% 8% !important;
    transform:translate(3.2%, -80px) scale(1.00) !important;
  }
}

/* ---------- ECOSYSTEM HEADER + CONTAINER ---------- */
#ecosystem{
  scroll-margin-top:84px !important;
}

@media (min-width:1051px){
  .ecosystem-radial-section{
    padding-top:26px !important;
    padding-bottom:18px !important;
  }

  .ecosystem-heading{
    width:calc(100vw - 128px) !important;
    max-width:1640px !important;
    margin:0 auto 14px !important;
    display:grid !important;
    grid-template-columns:minmax(0,1.05fr) minmax(360px,.95fr) !important;
    column-gap:70px !important;
    align-items:end !important;
    text-align:left !important;
  }

  .ecosystem-heading > div,
  .ecosystem-heading h2{
    text-align:left !important;
  }

  .ecosystem-heading > p{
    justify-self:end !important;
    max-width:520px !important;
    margin:0 0 6px !important;
    text-align:left !important;
  }

  .ecosystem-map{
    position:relative !important;
    width:calc(100vw - 128px) !important;
    max-width:1640px !important;
    height:calc(100vh - 310px) !important;
    min-height:470px !important;
    max-height:555px !important;
    margin:0 auto !important;
    overflow:hidden !important;
  }

  /* center photo */
  .eco-center{
    left:50% !important;
    top:50% !important;
    transform:translate(-50%,-50%) !important;
  }

  /* technology nodes: equal-radius ring */
  .eco-tech-node{
    width:118px !important;
    height:66px !important;
    margin:0 !important;
    transform:translate(-50%,-50%) !important;
  }

  .eco-t1{ left:calc(50% - 160px) !important; top:calc(50% - 128px) !important; }
  .eco-t2{ left:calc(50% - 200px) !important; top:calc(50% + 46px) !important; }
  .eco-t3{ left:calc(50% - 90px)  !important; top:calc(50% + 184px) !important; }
  .eco-t4{ left:50% !important; top:calc(50% - 205px) !important; }
  .eco-t5{ left:calc(50% + 160px) !important; top:calc(50% - 128px) !important; }
  .eco-t6{ left:calc(50% + 200px) !important; top:calc(50% + 46px) !important; }
  .eco-t7{ left:calc(50% + 90px)  !important; top:calc(50% + 184px) !important; }

  /* project cards: aligned columns */
  .ecosystem-map .eco-project{
    width:255px !important;
    min-height:90px !important;
    padding:11px 12px !important;
    box-sizing:border-box !important;
    transform:none !important;
  }

  .eco-card-1{ left:1.6% !important; top:6% !important; }
  .eco-card-2{ left:1.6% !important; top:27% !important; }
  .eco-card-3{ left:1.6% !important; top:48% !important; }
  .eco-card-4{ left:1.6% !important; top:69% !important; }

  .eco-card-5{ right:1.6% !important; top:8% !important; }
  .eco-card-6{ right:1.6% !important; top:38% !important; }
  .eco-card-7{ right:1.6% !important; top:68% !important; }

  .eco-reset{
    left:50% !important;
    right:auto !important;
    bottom:12px !important;
    transform:translateX(-50%) !important;
  }
}

@media (min-width:1051px) and (max-height:820px){
  .ecosystem-heading{
    margin-bottom:10px !important;
  }

  .ecosystem-map{
    height:calc(100vh - 275px) !important;
    min-height:440px !important;
    max-height:515px !important;
  }

  .eco-t1{ left:calc(50% - 145px) !important; top:calc(50% - 114px) !important; }
  .eco-t2{ left:calc(50% - 180px) !important; top:calc(50% + 40px) !important; }
  .eco-t3{ left:calc(50% - 82px)  !important; top:calc(50% + 164px) !important; }
  .eco-t4{ left:50% !important; top:calc(50% - 184px) !important; }
  .eco-t5{ left:calc(50% + 145px) !important; top:calc(50% - 114px) !important; }
  .eco-t6{ left:calc(50% + 180px) !important; top:calc(50% + 40px) !important; }
  .eco-t7{ left:calc(50% + 82px)  !important; top:calc(50% + 164px) !important; }
}

/* mobile */
@media (max-width:980px){
  .projects-lab .lab-project-card{
    height:auto !important;
    min-height:445px !important;
  }

  .projects-lab .lab-card-body{
    display:flex !important;
    flex-direction:column !important;
  }

  .projects-lab .lab-open-btn{
    margin-top:auto !important;
  }
}


/* =========================================================
   V81 — одинаковые заголовки + увеличенные овалы экосистемы
   ========================================================= */

@media (min-width:1051px){

  /* "Моя AI-экосистема" = размеру "Проекты из моей AI Lab" */
  #ecosystem .ecosystem-heading h2,
  #projects .lab-heading h2{
    font-size: clamp(38px, 4vw, 64px) !important;
    line-height: 1.03 !important;
    letter-spacing: -.04em !important;
    margin: 0 !important;
  }

  /* Верхняя подпись и отступ до большого заголовка одинаковые */
  #ecosystem .ecosystem-heading .eyebrow,
  #projects .lab-heading .eyebrow{
    font-size: 12px !important;
    line-height: 1.2 !important;
    letter-spacing: .20em !important;
    margin: 0 0 18px 0 !important;
  }

  /* Овалы крупнее, текст всегда внутри */
  #ecosystem .eco-tech-node{
    width: 150px !important;
    height: 84px !important;
    min-width: 150px !important;
    min-height: 84px !important;
    padding: 10px 14px !important;
    box-sizing: border-box !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;

    text-align: center !important;
    white-space: normal !important;
    overflow: hidden !important;
    line-height: 1.12 !important;
  }

  #ecosystem .eco-tech-node b{
    display: block !important;
    width: 100% !important;
    max-width: 126px !important;
    margin: 0 0 5px 0 !important;

    font-size: 11px !important;
    line-height: 1.12 !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
  }

  #ecosystem .eco-tech-node small{
    display: block !important;
    width: 100% !important;
    max-width: 126px !important;

    font-size: 7px !important;
    line-height: 1.15 !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
  }

  /*
     Семь направлений расположены равномерно по окружности.
     Все точки имеют одинаковый радиус 220 px от центра фотографии.
  */
  #ecosystem .eco-t1{
    left: 50% !important;
    top: calc(50% - 220px) !important;
  }

  #ecosystem .eco-t2{
    left: calc(50% + 172px) !important;
    top: calc(50% - 137px) !important;
  }

  #ecosystem .eco-t3{
    left: calc(50% + 214px) !important;
    top: calc(50% + 49px) !important;
  }

  #ecosystem .eco-t4{
    left: calc(50% + 95px) !important;
    top: calc(50% + 198px) !important;
  }

  #ecosystem .eco-t5{
    left: calc(50% - 95px) !important;
    top: calc(50% + 198px) !important;
  }

  #ecosystem .eco-t6{
    left: calc(50% - 214px) !important;
    top: calc(50% + 49px) !important;
  }

  #ecosystem .eco-t7{
    left: calc(50% - 172px) !important;
    top: calc(50% - 137px) !important;
  }
}

/* На невысоких экранах сохраняем ровную окружность, но чуть уменьшаем радиус */
@media (min-width:1051px) and (max-height:820px){

  #ecosystem .eco-tech-node{
    width: 144px !important;
    height: 80px !important;
    min-width: 144px !important;
    min-height: 80px !important;
  }

  #ecosystem .eco-t1{
    left: 50% !important;
    top: calc(50% - 198px) !important;
  }

  #ecosystem .eco-t2{
    left: calc(50% + 155px) !important;
    top: calc(50% - 123px) !important;
  }

  #ecosystem .eco-t3{
    left: calc(50% + 193px) !important;
    top: calc(50% + 44px) !important;
  }

  #ecosystem .eco-t4{
    left: calc(50% + 86px) !important;
    top: calc(50% + 178px) !important;
  }

  #ecosystem .eco-t5{
    left: calc(50% - 86px) !important;
    top: calc(50% + 178px) !important;
  }

  #ecosystem .eco-t6{
    left: calc(50% - 193px) !important;
    top: calc(50% + 44px) !important;
  }

  #ecosystem .eco-t7{
    left: calc(50% - 155px) !important;
    top: calc(50% - 123px) !important;
  }
}


/* =========================================================
   V83 — electrical discharges for AI ecosystem
   ========================================================= */

#ecosystem .eco-links path{
  stroke:rgba(92,142,255,.14);
  stroke-width:1.2;
  stroke-dasharray:4 12;
  filter:drop-shadow(0 0 3px rgba(58,123,255,.10));
}

#ecosystem .eco-electric-layer{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:7;
  pointer-events:none;
  overflow:visible;
}

#ecosystem .eco-electric-beam{
  fill:none;
  stroke:rgba(123,223,255,.95);
  stroke-linecap:round;
  stroke-linejoin:round;
  opacity:0;
  filter:
    drop-shadow(0 0 4px rgba(126,232,255,.95))
    drop-shadow(0 0 10px rgba(87,173,255,.55))
    drop-shadow(0 0 22px rgba(129,98,255,.26));
}

#ecosystem .eco-electric-beam.idle{
  stroke-width:1.4;
}

#ecosystem .eco-electric-beam.primary{
  stroke-width:2.4;
}

#ecosystem .eco-electric-beam.branch{
  stroke-width:2.0;
}

#ecosystem .eco-electric-dot{
  fill:#f4fdff;
  filter:
    drop-shadow(0 0 5px #9deeff)
    drop-shadow(0 0 10px #55d4ff)
    drop-shadow(0 0 18px rgba(132,106,255,.55));
}

#ecosystem .eco-electric-dot.core{
  r:4.6;
}

#ecosystem .eco-electric-dot.trail{
  opacity:.72;
  r:2.8;
}

#ecosystem .eco-tech-node.electric-hit,
#ecosystem .eco-tech-node.active.electric-hit{
  border-color:rgba(154,236,255,.92) !important;
  box-shadow:
    0 0 0 1px rgba(170,238,255,.18) inset,
    0 0 18px rgba(104,213,255,.56),
    0 0 36px rgba(118,104,255,.24) !important;
}

#ecosystem .ecosystem-map .eco-project.electric-hit,
#ecosystem .ecosystem-map .eco-project.hit.electric-hit{
  border-color:rgba(133,229,255,.88) !important;
  box-shadow:
    0 0 0 1px rgba(154,235,255,.12) inset,
    0 0 16px rgba(104,213,255,.28),
    0 0 34px rgba(91,97,255,.14) !important;
}

#ecosystem .eco-center.electric-hit .eco-center-photo{
  box-shadow:
    0 0 0 1px rgba(156,234,255,.24),
    0 0 18px rgba(103,210,255,.42),
    0 0 38px rgba(109,94,255,.18);
}

#ecosystem .eco-center.electric-hit .eco-center-ring.ring-a{
  border-color:rgba(121,225,255,.46);
  box-shadow:0 0 26px rgba(110,201,255,.22);
}

#ecosystem .eco-center.electric-hit .eco-center-ring.ring-b{
  border-color:rgba(115,182,255,.28);
}

@media (prefers-reduced-motion: reduce){
  #ecosystem .eco-electric-layer{display:none;}
}


/* =========================================================
   V84 — electric network + grid background
   ========================================================= */

#ecosystem .ecosystem-map{
  background:
    radial-gradient(circle at 50% 48%, rgba(46,106,255,.12), transparent 24%),
    linear-gradient(rgba(52,116,194,.075) 1px, transparent 1px),
    linear-gradient(90deg, rgba(52,116,194,.075) 1px, transparent 1px),
    linear-gradient(180deg, rgba(5,10,17,.97), rgba(4,8,14,.99)) !important;
  background-size:
    auto,
    44px 44px,
    44px 44px,
    auto !important;
}

/* Remove the old dotted/star wallpaper */
#ecosystem .ecosystem-map::before{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  pointer-events:none !important;
  opacity:.42 !important;
  background:
    linear-gradient(rgba(52,116,194,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(52,116,194,.055) 1px, transparent 1px) !important;
  background-size:22px 22px !important;
  mask-image:radial-gradient(circle at center, #000 30%, rgba(0,0,0,.55) 72%, transparent 100%) !important;
}

/* Hide the old dotted connector strokes; V84 draws the network above them */
#ecosystem .eco-links{
  opacity:.12 !important;
}
#ecosystem .eco-links path{
  stroke:rgba(82,140,255,.12) !important;
  stroke-dasharray:none !important;
  stroke-width:1px !important;
}

#ecosystem .eco-electric-layer-v84{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:3;
  pointer-events:none;
  overflow:visible;
}

/* Persistent electrical wires */
#ecosystem .eco-electric-wire{
  fill:none;
  stroke-linecap:round;
  stroke-linejoin:round;
}

#ecosystem .eco-electric-wire.core-wire{
  stroke:rgba(73,161,255,.27);
  stroke-width:1.15;
}

#ecosystem .eco-electric-wire.branch-wire{
  stroke:rgba(75,150,235,.18);
  stroke-width:.95;
}

#ecosystem .eco-electric-wire.temp-wire{
  stroke:rgba(95,201,255,.30);
  stroke-width:1.25;
}

/* The actual moving discharge */
#ecosystem .eco-electric-pulse{
  fill:none;
  stroke:#80e9ff;
  stroke-width:3.0;
  stroke-linecap:round;
  stroke-linejoin:round;
  opacity:0;
}

#ecosystem .eco-electric-pulse.hot{
  stroke:#d4f8ff;
  stroke-width:4.0;
}

/* Keep technology nodes and cards above the electric layer */
#ecosystem .eco-tech-node{
  z-index:5 !important;
}
#ecosystem .ecosystem-map .eco-project{
  z-index:5 !important;
}
#ecosystem .eco-center{
  z-index:6 !important;
}

/* Electric hit effect */
#ecosystem .eco-tech-node.electric-hit{
  border-color:rgba(141,234,255,.96) !important;
  box-shadow:
    0 0 0 1px rgba(151,235,255,.15) inset,
    0 0 18px rgba(79,206,255,.70),
    0 0 40px rgba(89,92,255,.30) !important;
}

#ecosystem .ecosystem-map .eco-project.electric-hit{
  border-color:rgba(122,225,255,.92) !important;
  box-shadow:
    0 0 0 1px rgba(151,235,255,.12) inset,
    0 0 18px rgba(69,196,255,.52),
    0 0 38px rgba(88,85,255,.20) !important;
}

#ecosystem .eco-center.electric-hit .eco-center-photo{
  box-shadow:
    0 0 0 2px rgba(158,235,255,.20),
    0 0 22px rgba(78,203,255,.62),
    0 0 48px rgba(101,91,255,.30) !important;
}


/* =========================================================
   V85 — approved neural network background + AI/sci-fi skill cards
   ========================================================= */

/* --- Ecosystem background: approved neural network texture --- */
#ecosystem .ecosystem-map{
  position:relative !important;
  isolation:isolate !important;
  background:
    linear-gradient(180deg, rgba(3,8,16,.56), rgba(3,8,16,.70)),
    url("../assets/ecosystem_network_bg.webp") center center / cover no-repeat !important;
}

#ecosystem .ecosystem-map::before{
  display:none !important;
}

/* Old straight/dotted connector lines are almost invisible at rest */
#ecosystem .eco-links{
  opacity:.035 !important;
}
#ecosystem .eco-links path{
  stroke:rgba(83,149,224,.06) !important;
  stroke-width:.75 !important;
  stroke-dasharray:none !important;
}

/* Persistent JS wires are nearly invisible; moving discharge stays bright */
#ecosystem .eco-electric-wire.core-wire{
  stroke:rgba(73,161,255,.045) !important;
  stroke-width:.85 !important;
}
#ecosystem .eco-electric-wire.branch-wire{
  stroke:rgba(75,150,235,.028) !important;
  stroke-width:.70 !important;
}
#ecosystem .eco-electric-wire.temp-wire{
  stroke:rgba(105,215,255,.18) !important;
  stroke-width:1.05 !important;
}

/* =========================================================
   TECHNOLOGIES — CLEAN AI / SCI-FI MOVING NEON BORDER
   One implementation only. Legacy V85/V86/V87/V88 skill
   border experiments have been removed.
   ========================================================= */

.skills-grid .skill-card{
  position:relative !important;
  isolation:isolate !important;
  overflow:visible !important;

  padding:28px !important;
  border:1px solid rgba(67,135,205,.16) !important;
  border-radius:20px !important;

  background:
    radial-gradient(circle at 18% 0%, rgba(45,122,255,.045), transparent 34%),
    linear-gradient(180deg, #0b192d 0%, #081422 100%) !important;

  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.006),
    0 16px 42px rgba(0,0,0,.28) !important;

  transition:
    transform .28s ease,
    box-shadow .28s ease,
    border-color .28s ease !important;
}

/* A thin masked border. The conic gradient rotates, so the bright
   cyan/violet segment really travels around the full perimeter. */
.skills-grid .skill-card::before{
  content:"" !important;
  position:absolute !important;
  inset:-2px !important;
  padding:2px !important;
  border-radius:22px !important;
  pointer-events:none !important;
  z-index:2 !important;

  background:conic-gradient(
    from 0deg,
    transparent 0deg 286deg,
    rgba(57,170,255,.08) 298deg,
    #58e3ff 310deg,
    #e5fcff 318deg,
    #48beff 326deg,
    #756cff 336deg,
    #d653ff 346deg,
    rgba(108,86,255,.30) 354deg,
    transparent 360deg
  ) !important;

  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0) !important;
  -webkit-mask-composite:xor !important;
  mask-composite:exclude !important;

  opacity:.95 !important;
  filter:
    drop-shadow(0 0 4px rgba(111,235,255,.88))
    drop-shadow(0 0 10px rgba(55,175,255,.48))
    drop-shadow(0 0 15px rgba(184,72,255,.22)) !important;

  transform:rotate(0deg) !important;
  transform-origin:center center !important;
  animation:skillPerimeterOrbit 4.4s linear infinite !important;
}

/* A faint static edge underneath the runner */
.skills-grid .skill-card::after{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  border-radius:inherit !important;
  pointer-events:none !important;
  z-index:1 !important;
  border:1px solid rgba(73,167,255,.07) !important;
  box-shadow:
    inset 0 0 14px rgba(55,143,255,.012),
    0 0 12px rgba(56,146,255,.025) !important;
}

.skills-grid .skill-card > *{
  position:relative !important;
  z-index:4 !important;
}

/* Different phases: cards never flash in sync */
.skills-grid .skill-card:nth-child(1)::before{animation-delay:0s !important}
.skills-grid .skill-card:nth-child(2)::before{animation-delay:-.73s !important}
.skills-grid .skill-card:nth-child(3)::before{animation-delay:-1.46s !important}
.skills-grid .skill-card:nth-child(4)::before{animation-delay:-2.19s !important}
.skills-grid .skill-card:nth-child(5)::before{animation-delay:-2.92s !important}
.skills-grid .skill-card:nth-child(6)::before{animation-delay:-3.65s !important}

.skills-grid .skill-card:hover{
  transform:translateY(-4px) !important;
  border-color:rgba(91,194,255,.28) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.01),
    0 20px 50px rgba(0,0,0,.34),
    0 0 18px rgba(58,194,255,.10),
    0 0 30px rgba(131,80,255,.07) !important;
}

.skills-grid .skill-card:hover::before{
  opacity:1 !important;
  animation-duration:2.3s !important;
  filter:
    drop-shadow(0 0 6px rgba(160,247,255,1))
    drop-shadow(0 0 13px rgba(63,193,255,.78))
    drop-shadow(0 0 22px rgba(205,76,255,.34)) !important;
}

.skills-grid .skill-card > span:first-child{
  color:rgba(153,214,255,.82) !important;
  text-shadow:0 0 9px rgba(69,176,255,.16) !important;
}

@keyframes skillPerimeterOrbit{
  from{transform:rotate(0deg) !important}
  to{transform:rotate(360deg) !important}
}

/* The site had an older global reduced-motion rule. For this decorative
   portfolio effect we keep a slower border runner instead of freezing it. */
@media (prefers-reduced-motion:reduce){
  .skills-grid .skill-card::before{
    animation:skillPerimeterOrbit 7s linear infinite !important;
  }
}



/* =========================================================
   V90 — reference-style live neon frame
   ========================================================= */

#skills .skill-card{
  position:relative !important;
  isolation:isolate !important;
  overflow:visible !important;
  border:0 !important;
  border-radius:20px !important;
  background:
    radial-gradient(circle at 18% 0%, rgba(31,113,255,.035), transparent 34%),
    linear-gradient(180deg,#0b192d 0%,#081422 100%) !important;
  box-shadow:
    0 18px 46px rgba(0,0,0,.30),
    inset 0 0 0 1px rgba(255,255,255,.008) !important;
  transition:transform .24s ease, box-shadow .24s ease !important;
}

#skills .skill-card::before,
#skills .skill-card::after{
  content:none !important;
  display:none !important;
  animation:none !important;
}

#skills .skill-neon-frame{
  position:absolute !important;
  inset:-2px !important;
  width:calc(100% + 4px) !important;
  height:calc(100% + 4px) !important;
  pointer-events:none !important;
  z-index:6 !important;
  overflow:visible !important;
}

#skills .skill-neon-base{
  fill:none;
  stroke-width:1.35;
  opacity:.68;
  vector-effect:non-scaling-stroke;
  filter:
    drop-shadow(0 0 3px rgba(56,177,255,.44))
    drop-shadow(0 0 8px rgba(112,78,255,.22));
}

#skills .skill-neon-runner{
  fill:none;
  stroke-width:2.5;
  stroke-linecap:round;
  vector-effect:non-scaling-stroke;
  opacity:1;
  filter:
    drop-shadow(0 0 4px rgba(210,252,255,1))
    drop-shadow(0 0 9px rgba(64,196,255,1))
    drop-shadow(0 0 16px rgba(164,73,255,.52));
}

#skills .skill-neon-spark{
  fill:none;
  stroke-width:3.4;
  stroke-linecap:round;
  vector-effect:non-scaling-stroke;
  opacity:1;
  filter:
    drop-shadow(0 0 5px rgba(235,255,255,1))
    drop-shadow(0 0 11px rgba(74,216,255,1))
    drop-shadow(0 0 20px rgba(205,74,255,.58));
}

#skills .skill-neon-spark2{
  fill:none;
  stroke-width:2.7;
  stroke-linecap:round;
  vector-effect:non-scaling-stroke;
  opacity:.92;
  filter:
    drop-shadow(0 0 4px rgba(160,245,255,1))
    drop-shadow(0 0 12px rgba(117,88,255,.72));
}

#skills .skill-card > *:not(.skill-neon-frame){
  position:relative !important;
  z-index:8 !important;
}

#skills .skill-card:hover{
  transform:translateY(-4px) !important;
  box-shadow:
    0 22px 58px rgba(0,0,0,.36),
    0 0 24px rgba(48,183,255,.12),
    0 0 42px rgba(132,70,255,.09) !important;
}

#skills .skill-card:hover .skill-neon-base{
  opacity:.9;
  stroke-width:1.6;
}

#skills .skill-card:hover .skill-neon-runner{
  stroke-width:3.0;
}

/* =========================================================
   FIX — hero/#home anchor-scroll vs sticky header mismatch.
   Прямое открытие /, клик «Главная» (#home) и /#home теперь
   дают одинаковое положение hero — сама фотография, её
   object-position и композиция первого экрана не меняются.
   ========================================================= */
#home{
  scroll-margin-top:76px;
}

/* =========================================================
   Поднять первый экран (desktop only, ~35px).
   scroll-margin-top:76px выше НЕ создаёт отступа сам по себе —
   он влияет только на точку остановки скролла при переходе по
   якорю (и именно поэтому direct-load, клик «Главная» и /#home
   совпадают). Реальный визуальный отступ текста задаёт
   .ai-lab-hero .hero-copy — у неё display:flex;
   flex-direction:column; justify-content:center (база, строка
   ~5496) и min-height:760px !important (строка ~5918) — то есть
   контент ЦЕНТРИРУЕТСЯ внутри 760px-блока. Поэтому простое
   уменьшение padding-top поднимало текст только на ПОЛОВИНУ
   изменения (centering гасит половину сдвига) — это подтверждено
   и исправлено здесь: justify-content:flex-start убирает
   центрирование (контент прижимается к верху блока, сразу под
   padding-top), после чего padding-top влияет на позицию текста
   1:1 (эмпирически проверено: 40px разницы в padding-top = 40px
   разницы в позиции h1, без гашения). padding-top:34px подобран
   так, чтобы h1 поднялся ещё на ~35px относительно предыдущего
   состояния (padding-top:10px; justify-content:center).
   Фото (.hero-lab-photo/.hero-lab-scene), object-position,
   масштаб фото и вся desktop-композиция (ширины колонок и т.д.)
   не затронуты — они привязаны к .ai-lab-hero, а не к
   .hero-copy. Mobile/tablet (<=1100px) не затронуты вообще.
   ========================================================= */
@media(min-width:1101px){
  .ai-lab-hero .hero-copy{
    justify-content:flex-start;
    padding-top:34px !important;
  }
}

@media(max-width:760px){
  /* Высота .site-header на мобильном не меняется (проверено —
     ни одно из переопределений .site-header в этом файле не
     трогает height), поэтому значение то же самое. Оставлено
     отдельным правилом, чтобы его было легко поменять, если
     высота хедера когда-нибудь станет другой именно на mobile. */
  #home{
    scroll-margin-top:76px;
  }
}


/* =========================================================
   MOBILE AI-ECOSYSTEM LAYOUT (<=760px)
   Заменяет desktop-радиальную карту (.ecosystem-map) на две
   компактные колонки: технологии слева (~42%), проекты справа
   (~58%). Desktop/tablet (>760px) этот блок не затрагивает —
   там продолжает работать существующая радиальная карта и
   существующий @media(max-width:1050px) промежуточный layout.
   Фото по центру карты убрано, оставлено маленьким кругом
   сверху. Линии (.eco-links), кольца (.eco-center-ring) уже
   скрыты существующим @media(max-width:1050px) — здесь
   дополнительно скрыт JS-слой "молний" (.eco-electric-layer-v84).
   Подсветка связанных проектов по клику на технологию продолжает
   работать как есть (filterEco() в app.js не менялся).
   ========================================================= */
@media(max-width:760px){
  .ecosystem-map{
    display:grid !important;
    grid-template-columns:42% 58% !important;
    column-gap:8px !important;
    row-gap:8px !important;
    align-items:start !important;
    justify-items:stretch !important;
    height:auto !important;
    min-height:0 !important;
    padding:14px !important;
    border-radius:22px !important;
  }

  /* "молнии" — JS-анимированный SVG-слой поверх карты (V84) —
     на mobile выключаем визуально; сам JS продолжает работать
     в фоне (клик по технологии по-прежнему подсвечивает проекты
     через filterEco()), но рисуемый слой скрыт */
  .eco-electric-layer-v84,
  .eco-electric-layer{
    display:none !important;
  }

  /* Заголовки колонок — чистый CSS (::before/::after), без
     изменения HTML. .ecosystem-map::before в desktop-стилях
     уже выключен через #ecosystem .ecosystem-map::before
     (display:none !important, см. V85 выше) — тот селектор
     специфичнее простого .ecosystem-map::before, поэтому здесь
     используется тот же префикс #ecosystem, иначе правило ниже
     проигрывает по специфичности несмотря на более поздний
     порядок в файле. */
  #ecosystem .ecosystem-map::before,
  #ecosystem .ecosystem-map::after{
    display:block !important;
    position:static !important;
    inset:auto !important;
    background:none !important;
    grid-row:2 !important;
    font-size:10px !important;
    font-weight:700;
    letter-spacing:.14em !important;
    text-transform:uppercase !important;
    color:#7f94ad !important;
    padding:4px 2px 0 !important;
    opacity:1 !important;
  }
  #ecosystem .ecosystem-map::before{
    content:"Технологии" !important;
    grid-column:1 !important;
  }
  #ecosystem .ecosystem-map::after{
    content:"Проекты" !important;
    grid-column:2 !important;
  }

  /* Центральное фото: маленький круг сверху, не по центру карты */
  .eco-center{
    grid-column:1 / -1 !important;
    grid-row:1 !important;
    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
    justify-content:center !important;
    gap:10px !important;
    padding:0 0 4px !important;
    width:100% !important;
  }
  .eco-center-photo{
    width:44px !important;
    height:44px !important;
    margin:0 !important;
    border-width:2px !important;
    box-shadow:0 0 18px rgba(65,122,255,.28) !important;
  }
  .eco-center span{
    display:none !important;
  }
  .eco-center strong{
    font-size:13px !important;
    margin:0 !important;
  }

  /* Технологии — компактный вертикальный список, колонка 1 */
  .eco-tech-node{
    grid-column:1 !important;
    width:100% !important;
    height:auto !important;
    min-height:0 !important;
    border-radius:12px !important;
    padding:8px 9px !important;
    text-align:left !important;
    display:block !important;
  }
  .eco-tech-node b{
    font-size:10px !important;
    line-height:1.15 !important;
    margin-bottom:2px !important;
  }
  .eco-tech-node small{
    font-size:7px !important;
    line-height:1.1 !important;
  }
  .eco-t1{grid-row:3 !important}
  .eco-t2{grid-row:4 !important}
  .eco-t3{grid-row:5 !important}
  .eco-t4{grid-row:6 !important}
  .eco-t5{grid-row:7 !important}
  .eco-t6{grid-row:8 !important}
  .eco-t7{grid-row:9 !important}

  /* Проекты — компактный вертикальный список, колонка 2.
     Показываем только: название, короткий тип, одна строка
     описания (остальной текст обрезается многоточием). */
  .ecosystem-map .eco-project{
    grid-column:2 !important;
    width:100% !important;
    min-height:0 !important;
    padding:9px 10px !important;
    border-radius:13px !important;
  }
  .eco-card-icon{
    width:24px !important;
    height:24px !important;
    font-size:8px !important;
    border-radius:8px !important;
  }
  .ecosystem-map .eco-project strong{
    font-size:10px !important;
    line-height:1.25 !important;
  }
  .ecosystem-map .eco-project small{
    font-size:7px !important;
  }
  .ecosystem-map .eco-project p{
    margin:6px 0 0 !important;
    font-size:8px !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }
  .eco-card-1{grid-row:3 !important}
  .eco-card-2{grid-row:4 !important}
  .eco-card-3{grid-row:5 !important}
  .eco-card-4{grid-row:6 !important}
  .eco-card-5{grid-row:7 !important}
  .eco-card-6{grid-row:8 !important}
  .eco-card-7{grid-row:9 !important}

  /* «Все проекты» — центрированная кнопка под обоими списками */
  .eco-reset{
    grid-column:1 / -1 !important;
    grid-row:10 !important;
    width:auto !important;
    justify-self:center !important;
    margin:6px 0 0 !important;
  }
}


#skills .skill-card > span:first-child{
  color:rgba(157,218,255,.86) !important;
  text-shadow:0 0 8px rgba(72,180,255,.17) !important;
}

@media (min-width:981px){
  #about{
    padding-top:200px !important;
    padding-bottom:200px !important;
  }
}


/* Portfolio travel demo card */
.projects-lab .travel-cover {background: #fff5ed !important; overflow: hidden;}
.projects-lab .travel-cover img {display:block;width:100%;height:100%;object-fit:cover;object-position:top;}
.projects-lab .travel-project-card .lab-card-body p {font-size:14px;line-height:1.45;}
.projects-lab .travel-project-card .lab-open-btn {display:flex;align-items:center;justify-content:center;text-decoration:none;}
.projects-lab .travel-project-card .lab-open-btn:focus-visible {outline:3px solid #ffb88d;outline-offset:4px;}

/* Embedded travel demo inside existing project modal */
.embedded-demo-modal .modal-panel {width:min(1400px,96vw);max-height:94vh;margin:3vh auto;padding:18px;}
.embedded-demo-toolbar {display:flex;align-items:center;gap:18px;padding:0 46px 12px 0;}
.embedded-demo-toolbar .button {padding:10px 16px;}
.embedded-demo-frame {display:block;width:100%;height:calc(88vh - 74px);min-height:320px;border:0;border-radius:12px;background:#fff5ed;}
@media(max-width:600px){.embedded-demo-modal .modal-panel{width:98vw;padding:8px;margin:1vh auto;max-height:98vh;}.embedded-demo-toolbar{gap:8px;font-size:13px;}.embedded-demo-frame{height:calc(94vh - 64px);}}

/* New portfolio covers share the original gallery treatment */
.projects-lab .travel-cover,.projects-lab .benefits-cover{background:#08111d !important;overflow:hidden;}
.projects-lab .travel-cover img,.projects-lab .benefits-cover img{display:block;width:100%;height:100%;object-fit:cover;object-position:center;}
.projects-lab .benefits-project-card .lab-card-body p{font-size:14px;line-height:1.45;}

/* Approved product showcase covers: keyed by project, not card order. */
.projects-lab [data-project-open="shpargalochka"] .lab-cover{background-image:url("../assets/cover_shpargalochka.webp") !important;background-position:center !important;}
.projects-lab [data-project-open="englishschool"] .lab-cover{background-image:url("../assets/cover_english_school.webp") !important;background-position:center !important;}
.projects-lab [data-project-open="voice"] .lab-cover{background-image:url("../assets/cover_voice_sales.webp") !important;background-position:center !important;}
.projects-lab [data-project-open="anc"] .lab-cover{background-image:url("../assets/cover_document_monitor.webp") !important;background-position:center !important;}
.projects-lab [data-project-open="sales"] .lab-cover{background-image:url("../assets/cover_sales_assistant.webp") !important;background-position:center !important;}
.projects-lab [data-project-open="onboard"] .lab-cover{background-image:url("../assets/cover_onboarding.webp") !important;background-position:center !important;}
.projects-lab [data-project-open="virtualsales"] .lab-cover{background-image:url("../assets/cover_virtual_sales.webp") !important;background-position:center !important;}
.projects-lab [data-project-open="marshrut"] .lab-cover{background-image:url("../assets/cover_marshrut.webp") !important;background-position:center !important;}
.projects-lab [data-project-open="benefits"] .lab-cover{background-image:url("../assets/cover_benefits.webp") !important;background-position:center !important;}
.projects-lab .travel-cover img,.projects-lab .benefits-cover img{object-position:center;}

/* Circular project selection. Scoped to the portfolio gallery. */
.projects-lab .carousel-wrap { overflow:clip; padding:16px 0 24px; width:100%; }
.projects-lab .project-carousel { position:relative; display:block!important; width:100%!important; min-width:0!important; height:560px; padding:0!important; perspective:1400px; touch-action:pan-y; }
.projects-lab .project-carousel .lab-project-card { position:absolute; left:50%; top:8px; width:310px!important; height:540px!important; min-height:540px!important; margin-left:-155px; transform:translateX(calc(var(--offset) * 225px)) translateZ(calc(var(--distance) * -150px)) rotateY(calc(var(--offset) * -12deg)); opacity:calc(1 - var(--distance) * .18); transition:transform .95s cubic-bezier(.22,.61,.36,1),opacity .95s ease,box-shadow .65s ease; pointer-events:auto; }
.projects-lab .project-carousel .lab-project-card[data-offset="4"], .projects-lab .project-carousel .lab-project-card[data-offset="-4"] { visibility:hidden; pointer-events:none; }
.projects-lab .project-carousel .lab-project-card.is-current { box-shadow:0 18px 50px #0008,0 0 24px #779cff20; }
.projects-lab .project-carousel .lab-project-card:focus-visible { outline:3px solid #c9dcff; outline-offset:4px; }
.projects-lab .project-carousel .lab-card-body { grid-template-rows:58px 32px 64px 48px 44px!important; padding:16px 20px!important; gap:8px!important; }
.projects-lab .carousel-controls { display:flex; align-items:center; justify-content:center; gap:24px; margin-top:14px; color:#b5c6db; }
.projects-lab .carousel-controls button { width:48px; height:48px; border-radius:50%; border:1px solid #ffffff30; color:#edf4ff; background:#101c2c; font-size:24px; cursor:pointer; }
.projects-lab .carousel-controls button:hover { background:#20344c; }
.projects-lab .carousel-controls button:focus-visible { outline:3px solid #c9dcff; outline-offset:3px; }
@media(max-width:620px) {
 .projects-lab .project-carousel { height:552px; perspective:900px; }
 .projects-lab .project-carousel .lab-project-card { width:280px!important; margin-left:-140px; transform:translateX(calc(var(--offset) * 205px)) translateZ(calc(var(--distance) * -180px)) rotateY(calc(var(--offset) * -14deg)); }
 .projects-lab .project-carousel .lab-cover { height:210px!important; min-height:210px!important; flex-basis:210px!important; }
 .projects-lab .project-carousel .lab-card-body { padding:14px 16px!important; }
}
@media(prefers-reduced-motion:reduce) { .projects-lab .project-carousel .lab-project-card { transition:none!important; } }
.projects-lab .project-carousel .lab-project-card { opacity:1; filter:brightness(calc(1 - var(--distance) * .13)); }

/* Give each cover its own space; only immediate neighbours are visible. */
.projects-lab .project-carousel .lab-project-card {
 transform:translateX(calc(var(--offset) * 350px)) translateY(calc(var(--distance) * 24px)) scale(calc(1 - var(--distance) * .12));
 filter:none; border-color:#ffffff24!important;
 background:#08111d!important;
}
.projects-lab .project-carousel .lab-project-card:not([data-offset="0"]):not([data-offset="1"]):not([data-offset="-1"]) { visibility:hidden; pointer-events:none; }
.projects-lab .project-carousel .lab-project-card .lab-cover { transition:filter .85s cubic-bezier(.22,.61,.36,1); }
.projects-lab .project-carousel .lab-project-card:not(.is-current) .lab-cover { filter:saturate(.25) brightness(.65); }
.projects-lab .project-carousel .lab-project-card .lab-open-btn { background:#18283c!important; color:#e7efff!important; box-shadow:none!important; }
.projects-lab .project-carousel .lab-project-card.is-current .lab-open-btn { background:linear-gradient(100deg,#8cb8df,#d5bb91)!important; color:#101824!important; }
@media(max-width:620px) {
 .projects-lab .project-carousel .lab-project-card { transform:translateX(calc(var(--offset) * 300px)) translateY(calc(var(--distance) * 24px)) scale(calc(1 - var(--distance) * .12)); }
}
@media(prefers-reduced-motion:reduce) { .projects-lab .project-carousel .lab-cover { transition:none!important; } }

.projects-lab .carousel-wrap .carousel-controls { margin:0 0 20px; }
/* Bring the project cards closer to the heading on desktop. */
@media (min-width: 621px) {
 .projects-lab .lab-heading { margin-bottom:8px!important; }
 .projects-lab .carousel-wrap { padding-top:0; }
 .projects-lab .carousel-wrap .carousel-controls { margin-bottom:8px; }
 .projects-lab .project-carousel .lab-project-card { top:0; }
}

.projects-lab [data-project-open="calorie"] .lab-cover{background-image:url("../assets/cover_calorie.webp")!important;background-position:center!important;}
.projects-lab .calorie-cover{padding:0!important;}
.projects-lab .calorie-cover img{display:block;width:100%;height:100%;object-fit:cover;}

/* Side-by-side interactive Balans showcase only. */
.paired-demo-modal .modal-panel {width:98vw;max-width:1900px;max-height:96vh;margin:2vh auto;padding:16px;}
.paired-demo-note{color:#b5c6db;font-size:13px;margin:0 0 12px;line-height:1.5;}
.paired-demo-grid{display:grid;grid-template-columns:minmax(0,1fr) 414px;gap:20px;}
.paired-demo-grid h4{color:#dce7f5;margin:0 0 8px;font-size:14px;}
.paired-web-scroll{overflow:auto;border-radius:14px;background:#f6f4ec;height:calc(88vh - 105px);min-height:420px;}
.paired-web-frame{display:block;width:100%;min-width:1100px;height:100%;border:0;}
.paired-mobile{display:flex;align-items:center;flex-direction:column;}
.paired-phone{position:relative;padding:24px 8px 10px;background:#121820;border:2px solid #485262;border-radius:36px;box-shadow:0 10px 28px #0005;}
.paired-phone-camera{position:absolute;width:74px;height:8px;top:8px;left:50%;transform:translateX(-50%);background:#020407;border-radius:12px;}
.paired-phone-frame{display:block;width:390px;height:calc(88vh - 139px);min-height:390px;border:0;border-radius:23px;background:#f6f4ec;}
@media(max-width:900px){.paired-demo-grid{grid-template-columns:1fr;}.paired-demo-modal .modal-panel{max-height:96vh;}.paired-web-scroll{height:520px;}.paired-phone-frame{width:min(390px,calc(94vw - 50px));height:680px;}.paired-demo-note{padding-right:18px;}}
.paired-web,.paired-mobile{min-width:0;max-width:100%;}.paired-demo-grid{min-width:0;}.paired-web-scroll{max-width:100%;}@media(max-width:900px){.paired-demo-grid{grid-template-columns:minmax(0,1fr);}.paired-mobile{margin-top:16px;}}

/* Fit the desktop preview to its panel; only the iframe is scaled. */
.paired-web-scroll{position:relative;overflow:hidden;}
.paired-web-frame{position:absolute;inset:0;min-width:0;max-width:none;transform-origin:top left;}

/* Services block: 5 cards, 3 + 2 centered on desktop */
.services-grid{grid-template-columns:repeat(6,1fr)}
.services-grid .skill-card{grid-column:span 2}
.services-grid .skill-card:nth-child(4){grid-column:2 / span 2}
.services-grid .skill-card:nth-child(5){grid-column:4 / span 2}
.services-cta{display:flex;justify-content:center;margin-top:34px}
@media(max-width:1100px){
  .services-grid{grid-template-columns:repeat(2,1fr)}
  .services-grid .skill-card,.services-grid .skill-card:nth-child(4),.services-grid .skill-card:nth-child(5){grid-column:auto}
  .services-grid .skill-card:nth-child(5){grid-column:1 / -1}
}
@media(max-width:760px){
  .services-grid{grid-template-columns:1fr}
  .services-grid .skill-card:nth-child(5){grid-column:auto}
}