/* =========================================================
   eSysVision — Renewal 2026
   Design system / layout / motion
   ========================================================= */

:root{
  --ink:#06080B;
  --ink-2:#080B0F;
  --ink-3:#0B1015;
  --paper:#E9E5DA;
  --paper-2:#DCD7C9;
  --text:#F1F1EA;
  --muted:#9CA6A3;
  --muted-2:#727E7C;
  --line:rgba(236,240,233,.13);
  --line-soft:rgba(236,240,233,.07);
  --lime:#C8FF4D;
  --lime-2:#D9FF7A;
  --blue:#7FA7FF;
  --sand:#E6D2A8;
  --sans:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,"Segoe UI","Apple SD Gothic Neo","Noto Sans KR",sans-serif;
  --disp:"Space Grotesk","Pretendard Variable",Pretendard,-apple-system,sans-serif;
  --serif:"Instrument Serif",Georgia,"Times New Roman",serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --shell:min(1320px,calc(100vw - 96px));
  --ease:cubic-bezier(.16,1,.3,1);
  --header-h:84px;
}

*,*::before,*::after{box-sizing:border-box}
html{
  scroll-behavior:smooth;
  scroll-padding-top:104px;
  background:var(--ink);
  -webkit-text-size-adjust:100%;
}
body{
  margin:0;
  background:var(--ink);
  color:var(--text);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.65;
  letter-spacing:-.015em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:900;
  pointer-events:none;
  opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E");
}
::selection{background:var(--lime);color:var(--ink)}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin:0}
ul,ol{list-style:none;margin:0;padding:0}
address{font-style:normal}
svg{display:block}
:focus-visible{outline:2px solid var(--lime);outline-offset:4px}
.shell{width:var(--shell);margin-inline:auto}
.pc-only{display:inline}

.skip-link{
  position:fixed;left:20px;top:12px;z-index:1000;
  background:var(--lime);color:var(--ink);
  padding:12px 18px;font-weight:600;font-size:13px;border-radius:2px;
  transform:translateY(-180%);
  transition:transform .3s var(--ease);
}
.skip-link:focus-visible{transform:translateY(0)}

.scroll-progress{position:fixed;left:0;top:0;z-index:300;width:100%;height:2px;background:transparent;pointer-events:none}
.scroll-progress span{display:block;width:0;height:100%;background:var(--lime);box-shadow:0 0 12px rgba(200,255,77,.55)}

/* ================= TYPE UTILITIES ================= */
.kicker{
  display:flex;align-items:center;gap:12px;
  font-family:var(--mono);font-size:10.5px;font-weight:500;
  line-height:1.2;letter-spacing:.2em;text-transform:uppercase;
  color:#8C9794;
}
.kicker::before{content:"";width:24px;height:1px;background:var(--lime);flex:none}
.display{
  margin-top:22px;
  font-family:var(--disp);
  font-weight:650;
  font-size:clamp(2.55rem,4.9vw,5.05rem);
  line-height:1.06;
  letter-spacing:-.058em;
  color:var(--text);
  word-break:keep-all;
}
.accent{color:var(--lime)}
.section-lead{
  max-width:420px;
  justify-self:end;
  align-self:end;
  padding-bottom:8px;
  color:var(--muted);
  font-size:14.5px;
  line-height:1.8;
  word-break:keep-all;
}
.section{
  position:relative;
  padding:clamp(98px,11vw,168px) 0;
  border-top:1px solid var(--line-soft);
}
.section-head{
  display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);
  gap:clamp(40px,7vw,110px);
  align-items:end;
  margin-bottom:64px;
}
.section-head--wide{grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr)}
.ico-arrow{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* ================= BUTTONS / LINKS ================= */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:12px;
  height:54px;padding:0 25px;border-radius:999px;
  font-size:13.5px;font-weight:600;letter-spacing:-.01em;
  white-space:nowrap;
  transition:background .35s var(--ease),color .35s var(--ease),transform .35s var(--ease),box-shadow .35s var(--ease);
}
.btn--lime{background:var(--lime);color:var(--ink)}
.btn--lime:hover{background:var(--lime-2);transform:translateY(-2px);box-shadow:0 14px 34px rgba(200,255,77,.18)}
.btn--lime:hover .ico-arrow{transform:translate(2px,-2px)}
.btn .ico-arrow{transition:transform .35s var(--ease)}
.link-underline{
  display:inline-flex;align-items:center;gap:9px;
  padding-bottom:3px;border-bottom:1px solid rgba(236,240,233,.3);
  font-size:12.5px;font-weight:500;color:#DCE2DC;
  transition:color .3s,border-color .3s;
}
.link-underline span{font-size:12px;transition:transform .3s var(--ease)}
.link-underline:hover{color:var(--lime);border-color:var(--lime)}
.link-underline:hover span{transform:translateY(2px)}
.text-btn{
  display:inline-flex;align-items:center;gap:12px;
  padding-bottom:7px;border-bottom:1px solid var(--line);
  font-family:var(--mono);font-size:10px;letter-spacing:.13em;
  color:#D5DCD6;transition:color .3s,border-color .3s;
}
.text-btn span{font-size:15px;line-height:1;transition:transform .4s var(--ease)}
.text-btn:hover{color:var(--lime);border-color:var(--lime)}
.text-btn:hover span{transform:rotate(90deg)}

