:root {
  --ice-ink: #101b22;
  --ice-blue: #b9d6e3;
  --ice-line: rgba(90, 122, 138, .22);
  --ice-glass: rgba(244, 250, 252, .68);
  --ice-yellow: #ffd43b;
  --pointer-x: 0;
  --pointer-y: 0;
}

body { background: #edf3f5; color: var(--ice-ink); }
.site-header { border-color: rgba(74, 104, 119, .1); background: rgba(238, 246, 248, .48); backdrop-filter: blur(22px) saturate(115%); }
.site-header.is-scrolled { background: rgba(241, 248, 250, .86); box-shadow: 0 12px 40px rgba(31, 53, 64, .08); }
.site-logo { display: none; }
.site-brand-copy { gap: 1px; }
.site-brand-copy strong { font-size: 14px; letter-spacing: .14em; }
.site-brand-copy small { font-size: 8px; letter-spacing: .04em; }
.desktop-nav a:hover, .desktop-nav a.is-active, .header-login:hover { color: #0f607a; }
.desktop-nav a.is-active::after { background: #274c5b; height: 1px; }

.button { position: relative; overflow: hidden; border-radius: 0; letter-spacing: .04em; clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px)); }
.button::before { content: ""; position: absolute; inset: 0; background: linear-gradient(112deg, transparent 24%, rgba(255,255,255,.46) 48%, transparent 72%); transform: translateX(-130%); transition: transform .72s cubic-bezier(.16,1,.3,1); }
.button:hover::before { transform: translateX(130%); }
.button-primary, .button-small { border-color: #183744; background: rgba(17,40,50,.94); box-shadow: 0 12px 28px rgba(18, 42, 53, .13), inset 0 1px rgba(255,255,255,.1); }
.button-primary:hover, .button-small:hover { background: linear-gradient(145deg, #244653, #102630); box-shadow: 0 20px 42px rgba(19, 55, 70, .28); }
.button-secondary { border-color: rgba(63, 103, 121, .18); background: rgba(239, 247, 249, .28); color: #183746; backdrop-filter: blur(16px); }
.button-secondary:hover { border-color: #66b3ca; background: rgba(246, 252, 253, .84); box-shadow: 0 13px 34px rgba(39, 81, 99, .13); }

.hero-section { min-height: 100svh; padding-top: var(--header-height); background: #eaf2f5; isolation: isolate; }
.hero-section::after { content: ""; position: absolute; z-index: 0; inset: auto 0 0; height: 24%; background: linear-gradient(transparent, rgba(237,245,247,.98)); pointer-events: none; }
.hero-layout { display: block; min-height: calc(100svh - var(--header-height)); }
.hero-copy { position: relative; z-index: 10; width: min(560px, 48vw); padding: clamp(110px, 17vh, 175px) 0 110px; }
.hero-kicker { color: #496571; font-size: 10px; letter-spacing: .28em; text-transform: uppercase; }
.hero-kicker span { width: 22px; height: 1px; border-radius: 0; background: #5f7f8c; box-shadow: none; transform: none; }
.hero-copy h1 { max-width: 520px; margin-top: 25px; color: #101b22; font-family: Inter, "PingFang SC", "Microsoft YaHei", sans-serif; font-size: clamp(48px, 4.7vw, 70px); font-weight: 520; line-height: 1.1; letter-spacing: -.065em; text-shadow: 0 2px 0 rgba(255,255,255,.4); }
.hero-copy h1 em { color: #285466; font-style: normal; }
.hero-copy h1 em::after { display: none; }
.hero-description { max-width: 420px; margin-top: 28px; color: #4f6671; font-size: 14px; letter-spacing: .05em; line-height: 1.9; }
.hero-actions { margin-top: 34px; }
.hero-actions .button { min-width: 118px; padding: 12px 20px; font-size: 12px; }
.hero-service { display: none; }
.hero-service > span { color: #1a718b; }

.island-environment { position: absolute; z-index: 0; inset: 0; overflow: hidden; pointer-events: none; perspective: 1200px; }
.island-sky-glow { position: absolute; inset: 0; background: radial-gradient(circle at 23% 20%, rgba(255,255,255,.98), transparent 42%), linear-gradient(118deg, rgba(255,255,255,.55), transparent 44%); animation: sky-breathe 8s ease-in-out infinite alternate; }
.island-world { position: absolute; right: -1vw; top: -1%; width: min(80vw, 1390px); transform: translate3d(calc(var(--pointer-x) * -8px), calc(var(--pointer-y) * -5px), 0) scale(1.03); transform-origin: 66% 48%; filter: saturate(.72) contrast(1.06) drop-shadow(0 50px 70px rgba(35,54,65,.19)); animation: island-hover 7s ease-in-out infinite; will-change: transform; }
.island-world img { display: block; width: 100%; height: auto; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 18%, #000 100%); mask-image: linear-gradient(90deg, transparent 0, #000 18%, #000 100%); }
.island-mist { position: absolute; width: 130%; height: 30%; left: -15%; border-radius: 50%; filter: blur(24px); opacity: .78; }
.island-mist-back { bottom: 4%; background: radial-gradient(ellipse, rgba(255,255,255,.92), rgba(215,231,237,.35) 55%, transparent 72%); animation: mist-drift 16s ease-in-out infinite alternate; }
.island-mist-front { bottom: -8%; background: radial-gradient(ellipse, #f7fbfc 15%, rgba(224,237,241,.8) 52%, transparent 74%); animation: mist-drift 21s ease-in-out infinite alternate-reverse; }
.island-signal { display: none; }
.signal-one { right: 29%; top: 46%; animation: signal-route-a 6.8s cubic-bezier(.45,0,.2,1) infinite; }
.signal-two { right: 17%; top: 37%; animation: signal-route-b 8.4s cubic-bezier(.45,0,.2,1) 2.3s infinite; }
.island-frost { display: none; }
.frost-particle { position: absolute; width: var(--size); height: var(--size); background: rgba(255,255,255,.78); transform: rotate(45deg); box-shadow: 0 0 7px rgba(190,224,236,.6); animation: frost-fall var(--duration) linear var(--delay) infinite; }

.island-interface { display: none; }
.island-interface .scene-ribbons, .island-interface .scene-orbit { opacity: .22; }
.island-interface .delivery-engine, .island-interface .scene-card { border-color: rgba(101,137,151,.18); background: rgba(245,251,252,.72); box-shadow: 0 24px 65px rgba(27,60,74,.14); backdrop-filter: blur(18px) saturate(120%); }
.island-interface .delivery-engine { transform: translate(-38%, -43%) scale(.78); }
.island-interface .scene-card-payment { left: 7%; top: 83px; }
.island-interface .scene-card-stock { right: -2%; top: 173px; }
.island-interface .scene-card-delivery { right: 5%; bottom: 64px; }
.hero-feature-bar { display: none; }
.hero-feature-bar article { min-height: auto; padding: 8px 15px; }
.hero-feature-bar article > span { display: none; }
.hero-feature-bar article > div { gap: 2px; }
.hero-feature-bar strong { color: #294652; font-size: 10px; font-weight: 600; letter-spacing: .08em; }
.hero-feature-bar small { font-size: 8px; opacity: .7; }
.hero-feature-bar article + article { border-color: rgba(102,134,148,.14); }
.hero-feature-bar article > span { border-radius: 3px 12px 3px 12px; background: rgba(212,232,239,.72); color: #17647c; }

.service-dock { display: none; }
.service-dock a:hover { background: rgba(255,255,255,.8); color: #0e647e; }
.service-dock svg { color: #176b84; }
.solution-section, .capabilities-section, .workflow-section, .security-section { position: relative; background: linear-gradient(180deg, #f3f8f9, #fff); }
.capability-grid, .delivery-panel, .security-checks li { border-color: var(--ice-line); background: rgba(247,251,252,.82); box-shadow: 0 20px 50px rgba(28,61,74,.07); }
.section-heading > span, .section-label { color: #176b83; }
.site-footer { background: #0d1b22; }

.island-intro { background: #e9f2f5 !important; color: #12242d; }
.island-intro .intro-particles, .island-intro .intro-noise, .island-intro .intro-aurora, .island-intro .intro-stage, .island-intro .intro-bottomline { opacity: 0 !important; pointer-events: none; }
.island-intro-sky { position: absolute; inset: 0; background: radial-gradient(circle at 28% 18%, #fff 0, rgba(255,255,255,.5) 35%, transparent 60%), linear-gradient(#e6f0f4, #cbdde4); }
.island-intro-world { position: absolute; z-index: 3; left: 50%; top: 50%; width: min(105vw, 1750px); transform: translate(-38%, 24%) scale(.88); filter: saturate(.78) contrast(1.03) drop-shadow(0 55px 80px rgba(32,51,61,.22)); animation: intro-island-rise 6.2s cubic-bezier(.16,.82,.2,1) forwards; }
.island-intro-world img { width: 100%; height: auto; display: block; }
.island-intro-mist { position: absolute; z-index: 5; left: -20%; bottom: -15%; width: 140%; height: 48%; border-radius: 50%; filter: blur(30px); }
.island-intro-mist.mist-a { background: radial-gradient(ellipse, #fff 8%, rgba(224,237,242,.94) 55%, transparent 74%); animation: intro-mist-a 8s ease-in-out infinite alternate; }
.island-intro-mist.mist-b { bottom: 2%; background: radial-gradient(ellipse, rgba(255,255,255,.8), transparent 68%); animation: intro-mist-b 11s ease-in-out infinite alternate-reverse; }
.island-intro-caption { position: absolute; z-index: 8; left: clamp(28px, 7vw, 120px); bottom: clamp(70px, 12vh, 150px); display: grid; gap: 13px; opacity: 0; animation: intro-caption 1.3s ease 2.5s forwards; }
.island-intro-caption span { color: #57727e; font-size: 11px; letter-spacing: .28em; }
.island-intro-caption strong { max-width: 700px; color: #10242e; font-family: "Noto Serif SC", "Songti SC", SimSun, serif; font-size: clamp(38px, 5vw, 72px); font-weight: 500; line-height: 1.15; letter-spacing: .06em; white-space: nowrap; }
.island-intro-caption .mobile-caption-break { display: none; }
.island-intro .intro-topline { z-index: 12; color: #33515e; }
.island-intro .intro-system { display: none; }
.island-intro .intro-skip { border-color: rgba(45,83,99,.2); background: rgba(255,255,255,.34); color: #1d4454; backdrop-filter: blur(12px); }
.island-intro.is-leaving { clip-path: inset(0 0 100% 0); transition: clip-path 1.1s cubic-bezier(.76,0,.24,1); }

@keyframes island-hover { 0%,100% { transform: translate3d(calc(var(--pointer-x) * -8px), calc(var(--pointer-y) * -5px - 8px), 0) scale(1.03) rotate(.08deg); } 50% { transform: translate3d(calc(var(--pointer-x) * -8px), calc(var(--pointer-y) * -5px + 8px), 0) scale(1.035) rotate(-.12deg); } }
@keyframes mist-drift { from { transform: translate3d(-3%, 0, 0) scale(1); } to { transform: translate3d(4%, -7px, 0) scale(1.06); } }
@keyframes sky-breathe { from { opacity: .76; transform: scale(1); } to { opacity: 1; transform: scale(1.04); } }
@keyframes frost-fall { 0% { opacity: 0; transform: translate3d(0,-12vh,0) rotate(45deg); } 12% { opacity: .75; } 80% { opacity: .24; } 100% { opacity: 0; transform: translate3d(var(--drift),105vh,0) rotate(225deg); } }
@keyframes signal-route-a { 0%,18%,100% { opacity:0; transform:translate3d(-150px,80px,0) scale(.4); } 25% {opacity:1} 65% {opacity:1;transform:translate3d(45px,-35px,0) scale(1)} 82% {opacity:0;transform:translate3d(135px,-55px,0) scale(.45)} }
@keyframes signal-route-b { 0%,15%,100% { opacity:0; transform:translate3d(-110px,110px,0) scale(.4); } 24% {opacity:1} 68% {opacity:1;transform:translate3d(70px,25px,0) scale(1)} 84% {opacity:0;transform:translate3d(130px,-20px,0) scale(.5)} }
@keyframes intro-island-rise { 0% { opacity:0; transform:translate(-38%,43%) scale(.75); filter:blur(14px) saturate(.5); } 22% {opacity:1} 72%,100% {opacity:1;transform:translate(-38%,-47%) scale(1.02);filter:blur(0) saturate(.78) contrast(1.03) drop-shadow(0 55px 80px rgba(32,51,61,.22));} }
@keyframes intro-mist-a { from { transform:translateX(-4%) scale(1); } to { transform:translateX(4%) scale(1.07); } }
@keyframes intro-mist-b { from { transform:translateX(3%); } to { transform:translateX(-5%) translateY(-12px); } }
@keyframes intro-caption { from { opacity:0; transform:translateY(22px); } to { opacity:1; transform:translateY(0); } }

@media (max-width: 1100px) {
  .island-world { right: -22vw; width: 100vw; opacity: .86; }
  .hero-copy { max-width: 520px; }
}
@media (max-width: 800px) {
  .hero-section { min-height: 100svh; }
  .hero-layout { min-height: 100svh; }
  .hero-copy { width: 100%; padding: 85px 0 0; text-align: left; }
  .hero-copy h1 { margin-top: 18px; font-size: clamp(45px, 12vw, 58px); line-height: 1.08; }
  .hero-description { width: 85%; margin-top: 22px; line-height: 1.75; }
  .hero-actions { justify-content: flex-start; }
  .island-world { top: 43%; right: -34%; width: 145vw; opacity: .92; }
  .island-world img { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 16%); mask-image: linear-gradient(180deg, transparent 0, #000 16%); }
  .hero-feature-bar { display: none; }
  .island-intro-world { width: 170vw; left: 52%; }
  .island-intro-caption { bottom: 90px; }
  .island-intro-caption strong { max-width: min(86vw, 520px); font-size: clamp(40px, 12vw, 54px); line-height: 1.18; white-space: normal; }
}
@media (prefers-reduced-motion: reduce) {
  .island-world, .island-mist, .island-sky-glow, .island-signal, .frost-particle { animation: none !important; }
}
