@font-face {
  font-family: 'SichuanAir';
  src: url('../font/SacheonHangGong-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Pretendard';
  src: url('../font/Pretendard-Thin.otf') format('opentype');
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Pretendard';
  src: url('../font/Pretendard-ExtraLight.otf') format('opentype');
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Pretendard';
  src: url('../font/Pretendard-Light.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Pretendard';
  src: url('../font/Pretendard-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Pretendard';
  src: url('../font/Pretendard-Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Pretendard';
  src: url('../font/Pretendard-SemiBold.otf') format('opentype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Pretendard';
  src: url('../font/Pretendard-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Pretendard';
  src: url('../font/Pretendard-ExtraBold.otf') format('opentype');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Pretendard';
  src: url('../font/Pretendard-Black.otf') format('opentype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #f7fbff;
  --bg-soft: #eef6ff;
  --surface: rgba(255,255,255,0.72);
  --surface-strong: rgba(255,255,255,0.88);
  --text: #0d2340;
  --text-soft: #4d6788;
  --line: rgba(47, 103, 195, 0.12);
  --primary: #2f67c3;
  --primary-2: #63c7ff;
  --accent: #7a5cff;
  --accent-2: #2be0b8;
  --shadow: 0 18px 50px rgba(42, 93, 180, 0.12);
  --radius-xl: 32px;
  --radius-lg: 24px;
  --radius-md: 18px;
  --max: 1280px;
  --transition: 0.55s cubic-bezier(.22,1,.36,1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {margin: 0; font-family: 'Pretendard','SichuanAir', 'Noto Sans KR', sans-serif; color: var(--text); background: radial-gradient(circle at 15% 15%, rgba(99,199,255,0.32), transparent 22%), radial-gradient(circle at 85% 12%, rgba(122,92,255,0.16), transparent 18%), linear-gradient(180deg, #fbfdff 0%, #f3f8ff 40%, #f7fbff 100%); overflow-x: hidden; cursor: none;}
body.menu-open { overflow: hidden; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
.cursor-glow {position: fixed; width: 240px; height: 240px; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, rgba(99,199,255,0.22) 0%, rgba(99,199,255,0.06) 38%, transparent 70%); transform: translate(-50%, -50%); z-index: 1; mix-blend-mode: screen; transition: transform .08s linear;}
.progress-bar {position: fixed; top: 0; left: 0; width: 0; height: 4px; background: linear-gradient(90deg, var(--primary), var(--primary-2), var(--accent)); z-index: 200;}
.floating-shape {position: fixed; border-radius: 50%; filter: blur(6px); opacity: .45; pointer-events: none; z-index: 0; animation: floatShape 8s ease-in-out infinite;}
.shape-1 {top: 14vh; left: 3vw; width: 90px; height: 90px; background: linear-gradient(135deg, rgba(99,199,255,.5), rgba(43,224,184,.25));}
.shape-2 {top: 60vh; right: 5vw; width: 110px; height: 110px; background: linear-gradient(135deg, rgba(122,92,255,.35), rgba(99,199,255,.28)); animation-delay: -3s;}
.en {font-family: 'SichuanAir', sans-serif; letter-spacing: 0.02em;}
@keyframes floatShape {
  0%,100% { transform: translateY(0) translateX(0); }
  50% { transform: translateY(-18px) translateX(10px); }
}

/* G 커서 */
a, button, .glassCard {cursor: none !important;}
.gCursor {position: fixed; left: 0; top: 0; width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; pointer-events: none; z-index: 999999; background: rgba(255,255,255,0.18); border: 1px solid rgba(255,255,255,0.35); backdrop-filter: blur(14px) saturate(160%); -webkit-backdrop-filter: blur(14px) saturate(160%); box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), 0 8px 24px rgba(93,117,153,0.25); transform: translate(-50%, -50%) scale(1); transition: transform .18s ease, background .2s ease,  box-shadow .2s ease;}

.gText {font-family: 'SichuanAir', 'Pretendard', sans-serif; font-size: 20px; font-weight: 800; color: #10233f; letter-spacing: 0.02em; line-height: 1;}
.gCursor.is-hover {transform: translate(-50%, -50%) scale(1.2); background: rgba(255,255,255,0.28); box-shadow: inset 0 1px 0 rgba(255,255,255,0.8), 0 12px 30px rgba(93,117,153,0.35);}
.gCursor.is-click {transform: translate(-50%, -50%) scale(0.9);}
.gPointer {position: absolute; top: -2px; left: -2px; width: 14px; height: 14px; opacity: 0;transform: scale(0.6) rotate(-18deg); transform-origin: 50% 50%; transition: opacity .25s ease,  transform .25s ease; clip-path: polygon(0 0, 100% 0, 0 100%); background: rgba(133, 190, 255, 0.5); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 6px 14px rgba(80, 128, 200, 0.8);backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);}
.gPointer::after {content: ""; position: absolute; inset: 0; clip-path: polygon(0 0, 100% 0, 0 100%); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.55);}
.gCursor.is-link .gPointer {opacity: 1; transform: scale(1) rotate(0deg);}



.inner {width: min(calc(100% - 40px), var(--max)); margin: 0 auto; position: relative; z-index: 2;}
.btn, .hero-btn, .chip-btn {display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 22px; border: none; border-radius: 999px;   font-weight: 700; cursor: pointer; transition: transform .25s ease, box-shadow .25s ease, background .25s ease;}
.btn-ghost, .hero-btn.secondary {color: var(--text); background: rgba(255,255,255,.75); border: 1px solid rgba(47, 103, 195, 0.1); box-shadow: var(--shadow);}
.menu-toggle {display: none; width: 50px; height: 50px; border: 1px solid rgba(47, 103, 195, 0.1); background: rgba(255,255,255,.8); border-radius: 16px; box-shadow: var(--shadow); cursor: pointer; padding: 0;}
.menu-toggle span, .menu-toggle::before, .menu-toggle::after {content: ""; display: block; width: 22px; height: 2px; background: var(--text); border-radius: 999px;  margin: 0 auto; transition: var(--transition);}
.menu-toggle span { margin: 6px auto; }
.menu-toggle.active span { opacity: 0; }
.menu-toggle.active::before { transform: translateY(8px) rotate(45deg); }
.menu-toggle.active::after { transform: translateY(-8px) rotate(-45deg); }

.hero {position: relative; padding: 90px 0 40px; overflow: clip;}

.hero-grid {display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(420px, .95fr); gap: 42px; align-items: center; min-height: calc(100vh - 110px);}
.eyebrow {display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: 999px; background: rgba(255,255,255,.7); border: 1px solid rgba(47, 103, 195, 0.1); box-shadow: var(--shadow); color: var(--primary); font-weight: 700; font-size: .92rem; margin-bottom: 20px;}
.eyebrow::before {content: ""; width: 9px; height: 9px; border-radius: 50%; background: linear-gradient(135deg, var(--accent-2), var(--primary-2)); box-shadow: 0 0 0 6px rgba(43,224,184,.13);}
.glassHero {position: relative; overflow: hidden; padding: 100px 0 100px;
  background: radial-gradient(circle at 15% 18%, rgba(170, 220, 255, 0.55) 0%, rgba(170, 220, 255, 0) 26%), radial-gradient(circle at 82% 16%, rgba(196, 204, 255, 0.45) 0%, rgba(196, 204, 255, 0) 24%), radial-gradient(circle at 50% 82%, rgba(255, 255, 255, 0.96) 0%, rgba(255,255,255,0) 28%), linear-gradient(180deg, #f5f9ff 0%, #eef4fb 48%, #f8fbff 100%);}
.glassHero .inner {position: relative; width: min(1280px, calc(100% - 40px)); margin: 0 auto; z-index: 2;}
.glassOrb {position: absolute; border-radius: 50%; pointer-events: none; filter: blur(120px); opacity: 0.9;}
.glassHero .orb1 {top: -30px; left: -60px; width: 340px; height: 340px; background: rgba(156, 222, 255, 0.58);}
.glassHero .orb2 {top: 100px; right: -70px; width: 380px; height: 380px; background: rgba(202, 197, 255, 0.5);}
.glassHero .orb3 {bottom: -90px; left: 50%; width: 540px; height: 260px; transform: translateX(-50%); background: rgba(255,255,255,0.96); filter: blur(140px);}
.glassGrid {position: absolute; inset: 0; background-image:linear-gradient(rgba(255,255,255,0.32) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.32) 1px, transparent 1px); background-size: 42px 42px; opacity: 0.38; mask-image: linear-gradient(180deg, rgba(0,0,0,0.45), transparent 92%);}
.glassHeroTitle {margin: 0; line-height: 0.95; letter-spacing: -0.06em;}
.shineText {position: relative; display: inline-block; color: #0f233f; overflow: hidden; border-radius: 50px 50px 50px 0;}
.shineText::after {content: ""; position: absolute; top: 0; left: -120%; width: 60%; height: 100%; background: linear-gradient(120deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.0) 30%,  rgba(255,255,255,0.8) 48%, rgba(255,255,255,0.0) 60%, rgba(255,255,255,0) 100%); transform: skewX(-20deg);}
.shineText::after {animation: shineMove 2.8s cubic-bezier(.4,0,.2,1) infinite;}

@keyframes shineMove {
    0% {left: -100%;}
    50% {left: 100%;}
    100% {left: 100%;}
}
.glassHeroStage {position: relative; max-width: 1180px; height: 760px; margin: 60px auto 0; perspective: 1600px; transform-style: preserve-3d;}

.glassVideo {position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: center center; pointer-events: none;}
.glassCard {position: absolute; border-radius: 36px; cursor: pointer; position: absolute; overflow: hidden; border-radius: 36px; background: rgba(255, 255, 255, 0.16); border: 1px solid rgba(255, 255, 255, 0.42); box-shadow: inset 0 1px 0 rgba(255,255,255,0.7), inset 0 0 0 1px rgba(255,255,255,0.08),  0 24px 60px rgba(93, 117, 153, 0.16),  0 8px 20px rgba(93, 117, 153, 0.10); backdrop-filter: blur(26px) saturate(170%); -webkit-backdrop-filter: blur(26px) saturate(170%); will-change: transform; transition: transform .32s ease-out, box-shadow .32s ease-out;}
.glassCardInner {position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 36px; background: rgba(255, 255, 255, 0.16); border: 1px solid rgba(255, 255, 255, 0.42); box-shadow:inset 0 1px 0 rgba(255,255,255,0.7), inset 0 0 0 1px rgba(255,255,255,0.08), 0 24px 60px rgba(93, 117, 153, 0.16), 0 8px 20px rgba(93, 117, 153, 0.10); backdrop-filter: blur(26px) saturate(170%); -webkit-backdrop-filter: blur(26px) saturate(170%); will-change: transform; transition: transform .28s ease-out, box-shadow .28s ease-out;}
.glassCardInner::before { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background:linear-gradient( 135deg, rgba(255,255,255,0.55) 0%,rgba(255,255,255,0.22) 18%, rgba(255,255,255,0.06) 34%, rgba(255,255,255,0.02) 52%, rgba(255,255,255,0.18) 76%, rgba(255,255,255,0.34) 100%); mix-blend-mode: screen; opacity: 0.9;}

.glassCardInner::after { content: ""; position: absolute; left: 10px; right: 10px; top: 10px; height: 38%; border-radius: 26px; background: linear-gradient(180deg, rgba(255,255,255,0.38) 0%, rgba(255,255,255,0.16) 38%, rgba(255,255,255,0.03) 100%); z-index: 2; pointer-events: none;}
.glassCard:hover .glassCardInner {box-shadow: inset 0 1px 0 rgba(255,255,255,0.78), inset 0 0 0 1px rgba(255,255,255,0.12), 0 32px 72px rgba(93,117,153,0.20), 0 10px 24px rgba(93,117,153,0.12);}
.glassCardOverlay {position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 3; padding: 18px 18px 16px; border-radius: 24px; background: rgba(255,255,255,0.10); border: 1px solid rgba(255,255,255,0.22); box-shadow: inset 0 1px 0 rgba(255,255,255,0.32), 0 10px 24px rgba(25, 41, 67, 0.12); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); color: #fff;}
.glassCardOverlay em {display: block; font-style: normal; font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.78);}
.glassCardOverlay strong {display: block; font-size: clamp(24px, 2.2vw, 34px); line-height: 1.02; letter-spacing: -0.03em; font-weight: 800;}
.glassCardOverlay p {margin: 10px 0 0; font-size: 16px; line-height: 1.5; color: rgba(255,255,255,0.88);}
.glassCardLeft {left: 0; top: 150px; width: 300px; height: 420px; transform: translate3d(0,0,0) rotate(-11deg) scale(.94);  z-index: 1;}
.glassCardCenter {left: 50%; top: 20px; width: 470px; height: 620px; transform: translate3d(-50%,0,0) rotate(0deg) scale(1); z-index: 3;}
.glassCardRight {right: 0; top: 160px; width: 320px; height: 430px; transform: translate3d(0,0,0) rotate(11deg) scale(.94); z-index: 2;}
.glassCardCenter .glassCardInner {box-shadow:inset 0 1px 0 rgba(255,255,255,0.8), inset 0 0 0 1px rgba(255,255,255,0.12), 0 34px 80px rgba(93,117,153,0.20), 0 12px 28px rgba(93,117,153,0.14);}
.glassFloat {position: absolute; z-index: 4; padding: 14px 18px; border-radius: 12px; background: rgba(188 220 255 / 28%);  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.glassFloat span {color: #243750; font-size: 14px; font-weight: 800; letter-spacing: 0.04em;}
.glassFloatTop {top: 88px; right: 270px; animation: floatSoft 4.2s cubic-bezier(.4,0,.2,1) infinite;}
@keyframes floatSoft {
  0%   { transform: translateY(0); }
  30%  { transform: translateY(-10px); }
  60%  { transform: translateY(-14px); }
  100% { transform: translateY(0); }
}
.glassFloatBottom {left: 170px; bottom: 88px; animation: floatBounce 3.6s cubic-bezier(.5,0,.2,1) infinite;}

@keyframes floatBounce {
  0%   { transform: translateY(0); }
  20%  { transform: translateY(8px); }
  50%  { transform: translateY(-6px); }
  80%  { transform: translateY(6px); }
  100% { transform: translateY(0); }
}
.glassTitleWrap, .glassTitleStrong {position: relative; display: inline-block;}
.glassTitleBg {position: absolute; inset: -12px -18px; border-radius: 20px; background: rgba(255,255,255,0.18); border: 1px solid rgba(255,255,255,0.38); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%); box-shadow: inset 0 1px 0 rgba(255,255,255,0.7), 0 12px 30px rgba(120,140,180,0.18); z-index: 0;}
.glassTitleBg::after {content: ""; position: absolute; inset: 0; border-radius: 20px; background: linear-gradient(135deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.18) 20%, rgba(255,255,255,0.05) 45%, rgba(255,255,255,0.18) 70%, rgba(255,255,255,0.35) 100%); opacity: 0.7;}
.glassHeroIntro {max-width: 860px; margin: 0 auto; text-align: center; position: relative; z-index: 2;}
.glassHeroIntro span {display: block; font-size: 22px; font-weight: 700;}
.glassHeroTitle {margin: 10px 0 0; letter-spacing: -0.07em; line-height: 0.94; color: #10233f; display: inline-block;}
.glassHeroTitle span, .glassHeroTitle strong {display: block;}
.glassHeroTitle span {font-size: clamp(42px, 6vw, 86px); font-weight: 800; color: rgba(16, 35, 63, 0.78);}
.glassHeroTitle strong {font-size: clamp(52px, 10vw, 112px); font-weight: 900; color: #163747; text-shadow: 0 10px 35px rgba(255,255,255,0.38); letter-spacing: -0.15rem; padding: 10px; line-height: 1;}
.glassHeroDesc {max-width: 700px; margin: 10px auto 0; color: #5b6f89; font-size: 18px; line-height: 1.6; word-break: keep-all;}
.glassHeroBtns {display: flex; justify-content: center; flex-wrap: wrap; gap: 14px; margin-top: 40px;}
.glassBtn {display: inline-flex; align-items: center; justify-content: center; min-width: 180px; height: 56px; padding: 0 28px; border-radius: 999px; text-decoration: none; font-size: 16px; font-weight: 800; transition: transform .25s ease, box-shadow .25s ease, background .25s ease; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);}
.glassBtnPrimary {color: #0d1f39; background: rgba(255,255,255,0.58); border: 1px solid rgba(255,255,255,0.75); box-shadow:   inset 0 1px 0 rgba(255,255,255,0.82), 0 14px 34px rgba(126,145,179,0.18);}
.glassBtnGhost {color: #314761; background: rgba(255,255,255,0.26); border: 1px solid rgba(255,255,255,0.52); box-shadow:   inset 0 1px 0 rgba(255,255,255,0.65), 0 10px 26px rgba(126,145,179,0.12);}
.glassBtn:hover, .glassBtn:focus {transform: translateY(-3px);}
.glassHeroStage {position: relative; max-width: 1180px; height: 760px; margin: 40px auto 0; perspective: 1600px;}
.glassVideo {position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center center;}
.glassCard:hover {box-shadow: inset 0 1px 0 rgba(255,255,255,0.78), inset 0 0 0 1px rgba(255,255,255,0.12), 0 32px 72px rgba(93,117,153,0.20), 0 10px 24px rgba(93,117,153,0.12);}
.glow-ring {position: absolute; width: 560px; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(99,199,255,.16), rgba(122,92,255,.08), transparent 68%); animation: pulseRing 4.5s ease-in-out infinite;}

@keyframes pulseRing {
  0%,100% { transform: scale(1); opacity: .8; }
  50% { transform: scale(1.07); opacity: 1; }
}

.dashboard-card {position: relative; width: min(100%, 560px); padding: 24px; border-radius: 34px; background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.72)); border: 1px solid rgba(47,103,195,.1); box-shadow: 0 30px 70px rgba(47,103,195,.14); backdrop-filter: blur(20px); transform-style: preserve-3d; transition: transform .3s ease;}
.dashboard-header {display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 22px;}
.window-dots {display: flex; gap: 8px;}
.window-dots span {width: 10px; height: 10px; border-radius: 50%; background: linear-gradient(135deg, var(--primary-2), var(--accent)); opacity: .78;}
.window-chip {display: inline-flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 999px; color: var(--text-soft); background: rgba(239, 246, 255, .95); font-size: .88rem; border: 1px solid rgba(47,103,195,.08);}
.visual-grid {display: grid; grid-template-columns: 1.15fr .85fr; gap: 16px;}
.service-card, .case-card, .contact-card {border-radius: 26px; background: rgba(255,255,255,.75); border: 1px solid rgba(47,103,195,.08); box-shadow: var(--shadow);}


.floating-card {position: absolute; padding: 18px 20px; min-width: 220px; backdrop-filter: blur(18px); animation: floatCard 5s ease-in-out infinite; z-index: 2;}
.floating-card.top {top: 90px; left: -24px; animation-delay: -.8s;}
.floating-card.bottom {right: -14px; bottom: 90px; animation-delay: -2.1s;}

@keyframes floatCard {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}

.floating-card strong {display: block; font-size: 1.25rem; letter-spacing: -0.04em; margin-bottom: 6px;}
.floating-card p {margin: 0; color: var(--text-soft); line-height: 1.6; font-size: .92rem;}
.scroll-cue {display: inline-flex; align-items: center; gap: 12px; margin-top: 28px; color: var(--text-soft); font-size: .93rem;}
.scroll-wheel {width: 30px; height: 48px; border-radius: 999px; border: 1px solid rgba(47,103,195,.24); position: relative; background: rgba(255,255,255,.52);}
.scroll-wheel::before {content: ""; position: absolute; left: 50%; top: 10px; width: 6px; height: 10px; border-radius: 999px; background: linear-gradient(180deg, var(--primary), var(--accent)); transform: translateX(-50%); animation: wheelMove 1.5s ease-in-out infinite;}

@keyframes wheelMove {
  0% { opacity: 0; transform: translate(-50%, 0); }
  30% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, 12px); }
}

section {position: relative; padding: 110px 0; }
.section-head {display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 34px;}
.section-head h2 {margin: 0; font-size: clamp(2rem, 4vw, 2.5rem); letter-spacing: -0.05em; line-height: 1.3;}
.section-head p {margin: 0; max-width: 520px; color: var(--text-soft); line-height: 1.8;}
.feature-strip {display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px;}
.feature-item {padding: 26px; border-radius: 28px; background: rgba(255,255,255,.78); border: 1px solid rgba(47,103,195,.08); box-shadow: var(--shadow); transition: transform .3s ease, box-shadow .3s ease;}
.feature-item:hover { transform: translateY(-8px); box-shadow: 0 24px 44px rgba(47,103,195,.16); }
.feature-num {display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 14px; background: linear-gradient(135deg, rgba(99,199,255,.22), rgba(122,92,255,.18)); font-weight: 800; color: var(--primary); margin-bottom: 18px;}

.feature-item h3, .service-card h3, .case-card h3, .contact-card h3 { margin: 0 0 12px; letter-spacing: -0.03em; }
.feature-item p, .service-card p, .case-card p, .contact-card p { margin: 0; line-height: 1.8; color: var(--text-soft); }
.services-grid {display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px; margin-top: 18px;}
.service-card {position: relative; padding: 26px; min-height: 320px; overflow: hidden; transition: transform .35s ease, box-shadow .35s ease;}
.service-card:hover { transform: translateY(-10px) rotate(-.3deg); box-shadow: 0 26px 50px rgba(47,103,195,.18); }
.service-icon {width: 62px; height: 62px; border-radius: 20px; display: grid; place-items: center; background: linear-gradient(135deg, rgba(99,199,255,.18), rgba(122,92,255,.14)); margin-bottom: 22px; position: relative; overflow: hidden;}
.service-icon img {width: 30px;}
.service-tags {display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px;}
.service-tags span {display: inline-flex; padding: 8px 12px; border-radius: 999px; background: rgba(239,246,255,.95); color: var(--primary); font-size: .83rem; font-weight: 700;}
.service-bg-word {position: absolute; right: 18px; bottom: 10px; font-size: clamp(2.5rem, 6vw, 5rem); font-weight: 900; letter-spacing: -.06em; color: rgba(47,103,195,.05); pointer-events: none;}

.timeline-card, .showcase-card {padding: 28px; border-radius: 30px; background: rgba(255,255,255,.78); border: 1px solid rgba(47,103,195,.08); box-shadow: var(--shadow);}
.timeline-list {display: grid; gap: 16px; margin-top: 24px;}
.timeline-item {display: grid; grid-template-columns: 72px 1fr; gap: 16px; align-items: center; padding: 18px; border-radius: 22px; background: linear-gradient(180deg, rgba(245,249,255,.95), rgba(255,255,255,.88)); border: 1px solid rgba(47,103,195,.08);}
.timeline-step {display: grid; place-items: center; width: 72px; height: 72px; border-radius: 22px; background: linear-gradient(135deg, rgba(99,199,255,.22), rgba(122,92,255,.18)); color: var(--primary); font-weight: 800; font-size: 1.1rem;}
.timeline-item h3 { margin: 0 0 8px; }
.timeline-item p { margin: 0; color: var(--text-soft); line-height: 1.75; }

.cases-grid {display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px;}
.case-card {overflow: hidden; padding: 0; transition: transform .3s ease, box-shadow .3s ease;}
.case-card:hover { transform: translateY(-8px); box-shadow: 0 24px 46px rgba(47,103,195,.18); }
.case-thumb {position: relative; aspect-ratio: 16 / 11; overflow: hidden; background-size: cover; background-position: center;}
.case-thumb1 {background: url(../img/it_01.png) no-repeat 0 0; background-size: 100%;}
.case-thumb2 {background: url(../img/it_02.png) no-repeat 0 0; background-size: 100%;}
.case-thumb3 {background: url(../img/it_03.png) no-repeat 0 0; background-size: 100%;}
.case-thumb::after {content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(12,29,55,0) 10%, rgba(12,29,55,.45) 100%); opacity: .85;}
.case-body { padding: 24px; }
.case-kind {display: inline-flex; padding: 8px 12px; border-radius: 999px; font-size: .82rem; color: var(--primary); background: rgba(239,246,255,.95); font-weight: 700; margin-bottom: 14px;}
.case-meta {display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px;}
.case-meta span {padding: 8px 12px; border-radius: 999px; background: rgba(247,251,255,.95); color: var(--text-soft); font-size: .82rem; border: 1px solid rgba(47,103,195,.08);}
.parallax-section {padding: 140px 0; overflow: hidden;}
.parallax-card {position: relative; padding: 40px; border-radius: 34px; background:linear-gradient(135deg, rgba(47,103,195,.92), rgba(122,92,255,.9)), radial-gradient(circle at top left, rgba(255,255,255,.18), transparent 30%); color: #fff; box-shadow: 0 28px 70px rgba(63, 84, 206, 0.28); overflow: hidden;}
.parallax-card::before {content: ""; position: absolute; border-radius: 50%; background: rgba(255,255,255,.08);}
.parallax-card::before { width: 280px; height: 280px; top: -120px; right: -70px; }
.parallax-card::after { width: 180px; height: 180px; bottom: -80px; left: -40px; }
.parallax-card h2 {margin: 0 0 16px; font-size: clamp(2rem, 5vw, 3rem); letter-spacing: -0.05em; line-height: 1.03; max-width: 780px;}
.parallax-card p {margin: 0; max-width: 700px; line-height: 1.85; color: rgba(255,255,255,.82);}
.marquee {display: flex; gap: 18px; overflow: hidden; margin-top: 30px; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);}
.marquee-track {display: flex; gap: 18px; min-width: max-content; animation: marquee 22s linear infinite;}
.marquee span {display: inline-flex; align-items: center; gap: 10px; padding: 14px 18px; border-radius: 999px; background: rgba(255,255,255,.12); color: rgba(255,255,255,.92); backdrop-filter: blur(8px); white-space: nowrap;}
.marquee span::before {content: ""; width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,.8);}

@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* .contact-grid {display: grid; grid-template-columns: .95fr 1.05fr; gap: 18px; align-items: stretch;} */
.contact-grid h2 {font-size: clamp(1.8rem, 5vw, 3rem);}
.contact-card {padding: 28px; min-height: 100%;}
.contact-list {display: grid; gap: 14px; margin-top: 22px;}
.contact-item {display: grid; grid-template-columns: 96px 1fr; gap: 14px; padding: 16px 18px; border-radius: 20px; background: linear-gradient(180deg, rgba(245,249,255,.95), rgba(255,255,255,.88)); border: 1px solid rgba(47,103,195,.08);}
.contact-item strong { color: var(--primary); }
.contact-form {display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; margin-top: 20px;}
.field {display: grid; gap: 8px;}
.field.full { grid-column: 1 / -1; }
.field label {font-size: .92rem; font-weight: 700; color: var(--text-soft);}
.field input, .field textarea, .field select {width: 100%; border: 1px solid rgba(47,103,195,.1); background: rgba(255,255,255,.86); border-radius: 18px; min-height: 56px; padding: 0 18px; color: var(--text); font: inherit; outline: none; transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;}
.field textarea {min-height: 180px; padding: 16px 18px; resize: vertical;}
.field input:focus, .field textarea:focus, .field select:focus {border-color: rgba(47,103,195,.36); box-shadow: 0 0 0 5px rgba(99,199,255,.12); transform: translateY(-1px);}
.footer {padding: 34px 0 44px; color: var(--text-soft);}
.footer-wrap {display: flex; justify-content: space-between; gap: 16px; padding-top: 24px; border-top: 1px solid rgba(47,103,195,.08); flex-wrap: wrap;}
.reveal {opacity: 0; transform: translateY(40px); transition: opacity .8s ease, transform .8s ease;}
.reveal.is-visible {opacity: 1; transform: translateY(0);}
.tilt-card {will-change: transform; transform-style: preserve-3d;}
.field select {appearance: none; background: url("../img/arrow_xs.svg") no-repeat right 18px center; background-size: 12px; padding-right: 44px;}

.timeline-item.is-hidden {display: none;}
.timeline-more {margin-top: 16px; text-align: center;}
.timeline-more button {padding: 10px 18px; border-radius: 999px; border: 1px solid #ccc; background: #fff; cursor: pointer; font-size: 14px;}





@media (max-width: 1180px) {
  .glassHeroStage {max-width: 760px; height: 980px;}
  .glassCardLeft {left: 0; top: 380px;}
  .glassCardCenter {top: 0; width: 430px; height: 560px;}
  .glassCardRight {right: 0; top: 450px;}
  .glassFloatTop {top: 120px; right: 80px;}
  .glassFloatBottom {left: 100px; bottom: 120px;}
  .hero-grid, .timeline-wrap, .contact-grid { grid-template-columns: 1fr; }
  .hero-visual { min-height: auto; }
  .feature-strip, .services-grid, .cases-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .hero-meta { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .floating-card.top { left: 0; }
  .floating-card.bottom { right: 0; }



}

@media (max-width: 920px) {
  .glassHero {padding: 90px 0 72px;}
  .glassHeroDesc {font-size: 16px;}
  .glassHeroStage {height: auto; display: grid; gap: 16px; margin-top: 42px;}
  .glassCard {position: relative; width: 100%; height: 360px; left: auto; right: auto; top: auto; transform: none !important;}
  .glassCardCenter {height: 460px;}
  .glassFloat {position: static; display: inline-flex; justify-content: center; width: 100%;}
  .menu-toggle { display: inline-grid; place-items: center; }
  
  .visual-grid, .feature-strip, .services-grid, .cases-grid, .contact-form { grid-template-columns: 1fr; }
  .hero-meta { grid-template-columns: 1fr; max-width: 100%; }
  .section-head { align-items: start; flex-direction: column; }
  .hero { padding-top: 56px; }
  .hero-grid { min-height: auto; }
  .hero-visual { padding-top: 10px; }
  .dashboard-card { padding: 18px; }
  .floating-card { position: static; margin-top: 14px; animation: none; }
  .glow-ring { width: 400px; }

  .mainHero {padding: 90px 0 70px;}
  .glassFloatTop, .glassFloatBottom {display: none;}
}

@media (max-width: 767px) {
  .glassHero .inner {width: calc(100% - 32px);}
  .glassHero {padding: 72px 0 56px;}
  .glassHeroTitle span {font-size: clamp(34px, 9vw, 52px);}
  .glassHeroTitle strong {font-size: clamp(42px, 17vw, 68px); line-height: 0.98;}
  .glassHeroBtns {flex-direction: column;}
  .glassBtn {width: 100%;}
  .glassCard {height: 300px; border-radius: 26px;}
  .glassCardCenter {height: 380px;}
  .glassCardOverlay {left: 20px; right: 20px; bottom: 20px;}
  .glassCardOverlay strong {font-size: 26px;}

  .mainHero .inner {width: calc(100% - 32px);}
  .mainHero {padding: 72px 0 60px;}
  .heroTitle {font-size: clamp(34px, 11vw, 56px);}
  .heroDesc {font-size: 16px;}
  .heroBtn {width: 100%;}
  .heroVisual {min-height: auto;}

}



@media (max-width: 640px) {
  .inner { width: min(calc(100% - 28px), var(--max)); }
  section { padding: 84px 0; }
  .service-card, .timeline-card, .showcase-card, .contact-card { padding: 22px; }
  .timeline-item, .contact-item { grid-template-columns: 1fr; }
  .timeline-step { display: none; }
  .main-panel { min-height: 300px; }
  .panel-title { left: 20px; right: 20px; max-width: none; }
  .dashboard-header { flex-wrap: wrap; }
  .cursor-glow, .floating-shape { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
}


@media (pointer: coarse) {
  body {cursor: auto;}
  .gCursor {display: none;}
}