/* ================= HEADER ================= */
.site-header{
  position:fixed;inset:0 0 auto;z-index:200;
  color:var(--text);
  transition:transform .55s var(--ease);
}
.site-header::before{
  content:"";position:absolute;inset:0;
  background:rgba(6,8,11,.78);
  -webkit-backdrop-filter:blur(18px) saturate(120%);
  backdrop-filter:blur(18px) saturate(120%);
  border-bottom:1px solid transparent;
  opacity:0;transition:opacity .4s ease,border-color .4s ease;
}
.site-header.is-scrolled::before{opacity:1;border-bottom-color:var(--line-soft)}
.site-header.is-hidden{transform:translateY(-101%)}
.header__inner{
  position:relative;
  height:var(--header-h);
  display:flex;align-items:center;gap:32px;
}
.brand{display:inline-flex;align-items:center;gap:10px;flex:none}
.brand__mark{width:30px;height:30px;color:#F3F3EC;flex:none}
.brand__type{
  font-family:var(--disp);font-size:20px;font-weight:600;
  letter-spacing:-.045em;color:#F4F4ED;line-height:1;
}
.header__nav{margin-left:auto;display:flex;align-items:center;gap:clamp(18px,2.2vw,32px)}
.header__nav a{
  position:relative;padding:8px 0;
  font-size:12.5px;font-weight:500;color:#C6CECA;
  transition:color .3s;
}
.header__nav a::after{
  content:"";position:absolute;left:0;bottom:2px;width:100%;height:1px;
  background:var(--lime);transform:scaleX(0);transform-origin:right;
  transition:transform .45s var(--ease);
}
.header__nav a:hover,.header__nav a.is-current{color:#fff}
.header__nav a:hover::after,.header__nav a.is-current::after{transform:scaleX(1);transform-origin:left}
.header__cta{
  display:inline-flex;align-items:center;gap:7px;flex:none;
  height:38px;padding:0 15px;border:1px solid rgba(200,255,77,.38);border-radius:999px;
  color:var(--lime);font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;
  transition:background .3s,color .3s,border-color .3s;
}
.header__cta .ico-arrow{width:13px;height:13px}
.header__cta:hover{background:var(--lime);border-color:var(--lime);color:var(--ink)}
.menu-toggle{
  display:none;position:relative;width:44px;height:44px;
  margin-left:auto;border:1px solid var(--line);border-radius:50%;
}
.menu-toggle span{
  position:absolute;left:13px;width:18px;height:1.5px;background:#EDF0E9;
  transition:transform .4s var(--ease),top .4s var(--ease),opacity .3s;
}
.menu-toggle span:nth-child(1){top:18px}
.menu-toggle span:nth-child(2){top:24px}
.menu-toggle[aria-expanded="true"] span:nth-child(1){top:21px;transform:rotate(45deg)}
.menu-toggle[aria-expanded="true"] span:nth-child(2){top:21px;transform:rotate(-45deg)}

.mobile-nav{
  position:fixed;inset:0;z-index:190;
  display:flex;flex-direction:column;justify-content:space-between;
  padding:calc(var(--header-h) + 34px) 24px 38px;
  background:#070A0D;
  visibility:hidden;opacity:0;
  clip-path:inset(0 0 100% 0);
  transition:clip-path .65s var(--ease),opacity .4s ease,visibility .65s;
  overflow-y:auto;
}
.mobile-nav.is-open{visibility:visible;opacity:1;clip-path:inset(0 0 0 0)}
.mobile-nav__links{display:flex;flex-direction:column}
.mobile-nav__links a{
  display:flex;align-items:baseline;gap:16px;
  padding:14px 0;border-bottom:1px solid var(--line-soft);
  font-size:clamp(1.65rem,7.4vw,2.4rem);font-weight:600;letter-spacing:-.05em;
}
.mobile-nav__links a span{
  font-family:var(--mono);font-size:9px;font-weight:400;letter-spacing:.1em;
  color:var(--lime);
}
.mobile-nav__links a:active{color:var(--lime)}
.mobile-nav__foot{margin-top:32px;display:flex;flex-direction:column;gap:20px}
.mobile-nav__edu{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:15px 18px;background:var(--lime);color:var(--ink);border-radius:3px;
  font-size:13px;font-weight:600;
}
.mobile-nav__foot p{font-family:var(--mono);font-size:10px;line-height:1.9;color:var(--muted)}
body.menu-open{overflow:hidden}

/* ================= HERO ================= */
.hero{
  position:relative;
  min-height:100vh;
  min-height:100svh;
  display:flex;flex-direction:column;
  padding-top:calc(var(--header-h) + 52px);
  overflow:hidden;
  background:
    radial-gradient(90% 80% at 82% 28%,rgba(19,31,30,.55) 0%,rgba(6,8,11,0) 62%),
    radial-gradient(60% 55% at 14% 72%,rgba(20,26,20,.45) 0%,rgba(6,8,11,0) 65%),
    var(--ink);
}
.hero__grid{
  position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(236,240,233,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(236,240,233,.055) 1px,transparent 1px);
  background-size:88px 88px;
  -webkit-mask-image:radial-gradient(ellipse 82% 74% at 50% 42%,#000 0%,transparent 78%);
  mask-image:radial-gradient(ellipse 82% 74% at 50% 42%,#000 0%,transparent 78%);
  opacity:.55;
  animation:gridDrift 34s linear infinite;
}
.hero__glow{
  position:absolute;right:-12%;top:8%;width:64vw;height:64vw;
  max-width:900px;max-height:900px;
  background:radial-gradient(circle,rgba(200,255,77,.09) 0%,rgba(127,167,255,.045) 36%,transparent 68%);
  filter:blur(36px);pointer-events:none;
}
.hero__inner{
  position:relative;z-index:2;
  flex:1;
  display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);
  align-items:center;gap:24px;
  padding-bottom:48px;
}
.hero__copy{max-width:790px;position:relative;z-index:2}
.hero__eyebrow{
  display:flex;align-items:center;gap:10px;
  font-family:var(--mono);font-size:10px;letter-spacing:.19em;color:#C1C9C5;
  margin-bottom:30px;
}
.pulse-dot{
  position:relative;width:6px;height:6px;border-radius:50%;background:var(--lime);
  box-shadow:0 0 0 0 rgba(200,255,77,.5);
  animation:pulseDot 2.6s ease-out infinite;flex:none;
}
.hero__title{
  font-family:var(--disp);
  font-weight:650;
  font-size:clamp(3rem,6.2vw,6.25rem);
  line-height:.98;
  letter-spacing:-.065em;
  color:#F5F5EE;
  word-break:keep-all;
}
.hero__title .line{display:block;overflow:hidden;padding-bottom:.065em;margin-bottom:-.065em}
.hero__title .line > span{
  display:block;transform:translateY(112%);
  animation:lineUp 1.15s var(--ease) forwards;
}
.hero__title .line:nth-child(1) > span{animation-delay:.12s}
.hero__title .line:nth-child(2) > span{animation-delay:.24s}
.title-period{color:var(--lime)}
.hero__serif{
  margin-top:20px;
  font-family:var(--serif);font-size:clamp(1.45rem,2.1vw,2rem);
  font-style:italic;line-height:1.1;letter-spacing:.005em;color:var(--lime);
  animation:fadeUp .9s var(--ease) .5s both;
}
.hero__serif em{font-style:italic;opacity:.82}
.hero__lead{
  margin-top:26px;max-width:590px;
  color:#A7B0AD;font-size:15.5px;line-height:1.8;letter-spacing:-.01em;
  word-break:keep-all;
  animation:fadeUp .9s var(--ease) .62s both;
}
.hero__actions{
  display:flex;align-items:center;gap:28px;flex-wrap:wrap;
  margin-top:36px;
  animation:fadeUp .9s var(--ease) .74s both;
}
.hero__visual{
  position:relative;z-index:1;
  width:100%;max-width:610px;aspect-ratio:1;
  justify-self:end;
}
.orb{position:absolute;inset:0;isolation:isolate}
.orb::before{
  content:"";position:absolute;inset:7%;border-radius:50%;
  background:radial-gradient(circle at 50% 45%,rgba(200,255,77,.08),transparent 62%);
  filter:blur(8px);
}
.orb__glow{
  position:absolute;inset:18%;border-radius:50%;
  background:radial-gradient(circle at 50% 50%,rgba(200,255,77,.12),rgba(127,167,255,.06) 45%,transparent 70%);
  filter:blur(42px);
}
#orbCanvas{
  position:relative;z-index:2;width:100%;height:100%;
  opacity:0;animation:fadeIn 1.6s ease .35s forwards;
}
.orb__ticks{
  position:absolute;inset:3%;z-index:3;border-radius:50%;pointer-events:none;
  background:repeating-conic-gradient(from 0deg,rgba(236,240,233,.3) 0deg .45deg,transparent .45deg 5deg);
  -webkit-mask-image:radial-gradient(circle,transparent 65.7%,#000 66.2%,#000 68%,transparent 68.5%);
  mask-image:radial-gradient(circle,transparent 65.7%,#000 66.2%,#000 68%,transparent 68.5%);
  opacity:.65;
  animation:spin 110s linear infinite;
}
.orb__cross{
  position:absolute;inset:8%;z-index:1;border-radius:50%;pointer-events:none;opacity:.5;
  background:
    linear-gradient(var(--line-soft),var(--line-soft)) center/1px 100% no-repeat,
    linear-gradient(var(--line-soft),var(--line-soft)) center/100% 1px no-repeat;
  -webkit-mask-image:radial-gradient(circle,transparent 54%,#000 55%,#000 100%);
  mask-image:radial-gradient(circle,transparent 54%,#000 55%,#000 100%);
}
.hud{
  position:absolute;z-index:4;
  font-family:var(--mono);font-size:8.5px;letter-spacing:.15em;color:#AEB8B4;
  display:flex;align-items:center;gap:7px;
  padding:5px 0 5px 9px;border-left:1px solid rgba(200,255,77,.55);
  background:linear-gradient(90deg,rgba(6,8,11,.55),transparent);
  pointer-events:none;white-space:nowrap;
}
.hud--tl{left:1%;top:9%}
.hud--tr{right:0;top:19%;border-left:0;border-right:1px solid rgba(200,255,77,.4);padding:5px 9px 5px 0;justify-content:flex-end}
.hud--bl{left:1%;bottom:15%}
.hud--br{right:2%;bottom:7%;border-left:0;border-right:1px solid rgba(236,240,233,.25);padding:5px 9px 5px 0}
.hud .pulse-dot{width:4px;height:4px;box-shadow:none;animation-duration:2s}
.hero__foot{
  position:relative;z-index:2;
  display:flex;align-items:center;justify-content:space-between;gap:40px;
  padding:22px 0 26px;
  border-top:1px solid var(--line);
  animation:fadeUp 1s var(--ease) .9s both;
}
.scroll-cue{
  display:flex;align-items:center;gap:14px;
  font-family:var(--mono);font-size:8.5px;letter-spacing:.18em;color:#86918E;
  flex:none;transition:color .3s;
}
.scroll-cue:hover{color:var(--lime)}
.scroll-cue__line{position:relative;display:block;width:44px;height:1px;background:rgba(236,240,233,.18);overflow:hidden}
.scroll-cue__line i{position:absolute;left:0;top:0;width:14px;height:1px;background:var(--lime);animation:scrollLine 2.4s var(--ease) infinite}
.hero__stats{display:flex;align-items:stretch;gap:clamp(20px,3.2vw,44px)}
.hero__stats div{padding-left:18px;border-left:1px solid var(--line)}
.hero__stats div:first-child{padding-left:0;border-left:0}
.hero__stats dt{
  font-family:var(--disp);font-size:22px;font-weight:500;line-height:1;
  letter-spacing:-.03em;color:#E8EAE2;
}
.hero__stats sup{font-size:10px;color:var(--lime);vertical-align:super;margin-left:1px}
.hero__stats dd{
  margin-top:7px;font-family:var(--mono);font-size:9px;letter-spacing:.1em;
  line-height:1.2;color:#7F8A87;text-transform:uppercase;
}

/* ================= TICKER ================= */
.ticker{
  position:relative;height:62px;overflow:hidden;
  display:flex;align-items:center;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:#080B0E;
}
.ticker__track{display:flex;width:max-content;animation:marquee 42s linear infinite}
.ticker:hover .ticker__track{animation-play-state:paused}
.ticker__group{display:flex;align-items:center;gap:34px;padding-right:34px;flex:none}
.ticker__group span{
  font-family:var(--mono);font-size:10px;letter-spacing:.17em;
  color:#C3CCC7;white-space:nowrap;
}
.ticker__group i{font-style:normal;color:var(--lime);font-size:12px;line-height:1}
.about{border-top:0}

/* ================= ABOUT ================= */
.about__grid{
  display:grid;grid-template-columns:280px minmax(0,1fr);
  gap:clamp(44px,7vw,110px);align-items:start;
}
.about__aside{position:sticky;top:126px;align-self:start}
.about__diagram{
  position:relative;width:186px;height:186px;margin:42px 0 34px;
}
.about__orbit{
  position:absolute;inset:0;border:1px solid rgba(236,240,233,.15);border-radius:50%;
  animation:spin 36s linear infinite;
}
.about__orbit::before{
  content:"";position:absolute;left:50%;top:-3px;width:6px;height:6px;border-radius:50%;
  background:var(--lime);transform:translateX(-50%);box-shadow:0 0 12px rgba(200,255,77,.5);
}
.about__orbit--2{inset:27%;border-style:dashed;border-color:rgba(200,255,77,.22);animation-direction:reverse;animation-duration:24s}
.about__orbit--2::before{width:4px;height:4px;background:var(--blue);box-shadow:none;top:-2px}
.about__core{
  position:absolute;left:50%;top:50%;width:8px;height:8px;border-radius:50%;
  background:var(--lime);transform:translate(-50%,-50%);
  box-shadow:0 0 24px 3px rgba(200,255,77,.3);
}
.about__label{
  position:absolute;font-family:var(--mono);font-size:7.5px;letter-spacing:.14em;color:#7F8A87;
}
.about__label--a{left:-4px;top:47%}
.about__label--b{right:-2px;top:24%}
.about__label--c{right:9%;bottom:8%}
.about__based{
  font-family:var(--mono);font-size:8.5px;line-height:1.9;letter-spacing:.13em;color:#6F7B78;
}
.about__body{max-width:980px}
.about__serif{
  margin-top:40px;font-family:var(--serif);font-style:italic;
  font-size:clamp(1.35rem,2vw,1.8rem);color:var(--lime);line-height:1.2;
}
.about__text{
  display:grid;grid-template-columns:1fr 1fr;gap:34px;
  margin-top:38px;padding-top:32px;border-top:1px solid var(--line);
}
.about__text p{color:#A7B0AD;font-size:14px;line-height:1.85;word-break:keep-all}
.principles{display:grid;grid-template-columns:repeat(3,1fr);margin-top:62px;border-top:1px solid var(--line)}
.principle{position:relative;padding:26px 28px 2px 0;border-right:1px solid var(--line)}
.principle:last-child{border-right:0;padding-right:0}
.principle::before{
  content:"";position:absolute;top:-1px;left:0;width:0;height:1px;background:var(--lime);
  transition:width .7s var(--ease);
}
.principle:hover::before{width:100%}
.principle__no{font-family:var(--mono);font-size:9px;letter-spacing:.1em;color:#6E7A77}
.principle__en{
  margin-top:18px;font-family:var(--mono);font-size:8px;letter-spacing:.18em;color:var(--lime);
}
.principle h3{margin-top:12px;font-size:18px;font-weight:600;letter-spacing:-.035em;color:#E9ECE5}
.principle p{margin-top:7px;color:#8F9A97;font-size:12.5px;line-height:1.7;word-break:keep-all}

/* ================= BUSINESS ================= */
.business{background:radial-gradient(70% 60% at 50% 0%,rgba(16,24,24,.55),transparent 70%),var(--ink-2)}
.biz-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:14px;margin-top:8px}
.biz{
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;
  min-height:424px;padding:25px 25px 23px;
  border:1px solid var(--line);border-radius:3px;
  background:linear-gradient(160deg,rgba(255,255,255,.025),rgba(255,255,255,0) 55%);
  transition:transform .55s var(--ease),border-color .45s,background-color .45s,box-shadow .55s;
}
.biz::before{
  content:"";position:absolute;left:0;top:0;width:100%;height:1px;
  background:linear-gradient(90deg,var(--lime),rgba(200,255,77,0));
  transform:scaleX(0);transform-origin:left;transition:transform .65s var(--ease);z-index:2;
}
.biz::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
  background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%),rgba(200,255,77,.065),transparent 62%);
  transition:opacity .4s;
}
.biz:hover{transform:translateY(-5px);border-color:rgba(200,255,77,.34);background-color:#0A0F13;box-shadow:0 28px 70px rgba(0,0,0,.4)}
.biz:hover::before{transform:scaleX(1)}
.biz:hover::after{opacity:1}
.biz--ai{grid-column:span 7}
.biz--cctv{grid-column:span 5}
.biz--vr,.biz--edu,.biz--net{grid-column:span 4;min-height:370px}
.biz--app{grid-column:span 12;min-height:300px}
.biz__top{display:flex;align-items:center;justify-content:space-between;gap:16px;position:relative;z-index:3}
.biz__no{font-family:var(--mono);font-size:9px;letter-spacing:.1em;color:#64706D}
.biz__en{font-family:var(--mono);font-size:8.5px;letter-spacing:.13em;color:#899592;text-transform:uppercase;text-align:right}
.biz__visual{position:relative;height:158px;margin:15px 0 4px;display:flex;align-items:center;z-index:3}
.biz--vr .biz__visual,.biz--edu .biz__visual,.biz--net .biz__visual{height:128px;margin-top:22px}
.viz{width:100%;height:100%;overflow:visible}
.viz__caption{
  position:absolute;right:0;bottom:-3px;font-family:var(--mono);font-size:8px;
  letter-spacing:.1em;color:#63706C;
}
.viz__caption b{color:var(--lime);font-weight:400;margin:0 4px}
.biz__body{position:relative;z-index:3;margin-top:auto;padding-top:14px}
.biz__body h3{font-family:var(--disp);font-size:28px;font-weight:600;line-height:1.1;letter-spacing:-.045em;color:#F0F1EA}
.biz__body p{margin-top:8px;max-width:520px;color:#98A39F;font-size:12.8px;line-height:1.72;word-break:keep-all}
.tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:15px}
.tags li{
  padding:4px 8px;border:1px solid var(--line);border-radius:999px;
  font-family:var(--mono);font-size:8.5px;letter-spacing:.03em;color:#A6B0AC;
  white-space:nowrap;
}
.biz__more{
  position:relative;z-index:3;display:inline-flex;align-items:center;gap:7px;
  margin-top:20px;align-self:flex-start;
  font-family:var(--mono);font-size:9px;letter-spacing:.1em;color:var(--lime);
  transition:gap .3s;
}
.biz__more .ico-arrow{width:12px;height:12px;transition:transform .35s var(--ease)}
.biz:hover .biz__more{gap:11px}
.biz:hover .biz__more .ico-arrow{transform:translate(2px,-2px)}
.biz__more .ext{font-size:12px;line-height:1}

/* AI viz */
.viz--ai .net__lines path{fill:none;stroke:rgba(200,255,77,.24);stroke-width:1;stroke-dasharray:3 7;animation:dashMove 9s linear infinite}
.viz--ai .net__nodes circle{fill:#DCE5DD;opacity:.65}
.viz--ai .net__nodes circle.hot{fill:var(--lime);opacity:1;filter:drop-shadow(0 0 6px rgba(200,255,77,.65))}
.viz--ai .ai-core{fill:rgba(200,255,77,.055);stroke:rgba(200,255,77,.55);stroke-width:1;filter:drop-shadow(0 0 14px rgba(200,255,77,.28))}
.viz--ai .ai-ring{
  fill:none;stroke:rgba(200,255,77,.24);stroke-width:1;stroke-dasharray:2 8;
  transform-box:fill-box;transform-origin:center;animation:spin 22s linear infinite;
}
.viz--ai .net__nodes circle.hot:nth-of-type(5){animation:nodePulse 3s ease-in-out infinite}
.viz--ai .net__nodes circle.hot:nth-of-type(9){animation:nodePulse 3s ease-in-out .8s infinite}

/* CCTV viz */
.cam-corners path{opacity:.6}
.cam-box rect{fill:none;stroke:rgba(200,255,77,.75);stroke-width:1;stroke-dasharray:5 4;animation:boxPulse 4s ease-in-out infinite}
.cam-box path{stroke:rgba(200,255,77,.45);stroke-width:1}
.cam-box text{font-family:var(--mono);font-size:7.5px;letter-spacing:.08em;fill:var(--lime)}
.cam-box--b rect{animation-delay:1.4s}
.cam-scan{
  stroke:var(--lime);stroke-width:1;opacity:.7;
  filter:drop-shadow(0 0 5px rgba(200,255,77,.6));
  animation:camScan 6.5s ease-in-out infinite;
}
.cam-meta{font-family:var(--mono);font-size:7.5px;letter-spacing:.13em;fill:#8F9C96}
.cam-rec{fill:var(--lime);animation:recPulse 1.6s ease-in-out infinite}

/* VR viz */
.viz--vr .vr-rings ellipse{stroke:rgba(127,167,255,.32);stroke-width:1}
.viz--vr .vr-rings{transform-origin:220px 92px;animation:vrWobble 18s ease-in-out infinite}
.viz--vr .vr-ticks path{stroke:rgba(127,167,255,.35);stroke-width:1}
.vr-dot{fill:var(--lime);filter:drop-shadow(0 0 6px rgba(200,255,77,.7));animation:nodePulse 2.8s ease-in-out infinite}
.vr-you{font-family:var(--mono);font-size:7px;letter-spacing:.1em;fill:var(--lime);text-anchor:middle}
.vr-big{
  font-family:var(--disp);font-size:40px;font-weight:500;letter-spacing:-.05em;
  fill:rgba(127,167,255,.45);text-anchor:middle;
}

/* EDUCATION card */
.biz--edu{background:var(--lime);border-color:var(--lime);color:var(--ink)}
.biz--edu::before{background:var(--ink)}
.biz--edu::after{background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%),rgba(11,13,16,.09),transparent 62%)}
.biz--edu:hover{background:#D7FF74;border-color:#D7FF74;box-shadow:0 28px 70px rgba(200,255,77,.12)}
.biz--edu .biz__no,.biz--edu .biz__en{color:rgba(11,13,16,.55)}
.biz--edu .biz__body h3{color:var(--ink)}
.biz--edu .biz__body p{color:rgba(11,13,16,.72)}
.biz--edu .tags li{border-color:rgba(11,13,16,.22);color:rgba(11,13,16,.7)}
.biz--edu .biz__more{color:var(--ink)}
.viz--edu rect,.viz--edu circle,.viz--edu path{stroke:#0B0D10;stroke-width:1.15;fill:none}
.viz--edu .edu-cards rect{opacity:.32}
.viz--edu .edu-lines{stroke-width:1.1;opacity:.5}
.edu-ga{font-family:var(--sans);font-size:36px;font-weight:800;fill:#0B0D10;stroke:none!important}
.edu-step{font-family:var(--mono);font-size:7px;fill:rgba(11,13,16,.55);text-anchor:middle;stroke:none!important}
.edu-tap circle{stroke:#0B0D10;opacity:0;transform-origin:258px 102px;animation:tapRipple 3.6s ease-out infinite}
.edu-tap circle:nth-child(2){animation-delay:.5s}

/* NETWORK viz */
.viz--network .network__lines path{fill:none;stroke:rgba(230,210,168,.3);stroke-width:1;stroke-dasharray:2 8;animation:dashMove 12s linear infinite}
.viz--network .network__nodes circle{fill:#DCD4C2;opacity:.65}
.viz--network .network__nodes .hot{fill:var(--lime);opacity:1;filter:drop-shadow(0 0 5px rgba(200,255,77,.55))}
.net-label{font-family:var(--mono);font-size:7px;letter-spacing:.15em;fill:#6F7B78}

/* APP card */
.biz--app{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);gap:20px;align-items:center}
.biz__main{display:flex;flex-direction:column;height:100%;position:relative;z-index:3}
.biz--app .biz__body{margin-top:auto}
.biz--app .biz__body h3{font-size:32px}
.biz--app .biz__body p{max-width:460px}
.biz__app-visual{position:relative;z-index:3;height:260px;display:flex;align-items:center}
.viz--app .phone rect{fill:#0C1116}
.viz--app .phone--front rect:first-child{fill:#0D1318}
.viz--app .app-toast{animation:toastFloat 5s ease-in-out infinite}
.viz--app .app-toast rect{filter:drop-shadow(0 12px 24px rgba(0,0,0,.45))}

/* ================= DATA ================= */
.data{
  background:
    radial-gradient(60% 55% at 82% 18%,rgba(24,34,26,.45),transparent 65%),
    linear-gradient(180deg,#080B0F,#06080B);
  overflow:hidden;
}
.data__watermark{
  position:absolute;right:-3vw;top:90px;
  font-family:var(--disp);font-size:clamp(8rem,22vw,21rem);font-weight:700;
  line-height:.8;letter-spacing:-.08em;color:transparent;
  -webkit-text-stroke:1px rgba(236,240,233,.035);
  pointer-events:none;user-select:none;
}
.data__grid{
  display:grid;grid-template-columns:minmax(300px,360px) minmax(0,1fr);
  gap:clamp(48px,7vw,110px);align-items:start;
}
.cert-panel{position:sticky;top:118px}
.cert-card{
  position:relative;display:block;width:100%;padding:10px;
  background:#F2EFE6;color:var(--ink);text-align:left;
  transform:rotate(-1.6deg);
  box-shadow:0 34px 90px rgba(0,0,0,.55);
  transition:transform .6s var(--ease),box-shadow .6s;
  cursor:zoom-in;
}
.cert-card:hover{transform:rotate(0) translateY(-5px);box-shadow:0 44px 110px rgba(0,0,0,.62)}
.cert-card img{
  width:100%;height:auto;object-fit:contain;
  border:1px solid rgba(0,0,0,.09);background:#fff;
}
.cert-card__badge{
  position:absolute;right:-9px;top:20px;z-index:2;
  padding:6px 9px;background:var(--ink);border:1px solid rgba(200,255,77,.6);
  font-family:var(--mono);font-size:8px;letter-spacing:.12em;color:var(--lime);
  transform:rotate(2deg);
}
.cert-card__zoom{
  position:absolute;right:18px;bottom:18px;
  padding:7px 10px;background:rgba(6,8,11,.88);color:#EDEFE8;
  font-family:var(--mono);font-size:7.5px;letter-spacing:.08em;
  display:flex;align-items:center;gap:6px;
  opacity:0;transform:translateY(6px);transition:.35s var(--ease);
}
.cert-card:hover .cert-card__zoom{opacity:1;transform:none}
.cert-card__zoom span{color:var(--lime);font-size:11px}
.cert-facts{padding-top:26px}
.cert-facts__title{font-size:14px;font-weight:600;letter-spacing:-.03em;color:#E8EBE4}
.cert-facts dl{margin-top:14px}
.cert-facts dl div{display:flex;justify-content:space-between;gap:20px;padding:9px 0;border-top:1px solid var(--line-soft)}
.cert-facts dl div:last-child{border-bottom:1px solid var(--line-soft)}
.cert-facts dt{font-family:var(--mono);font-size:8.5px;letter-spacing:.08em;color:#7A8581}
.cert-facts dd{font-size:12px;color:#B9C2BE;text-align:right}
.cert-facts__note{margin-top:14px;font-size:11.5px;line-height:1.75;color:#7F8A87;word-break:keep-all}

.pipeline{position:relative;--p:0}
.pipeline::before,.pipeline::after{
  content:"";position:absolute;left:5px;top:7px;width:1px;
}
.pipeline::before{height:calc(100% - 14px);background:rgba(236,240,233,.12)}
.pipeline::after{
  height:calc((100% - 14px) * var(--p));
  background:linear-gradient(180deg,var(--lime),rgba(200,255,77,.25));
  transition:height .12s linear;
  box-shadow:0 0 10px rgba(200,255,77,.35);
}
.pipe{position:relative;display:grid;grid-template-columns:52px minmax(0,1fr);gap:20px;padding:0 0 46px 38px}
.pipe:last-child{padding-bottom:0}
.pipe__dot{
  position:absolute;left:0;top:6px;width:11px;height:11px;border-radius:50%;
  border:1px solid rgba(200,255,77,.7);background:var(--ink);z-index:2;
  transition:background .5s,box-shadow .5s;
}
.pipe.is-in .pipe__dot{background:var(--lime);box-shadow:0 0 0 4px rgba(200,255,77,.08)}
.pipe__no{
  font-family:var(--disp);font-size:32px;line-height:1;font-weight:400;
  letter-spacing:-.04em;color:#3E4B48;padding-top:1px;
  transition:color .5s;
}
.pipe.is-in .pipe__no{color:rgba(200,255,77,.8)}
.pipe__content{border-bottom:1px solid var(--line-soft);padding-bottom:36px}
.pipe:last-child .pipe__content{border-bottom:0;padding-bottom:0}
.pipe h3{font-size:25px;font-weight:600;letter-spacing:-.045em;color:#EEF0E9;line-height:1.2}
.pipe h3 span{
  margin-left:10px;font-family:var(--mono);font-size:8px;font-weight:400;
  letter-spacing:.1em;color:var(--lime);vertical-align:middle;
}
.pipe p{margin-top:9px;max-width:500px;color:#929D99;font-size:13px;line-height:1.8;word-break:keep-all}

/* ================= MEDIA ================= */
.media{padding:clamp(78px,8vw,118px) 0;background:#06080B}
.media__head{display:flex;align-items:flex-end;justify-content:space-between;gap:40px}
.media__title{
  margin-top:18px;font-family:var(--disp);font-size:clamp(2rem,3.1vw,2.8rem);
  font-weight:600;line-height:1.1;letter-spacing:-.05em;
}
.media__grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:42px}
.video{display:block;width:100%;text-align:left}
.video__thumb{
  position:relative;display:block;aspect-ratio:16/9;overflow:hidden;
  border:1px solid var(--line);border-radius:3px;
  background-color:#0A0F13;
  background-size:cover;background-position:center;
  transition:border-color .4s;
}
.video__thumb--1{
  background-image:linear-gradient(180deg,rgba(6,8,11,.12),rgba(6,8,11,.72)),url("https://i.ytimg.com/vi/x8dzk7CTWnw/hqdefault.jpg");
}
.video__thumb--2{
  background-image:linear-gradient(180deg,rgba(6,8,11,.12),rgba(6,8,11,.72)),url("https://i.ytimg.com/vi/bzK41_X_mLU/hqdefault.jpg");
}
.video:hover .video__thumb{border-color:rgba(200,255,77,.4)}
.video__overlay{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(6,8,11,.05) 0%,rgba(6,8,11,.15) 55%,rgba(6,8,11,.82) 100%);
}
.video__play{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:62px;height:62px;border-radius:50%;
  display:grid;place-items:center;
  background:rgba(6,8,11,.58);border:1px solid rgba(200,255,77,.6);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  transition:background .35s,transform .35s var(--ease);
}
.video__play svg{width:20px;height:20px;fill:var(--lime);margin-left:2px;transition:fill .3s}
.video:hover .video__play{background:var(--lime);transform:translate(-50%,-50%) scale(1.06)}
.video:hover .video__play svg{fill:var(--ink)}
.video__label{
  position:absolute;left:16px;top:14px;
  font-family:var(--mono);font-size:7.5px;letter-spacing:.14em;color:#E3E8E0;
  padding:4px 7px;border:1px solid rgba(236,240,233,.2);background:rgba(6,8,11,.35);
}
.video__meta{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:14px 2px 0;border-bottom:0}
.video__meta b{font-size:13.5px;font-weight:500;color:#E4E8E1}
.video__meta > span{font-family:var(--mono);font-size:8px;letter-spacing:.05em;color:#6F7B78;white-space:nowrap}
.video--playing{grid-column:span 1}
.video--playing iframe{width:100%;aspect-ratio:16/9;border:1px solid var(--line);border-radius:3px;display:block;background:#000}

/* ================= EDUCATION ================= */
.education{
  overflow:hidden;
  background:
    radial-gradient(60% 80% at 82% 50%,rgba(200,255,77,.08),transparent 62%),
    radial-gradient(40% 50% at 10% 80%,rgba(127,167,255,.05),transparent 65%),
    #070A0D;
}
.edu__glow{
  position:absolute;right:-10%;top:20%;width:55vw;height:55vw;max-width:760px;max-height:760px;
  border-radius:50%;background:radial-gradient(circle,rgba(200,255,77,.11),transparent 62%);
  filter:blur(60px);pointer-events:none;
}
.edu__grid{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(44px,6vw,86px);align-items:center}
.edu__copy .display{font-size:clamp(2.45rem,4.5vw,4.5rem)}
.edu__lead{margin-top:26px;max-width:520px;color:#A2ACA8;font-size:14.5px;line-height:1.85;word-break:keep-all}
.edu__meta{display:flex;gap:clamp(18px,3vw,36px);margin-top:32px}
.edu__meta li{display:flex;flex-direction:column;gap:5px;padding-left:16px;border-left:1px solid var(--line)}
.edu__meta li:first-child{padding-left:0;border-left:0}
.edu__meta b{font-family:var(--disp);font-size:34px;font-weight:500;line-height:1;letter-spacing:-.04em;color:#F1F2EB}
.edu__meta span{font-family:var(--mono);font-size:8px;letter-spacing:.06em;color:#7E8A86}
.edu__actions{display:flex;align-items:center;gap:26px;flex-wrap:wrap;margin-top:34px}
.edu__note{margin-top:14px;font-family:var(--mono);font-size:8px;letter-spacing:.04em;color:#626E6A}
.edu__preview{
  position:relative;display:block;perspective:1400px;
  padding:20px 0 30px;
}
.edu__frame{
  display:block;transform:rotateY(-7deg) rotateX(2.2deg);
  transform-style:preserve-3d;
  transition:transform 1.1s var(--ease);
}
.edu__preview:hover .edu__frame{transform:rotateY(-1deg) rotateX(0) translateY(-7px)}
.browser{
  display:block;overflow:hidden;border:1px solid rgba(236,240,233,.16);border-radius:9px;
  background:#0B0F14;
  box-shadow:0 60px 130px rgba(0,0,0,.7),0 0 0 1px rgba(200,255,77,.06),0 0 80px rgba(200,255,77,.07);
}
.browser__bar{display:flex;align-items:center;gap:12px;height:36px;padding:0 12px;background:#0D1217;border-bottom:1px solid var(--line-soft)}
.browser__dots{display:flex;gap:5px;flex:none}
.browser__dots i{width:6px;height:6px;border-radius:50%;background:#3A4548}
.browser__dots i:first-child{background:rgba(255,155,122,.6)}
.browser__dots i:nth-child(2){background:rgba(230,210,168,.55)}
.browser__dots i:nth-child(3){background:rgba(200,255,77,.5)}
.browser__url{
  flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
  padding:4px 9px;border-radius:2px;background:#080B0E;
  font-family:var(--mono);font-size:7.5px;letter-spacing:.02em;color:#76817D;text-align:center;
}
.browser__live{display:flex;align-items:center;gap:5px;font-family:var(--mono);font-size:7px;letter-spacing:.12em;color:var(--lime);flex:none}
.browser__live i{width:4px;height:4px;border-radius:50%;background:var(--lime);animation:pulseDot 2s infinite}
.browser__screen{position:relative;display:block;overflow:hidden;aspect-ratio:16/9;background:#0A0E13}
.browser__screen img{width:100%;height:100%;object-fit:cover;object-position:top center;transform:scale(1.005)}
.browser__scan{
  position:absolute;left:0;top:-2px;width:100%;height:2px;
  background:linear-gradient(90deg,transparent,rgba(200,255,77,.8),transparent);
  box-shadow:0 0 18px rgba(200,255,77,.4);
  animation:browserScan 7s ease-in-out infinite;
}
.browser__tap{
  position:absolute;left:55%;top:64%;width:22px;height:22px;border-radius:50%;
  border:1px solid rgba(200,255,77,.9);box-shadow:0 0 0 0 rgba(200,255,77,.35);
  animation:clickPulse 3.4s ease-out infinite;
}
.float-tag{
  position:absolute;z-index:3;
  padding:6px 11px;border:1px solid rgba(236,240,233,.18);border-radius:999px;
  background:rgba(6,8,11,.8);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  font-family:var(--mono);font-size:8px;letter-spacing:.03em;color:#DDE4DD;
  box-shadow:0 10px 30px rgba(0,0,0,.35);
  animation:floatY 5.4s ease-in-out infinite;
}
.float-tag--1{left:-4%;top:13%}
.float-tag--2{right:-4%;top:27%;animation-delay:-1.4s}
.float-tag--3{left:-6%;bottom:20%;animation-delay:-2.6s}
.float-tag--4{right:2%;bottom:9%;animation-delay:-3.7s}
.edu__open{
  position:absolute;right:15px;bottom:8px;z-index:4;
  display:inline-flex;align-items:center;gap:6px;
  padding:7px 11px;border-radius:999px;background:var(--lime);color:var(--ink);
  font-family:var(--mono);font-size:8px;letter-spacing:.06em;
  opacity:0;transform:translateY(8px);transition:.4s var(--ease);
}
.edu__preview:hover .edu__open{opacity:1;transform:none}

/* ================= PORTFOLIO ================= */
.portfolio{background:#06080B}
.portfolio__head{
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:60px;align-items:end;
}
.portfolio__aside{justify-self:end;max-width:360px;padding-bottom:10px}
.portfolio__aside > p:first-child{color:#929D99;font-size:13px;line-height:1.8}
.portfolio__count{
  margin-top:22px;font-family:var(--mono);font-size:9px;letter-spacing:.14em;color:#6F7B78;
}
.portfolio__count b{font-family:var(--disp);font-size:30px;font-weight:500;letter-spacing:-.04em;color:var(--lime);margin-right:6px}
.filters{display:flex;flex-wrap:wrap;gap:7px;margin:40px 0 28px}
.filter{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 13px;border:1px solid var(--line);border-radius:999px;
  font-family:var(--mono);font-size:9px;letter-spacing:.04em;color:#9AA5A1;
  transition:background .3s,color .3s,border-color .3s;
}
.filter span{color:#67736F;font-size:8px}
.filter:hover{border-color:rgba(200,255,77,.45);color:#E3E8E1}
.filter.is-active{background:var(--lime);border-color:var(--lime);color:var(--ink)}
.filter.is-active span{color:rgba(6,8,11,.78)}
.vr-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.vr-card{
  display:block;overflow:hidden;border:1px solid var(--line);border-radius:3px;
  background:#090D11;
  transition:transform .45s var(--ease),border-color .35s,box-shadow .45s;
}
.vr-card[hidden]{display:none}
.vr-card:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--c) 55%,transparent);box-shadow:0 22px 48px rgba(0,0,0,.35)}
.vr-card__visual{
  position:relative;display:block;aspect-ratio:4/3;overflow:hidden;
  background:
    radial-gradient(130% 120% at 50% 0%,color-mix(in srgb,var(--c) 18%,transparent) 0%,rgba(8,11,15,0) 62%),
    linear-gradient(160deg,#0A0F14,#070A0D 70%);
}
.vr-card__visual::before{
  content:"";position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(236,240,233,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(236,240,233,.055) 1px,transparent 1px);
  background-size:34px 34px;
  -webkit-mask-image:radial-gradient(ellipse at 50% 55%,#000,transparent 78%);
  mask-image:radial-gradient(ellipse at 50% 55%,#000,transparent 78%);
  opacity:.6;
}
.vr-card__no{
  position:absolute;left:14px;top:10px;z-index:2;
  font-family:var(--disp);font-size:52px;font-weight:600;line-height:1;letter-spacing:-.06em;
  color:transparent;-webkit-text-stroke:1px color-mix(in srgb,var(--c) 33%,transparent);
}
.vr-card__cat{
  position:absolute;right:14px;top:14px;z-index:2;
  font-family:var(--mono);font-size:7.5px;letter-spacing:.14em;color:var(--c);
}
.vr-card__orb{
  position:absolute;left:50%;top:56%;width:56%;aspect-ratio:1;transform:translate(-50%,-50%);
  border:1px solid color-mix(in srgb,var(--c) 38%,transparent);border-radius:50%;
  box-shadow:inset 0 0 44px color-mix(in srgb,var(--c) 8%,transparent);
  transition:transform .9s var(--ease),opacity .6s;
}
.vr-card__orb::before,.vr-card__orb::after{
  content:"";position:absolute;border-radius:50%;border:1px solid color-mix(in srgb,var(--c) 22%,transparent);
}
.vr-card__orb::before{inset:17%}
.vr-card__orb::after{inset:37%;border-color:color-mix(in srgb,var(--c) 45%,transparent)}
.vr-card__horizon{
  position:absolute;left:0;right:0;top:61%;height:1px;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--c) 65%,transparent),transparent);
  opacity:.7;
}
.vr-card__badge{
  position:absolute;left:14px;bottom:12px;z-index:2;
  padding:3px 6px;border:1px solid color-mix(in srgb,var(--c) 45%,transparent);
  font-family:var(--mono);font-size:7px;letter-spacing:.06em;color:var(--c);
}
.vr-card:hover .vr-card__orb{transform:translate(-50%,-50%) scale(1.18);opacity:.85}
.vr-card__body{display:grid;grid-template-columns:1fr auto;gap:3px 10px;padding:14px 15px 15px;border-top:1px solid var(--line-soft)}
.vr-card__body b{font-size:13px;font-weight:500;line-height:1.45;letter-spacing:-.025em;color:#E3E7E0;word-break:keep-all;padding-right:8px}
.vr-card__body > span:nth-child(2){font-family:var(--mono);font-size:8.5px;letter-spacing:.02em;color:#74807C}
.vr-card__arrow{
  grid-column:2;grid-row:1 / span 2;align-self:center;
  width:26px;height:26px;display:grid;place-items:center;border:1px solid var(--line);border-radius:50%;
  color:#8D9894;font-size:11px;transition:.35s var(--ease);
}
.vr-card:hover .vr-card__arrow{background:var(--lime);border-color:var(--lime);color:var(--ink);transform:translate(2px,-2px)}
.portfolio__foot{display:flex;justify-content:center;margin-top:38px}
.portfolio__foot[hidden]{display:none}
.vr-card.card-in{animation:cardIn .55s var(--ease) both}
.sr-only{
  position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;
  overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important;
}

/* ================= SPACE ================= */
.inside{background:#080B0E}
.inside__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.space{position:relative}
.space__media{position:relative;overflow:hidden;border:1px solid var(--line);border-radius:3px;background:#0A0E12}
.space__media img{
  width:100%;aspect-ratio:4/3;object-fit:cover;
  filter:grayscale(1) brightness(.78) contrast(1.06);
  transform:scale(1.02);
  transition:filter .9s var(--ease),transform 1.2s var(--ease);
}
.space__media::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(6,8,11,.04) 0%,rgba(6,8,11,.08) 55%,rgba(6,8,11,.5) 100%);
}
.space:hover .space__media img{filter:grayscale(.15) brightness(.96) contrast(1.02);transform:scale(1.06)}
.space__scan{
  position:absolute;left:0;top:0;width:100%;height:1px;z-index:2;
  background:linear-gradient(90deg,transparent,rgba(200,255,77,.7),transparent);
  opacity:0;transition:opacity .3s;
}
.space:hover .space__scan{opacity:1;animation:spaceScan 2.4s linear infinite}
.space figcaption{display:flex;gap:14px;padding:15px 2px 0}
.space__no{font-family:var(--mono);font-size:8px;letter-spacing:.1em;color:var(--lime);padding-top:3px}
.space h3{font-size:14.5px;font-weight:600;letter-spacing:-.03em;color:#E4E8E1}
.space p{margin-top:4px;font-size:11.5px;line-height:1.6;color:#87928E}

/* ================= CONTACT ================= */
.contact{
  position:relative;overflow:hidden;
  padding:clamp(100px,11vw,150px) 0 72px;
  background:var(--paper);color:#0A0C0F;
  border-top:1px solid rgba(10,12,15,.15);
}
.contact__dots{
  position:absolute;inset:0;pointer-events:none;opacity:.45;
  background-image:radial-gradient(rgba(10,12,15,.22) 1px,transparent 1px);
  background-size:26px 26px;
  -webkit-mask-image:radial-gradient(ellipse 60% 60% at 78% 20%,#000,transparent 75%);
  mask-image:radial-gradient(ellipse 60% 60% at 78% 20%,#000,transparent 75%);
}
.contact .kicker{color:#626861}
.contact .kicker::before{background:#0A0C0F}
.contact__top{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:50px;align-items:end}
.contact__title{
  margin-top:20px;
  font-family:var(--disp);font-weight:650;
  font-size:clamp(2.8rem,6.4vw,6.9rem);
  line-height:.96;letter-spacing:-.065em;color:#0A0C0F;word-break:keep-all;
}
.contact__title .accent{
  color:inherit;
  background:linear-gradient(transparent 82%,var(--lime) 82%,var(--lime) 94%,transparent 94%);
  box-decoration-break:clone;-webkit-box-decoration-break:clone;
  padding-bottom:.02em;
}
.contact__seal{
  position:relative;width:172px;height:172px;flex:none;
  display:grid;place-items:center;color:#0A0C0F;
}
.contact__seal svg{position:absolute;inset:0;width:100%;height:100%;animation:spin 34s linear infinite}
.contact__seal text{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.27em;fill:#0A0C0F;
}
.seal__arrow{
  position:relative;z-index:2;width:58px;height:58px;border-radius:50%;
  display:grid;place-items:center;background:#0A0C0F;color:var(--lime);
  font-size:22px;transition:transform .4s var(--ease),background .3s;
}
.contact__seal:hover .seal__arrow{transform:scale(1.08) rotate(45deg);background:#151A14}
.contact__mail-row{
  position:relative;z-index:2;
  display:flex;align-items:center;justify-content:space-between;gap:30px;
  margin-top:66px;padding:20px 0;border-top:1px solid rgba(10,12,15,.2);border-bottom:1px solid rgba(10,12,15,.2);
}
.contact__mail-row > span{font-family:var(--mono);font-size:8.5px;letter-spacing:.15em;color:#646A63;flex:none}
.contact__mail-row a{
  display:flex;align-items:center;gap:12px;
  font-family:var(--disp);font-size:clamp(1.25rem,2.8vw,2.35rem);font-weight:500;
  letter-spacing:-.045em;color:#0A0C0F;
  transition:opacity .3s;
}
.contact__mail-row a span{color:#0A0C0F;font-size:.75em;transition:transform .35s var(--ease)}
.contact__mail-row a:hover span{transform:translate(4px,-4px)}
.contact__grid{position:relative;z-index:2;display:grid;grid-template-columns:1.2fr .8fr 1fr;gap:40px;margin-top:46px}
.contact__item{padding-top:16px;border-top:1px solid rgba(10,12,15,.18)}
.contact__item > p:first-child{font-family:var(--mono);font-size:8.5px;letter-spacing:.14em;color:#6B716A;margin-bottom:13px}
.contact__item address,.contact__item a{font-size:12.5px;line-height:1.8;color:#141714}
.contact__item a{display:inline-flex;align-items:center;gap:7px;border-bottom:1px solid transparent;transition:border-color .3s}
.contact__item a:hover{border-color:#0A0C0F}
.contact__item a span{font-size:11px}
.contact__sub{margin-top:7px;font-family:var(--mono);font-size:8px;color:#7A8078}

/* ================= FOOTER ================= */
.site-footer{background:#05070A;padding:76px 0 26px;border-top:1px solid var(--line-soft)}
.footer__top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:70px}
.brand--footer .brand__mark{width:34px;height:34px}
.brand--footer .brand__type{font-size:24px}
.footer__tagline{margin-top:28px;font-family:var(--disp);font-size:clamp(1.5rem,2.4vw,2.15rem);font-weight:500;line-height:1.22;letter-spacing:-.05em;color:#E8EAE3}
.footer__desc{margin-top:16px;font-family:var(--mono);font-size:9px;line-height:1.9;letter-spacing:.03em;color:#8E9995;max-width:320px}
.footer__cols{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.footer__h{font-family:var(--mono);font-size:8px;letter-spacing:.16em;color:var(--lime);margin-bottom:18px}
.footer__cols a{display:block;margin-bottom:9px;font-size:12px;color:#9DA7A3;transition:color .3s}
.footer__cols a:hover{color:var(--lime)}
.footer__addr{font-size:11.5px;line-height:1.7;color:#8A9591;margin-top:4px}
.footer__edu{margin-top:15px;color:var(--lime)!important;font-family:var(--mono);font-size:8.5px!important;letter-spacing:.06em}
.footer__bottom{
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  margin-top:60px;padding-top:22px;border-top:1px solid var(--line-soft);
  font-family:var(--mono);font-size:8.5px;letter-spacing:.06em;color:#77827E;
}
.footer__tta{display:flex;align-items:center;gap:7px;color:#7A8581}
.footer__tta span{padding:2px 5px;border:1px solid rgba(200,255,77,.35);color:var(--lime);font-size:7px}
.footer__top-link{display:flex;align-items:center;gap:6px;color:#8B9692;transition:color .3s}
.footer__top-link:hover{color:var(--lime)}
.footer__top-link span{font-size:11px}

/* ================= LIGHTBOX ================= */
.lightbox{
  width:min(92vw,860px);max-height:92vh;padding:0;border:0;background:transparent;color:var(--text);
}
.lightbox::backdrop{background:rgba(3,5,7,.9);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.lightbox[open]{animation:fadeIn .3s ease}
.lightbox__inner{
  max-height:90vh;overflow:auto;padding:16px;background:#0B0F13;border:1px solid var(--line);
}
.lightbox__head{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:2px 2px 12px}
.lightbox__head p{font-family:var(--mono);font-size:9px;letter-spacing:.1em;color:#C8D0CC}
.lightbox__close{
  width:34px;height:34px;display:grid;place-items:center;border:1px solid var(--line);border-radius:50%;
  color:#DCE2DD;font-size:13px;transition:.3s;
}
.lightbox__close:hover{background:var(--lime);border-color:var(--lime);color:var(--ink)}
.lightbox img{width:100%;max-height:68vh;object-fit:contain;background:#fff}
.lightbox__note{padding:12px 2px 2px;font-family:var(--mono);font-size:8px;letter-spacing:.03em;color:#74807C}

/* ================= REVEAL / MOTION ================= */
.js .reveal{opacity:0;transform:translateY(30px);transition:opacity .95s var(--ease),transform .95s var(--ease)}
.js .reveal.is-in{opacity:1;transform:none}
.js .display.reveal{transform:translateY(36px)}
.js .biz.reveal{transform:translateY(34px)}
.js .biz.reveal.is-in{transform:none}
.js .biz.reveal:hover{transform:translateY(-5px)}
.principles .principle:nth-child(2),
.biz-grid .biz:nth-child(2),
.inside__grid .space:nth-child(2){transition-delay:.08s}
.principles .principle:nth-child(3),
.biz-grid .biz:nth-child(3),
.inside__grid .space:nth-child(3){transition-delay:.16s}
@media (prefers-reduced-motion:no-preference){
  .hero__title .line > span{will-change:transform}
  .reveal{will-change:opacity,transform}
}

@keyframes lineUp{to{transform:translateY(0)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes pulseDot{0%{box-shadow:0 0 0 0 rgba(200,255,77,.45)}70%{box-shadow:0 0 0 7px rgba(200,255,77,0)}100%{box-shadow:0 0 0 0 rgba(200,255,77,0)}}
@keyframes gridDrift{to{background-position:88px 88px,88px 88px}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes marquee{to{transform:translateX(-50%)}}
@keyframes dashMove{to{stroke-dashoffset:-120}}
@keyframes nodePulse{0%,100%{opacity:.45}50%{opacity:1}}
@keyframes camScan{0%{transform:translateY(26px);opacity:0}12%{opacity:.8}50%{transform:translateY(154px);opacity:.8}88%{opacity:.1}100%{transform:translateY(26px);opacity:0}}
@keyframes boxPulse{0%,100%{opacity:.55}50%{opacity:1}}
@keyframes recPulse{0%,100%{opacity:.3}50%{opacity:1}}
@keyframes vrWobble{0%,100%{transform:rotate(0deg)}50%{transform:rotate(4deg)}}
@keyframes tapRipple{0%{transform:scale(.35);opacity:0}18%{opacity:.55}60%{transform:scale(1.5);opacity:0}100%{opacity:0}}
@keyframes toastFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes scrollLine{0%{transform:translateX(-16px)}55%{transform:translateX(44px)}100%{transform:translateX(44px)}}
@keyframes browserScan{0%,100%{top:-4%;opacity:0}8%{opacity:.6}50%{top:102%;opacity:.6}58%{opacity:0}}
@keyframes clickPulse{0%{transform:scale(.7);opacity:0}20%{opacity:.9}70%{transform:scale(2.1);opacity:0}100%{opacity:0}}
@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes cardIn{from{opacity:0;transform:translateY(16px) scale(.985)}to{opacity:1;transform:none}}
@keyframes spaceScan{0%{top:0;opacity:0}10%{opacity:1}90%{opacity:1}100%{top:100%;opacity:0}}

/* ================= RESPONSIVE ================= */
@media (max-width:1240px){
  :root{--shell:calc(100vw - 72px)}
  .hero__inner{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}
  .hero__visual{max-width:540px}
  .about__grid{grid-template-columns:240px minmax(0,1fr)}
}
@media (max-width:1100px){
  .header__nav{gap:18px}
  .biz-grid{grid-template-columns:repeat(2,1fr)}
  .biz--ai,.biz--cctv,.biz--vr,.biz--edu,.biz--net{grid-column:auto}
  .biz--net{grid-column:span 2;min-height:340px}
  .biz--app{grid-column:span 2}
  .biz--vr,.biz--edu{min-height:390px}
  .biz--app .biz__app-visual{height:230px}
  .data__grid{grid-template-columns:300px minmax(0,1fr);gap:60px}
  .contact__seal{width:150px;height:150px}
}
@media (max-width:980px){
  .header__nav{display:none}
  .header__cta{margin-left:auto}
  .menu-toggle{display:block;margin-left:0}
  .header__inner{gap:16px}
  .hero{min-height:auto;padding-top:calc(var(--header-h) + 54px)}
  .hero__inner{grid-template-columns:1fr;padding-bottom:36px}
  .hero__copy{max-width:760px}
  .hero__visual{justify-self:center;max-width:480px;margin-top:28px}
  .hero__foot{padding-top:20px}
  .about__grid{grid-template-columns:1fr;gap:40px}
  .about__aside{position:static;display:flex;align-items:center;gap:28px;flex-wrap:wrap}
  .about__diagram{margin:0;width:120px;height:120px}
  .about__based{margin-left:auto;text-align:right}
  .about__text{grid-template-columns:1fr;gap:18px}
  .data__grid{grid-template-columns:1fr;gap:54px}
  .cert-panel{position:static;order:2;display:grid;grid-template-columns:minmax(240px,320px) 1fr;gap:40px;align-items:start;max-width:760px}
  .pipeline{order:1}
  .edu__grid{grid-template-columns:1fr;gap:30px}
  .edu__preview{max-width:720px;margin-inline:auto;width:100%}
  .float-tag--1{left:1%}
  .float-tag--2{right:1%}
  .float-tag--3{left:0}
  .portfolio__head{grid-template-columns:1fr;gap:28px}
  .portfolio__aside{justify-self:start;max-width:520px}
  .inside__grid{grid-template-columns:1fr 1fr}
  .inside__grid .space:last-child{grid-column:span 2;max-width:calc(50% - 8px);margin-inline:auto}
  .contact__top{grid-template-columns:1fr;gap:28px}
  .contact__seal{display:none}
  .contact__mail-row{flex-direction:column;align-items:flex-start;gap:10px;margin-top:42px}
  .contact__grid{grid-template-columns:1fr 1fr}
  .footer__top{grid-template-columns:1fr;gap:48px}
}
@media (max-width:760px){
  :root{--shell:calc(100vw - 40px);--header-h:72px}
  .pc-only{display:none}
  .header__cta{height:36px;padding:0 12px;font-size:8px}
  .header__cta .ico-arrow{width:11px;height:11px}
  .hero{padding-top:calc(var(--header-h) + 40px)}
  .hero__eyebrow{font-size:8.5px;letter-spacing:.14em;margin-bottom:22px}
  .hero__title{font-size:clamp(1.9rem,9.2vw,3.6rem);letter-spacing:-.055em}
  .hero__serif{font-size:1.5rem;margin-top:16px}
  .hero__lead{font-size:14px;line-height:1.78;margin-top:22px}
  .hero__actions{gap:20px;margin-top:28px}
  .btn{height:50px;padding:0 20px;font-size:12.5px}
  .hero__visual{max-width:390px;margin-top:18px}
  .hud--tr,.hud--bl{display:none}
  .hud{font-size:7px}
  .hero__foot{flex-direction:column;align-items:flex-start;gap:18px;padding-bottom:22px}
  .hero__stats{width:100%;justify-content:space-between;gap:10px}
  .hero__stats div{padding-left:12px}
  .hero__stats dt{font-size:19px}
  .hero__stats dd{font-size:8px;letter-spacing:.06em}
  .scroll-cue{display:none}
  .ticker{height:54px}
  .ticker__group{gap:24px;padding-right:24px}
  .ticker__group span{font-size:8.5px;letter-spacing:.14em}
  .section{padding:82px 0}
  .display{font-size:clamp(2.15rem,8.6vw,3.2rem);letter-spacing:-.05em}
  .section-head{grid-template-columns:1fr;gap:22px;margin-bottom:42px}
  .section-lead{justify-self:start;font-size:13px;max-width:520px;padding-bottom:0}
  .about__aside{gap:20px}
  .about__diagram{width:96px;height:96px}
  .about__based{margin-left:0;text-align:left}
  .about__text{margin-top:28px;padding-top:24px}
  .principles{grid-template-columns:1fr;margin-top:40px}
  .principle{padding:22px 0;border-right:0;border-bottom:1px solid var(--line)}
  .principle:last-child{border-bottom:0}
  .principle__no{display:none}
  .principle__en{margin-top:0}
  .biz-grid{grid-template-columns:1fr;gap:12px}
  .biz,.biz--vr,.biz--edu,.biz--net{grid-column:auto;min-height:360px;padding:22px}
  .biz--app{grid-column:auto;display:flex;min-height:auto;flex-direction:column;align-items:stretch}
  .biz__app-visual{height:220px;margin-top:10px}
  .biz__body h3{font-size:25px}
  .biz--app .biz__body h3{font-size:27px}
  .biz__en{font-size:7.5px;letter-spacing:.08em}
  .biz__visual{height:140px}
  .biz--vr .biz__visual,.biz--edu .biz__visual,.biz--net .biz__visual{height:120px}
  .viz__caption{font-size:7.5px}
  .cert-panel{grid-template-columns:1fr;gap:26px;max-width:420px}
  .cert-card{max-width:340px}
  .data__watermark{top:60px;opacity:.7}
  .pipe{grid-template-columns:42px 1fr;gap:14px;padding-left:30px;padding-bottom:34px}
  .pipe__no{font-size:26px}
  .pipe h3{font-size:21px}
  .pipe p{font-size:12.5px}
  .media__head{flex-direction:column;align-items:flex-start;gap:18px}
  .media__grid{grid-template-columns:1fr;margin-top:30px}
  .edu__copy .display{font-size:clamp(2.1rem,8.4vw,3rem)}
  .edu__lead{font-size:13.5px;margin-top:20px}
  .edu__meta{gap:16px;margin-top:24px}
  .edu__meta b{font-size:28px}
  .edu__meta span{font-size:8px}
  .edu__actions{gap:18px;margin-top:26px}
  .edu__preview{padding-top:12px}
  .float-tag--1,.float-tag--3{left:-2%}
  .float-tag--2,.float-tag--4{right:-2%}
  .float-tag{font-size:7px;padding:5px 9px}
  .browser__url{font-size:6.5px}
  .browser__live{display:none}
  .filters{gap:6px;margin:30px 0 22px}
  .filter{padding:7px 10px;font-size:8.5px}
  .vr-grid{grid-template-columns:1fr 1fr;gap:10px}
  .vr-card__no{font-size:40px}
  .vr-card__body{padding:11px 11px 12px}
  .vr-card__body b{font-size:11.5px}
  .vr-card__body > span:nth-child(2){font-size:7.5px}
  .vr-card__arrow{width:22px;height:22px;font-size:9px}
  .inside__grid{grid-template-columns:1fr;gap:30px}
  .inside__grid .space:last-child{grid-column:auto;max-width:none}
  .space__media img{aspect-ratio:16/10}
  .contact{padding:82px 0 54px}
  .contact__title{font-size:clamp(2.4rem,10.2vw,3.7rem)}
  .contact__mail-row a{font-size:clamp(1.05rem,5.2vw,1.55rem)}
  .contact__mail-row > span{font-size:7.5px}
  .contact__grid{grid-template-columns:1fr;gap:24px;margin-top:34px}
  .footer__cols{grid-template-columns:1fr 1fr;gap:26px}
  .footer__cols > div:last-child{grid-column:span 2}
  .footer__bottom{flex-direction:column;align-items:flex-start;gap:12px;margin-top:42px}
  .site-footer{padding-top:56px}
}
@media (max-width:560px){
  .header__cta{display:none}
  .menu-toggle{margin-left:auto}
  .brand__type{font-size:18px}
  .brand__mark{width:27px;height:27px}
  .hero__stats dd{max-width:80px}
  .vr-grid{grid-template-columns:1fr}
  .vr-card__visual{aspect-ratio:16/10}
  .vr-card__no{font-size:48px}
  .vr-card__body b{font-size:12.5px}
  .float-tag--2,.float-tag--4{display:none}
  .footer__cols{grid-template-columns:1fr 1fr}
  .footer__top{gap:36px}
  .contact__mail-row a{letter-spacing:-.05em}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
    scroll-behavior:auto!important;
  }
  .js .reveal{opacity:1;transform:none}
  .hero__title .line > span{transform:none}
  .reveal{opacity:1!important;transform:none!important}
}