/* =========================================================
   智遊創生 Geneowisen｜全站共用樣式
   純 HTML / CSS / JavaScript，可直接離線開啟
   ========================================================= */
:root {
  --blue: #0077c8;
  --blue-500: #1c77be;
  --blue-700: #075aa3;
  --blue-800: #064982;
  --blue-900: #063765;
  --blue-950: #031f3c;
  --yellow: #f5b335;
  --yellow-2: #ffd66f;
  --orange: #ff7a00;
  --ink: #17243a;
  --muted: #617087;
  --line: #d9e7f4;
  --surface: #fff;
  --surface-soft: #f4faff;
  --green: #73b52b;
  --purple: #7460b7;
  --red: #cd7372;
  --shadow-sm: 0 10px 30px rgba(3,48,88,.08);
  --shadow-md: 0 22px 60px rgba(3,48,88,.14);
  --shadow-lg: 0 35px 90px rgba(3,48,88,.20);
  --radius-sm: 14px;
  --radius: 24px;
  --radius-lg: 36px;
  --container: 1180px;
  --header-height: 78px;
  --ease: cubic-bezier(.2,.75,.2,1);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-height) + 22px); }
body { margin:0; color:var(--ink); background:#fff; font-family:"Noto Sans TC","Microsoft JhengHei","PingFang TC",Arial,sans-serif; line-height:1.75; overflow-x:hidden; }
body.is-menu-open, body.modal-open { overflow:hidden; }
img { display:block; max-width:100%; }
a { color:inherit; text-decoration:none; }
button,input,select,textarea { font:inherit; }
button { color:inherit; }
::selection { color:#fff; background:var(--blue); }
.visually-hidden { 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; }
.skip-link { position:fixed; z-index:9999; left:12px; top:-80px; padding:10px 16px; color:#fff; background:var(--blue-950); border-radius:10px; transition:top .2s ease; }
.skip-link:focus { top:12px; }
.container { width:min(var(--container),calc(100% - 40px)); margin-inline:auto; }
.section { position:relative; padding:104px 0; }
.section-soft { background:var(--surface-soft); }
.center { text-align:center; }

/* Global star field */
.constellation { position:relative; overflow:hidden; }
.star-field { position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.star-particle { position:absolute; width:var(--size); height:var(--size); opacity:var(--opacity); animation:twinkle var(--duration) ease-in-out infinite; animation-delay:var(--delay); }
.star-particle::before { content:""; position:absolute; inset:0; background:var(--star-color); clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%); filter:drop-shadow(0 0 8px color-mix(in srgb,var(--star-color),transparent 25%)); }
@keyframes twinkle { 0%,100%{transform:scale(.45) rotate(0deg);opacity:.25} 50%{transform:scale(1) rotate(35deg);opacity:1} }

.scroll-progress { position:fixed; z-index:1000; inset:0 0 auto; height:3px; pointer-events:none; }
.scroll-progress span { display:block; width:0; height:100%; background:linear-gradient(90deg,var(--yellow),var(--orange),var(--blue)); }

/* Header */
.site-header { position:sticky; z-index:900; top:0; height:var(--header-height); border-bottom:1px solid rgba(0,119,200,.10); background:rgba(255,255,255,.9); backdrop-filter:blur(18px); transition:box-shadow .25s ease,background .25s ease; }
.site-header.is-scrolled { box-shadow:0 12px 35px rgba(2,45,84,.10); background:rgba(255,255,255,.97); }
.nav-wrap { height:100%; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.brand { display:inline-flex; align-items:center; gap:10px; min-width:194px; }
.brand-mark { width:50px; height:50px; object-fit:contain; }
.brand-copy { display:grid; line-height:1.05; }
.brand-copy strong { color:var(--blue-700); font-size:1.22rem; letter-spacing:.05em; }
.brand-copy small { margin-top:5px; color:var(--orange); font-size:.54rem; font-weight:900; letter-spacing:.05em; }
.primary-nav { display:flex; align-items:center; gap:4px; }
.primary-nav>a:not(.button) { position:relative; display:inline-flex; align-items:center; min-height:44px; padding:0 14px; color:#263751; border-radius:999px; font-weight:800; font-size:.93rem; transition:color .2s,background .2s,transform .2s; }
.primary-nav>a:not(.button)::after { content:""; position:absolute; left:17px; right:17px; bottom:7px; height:2px; background:var(--yellow); transform:scaleX(0); transition:transform .25s var(--ease); }
.primary-nav>a:hover,.primary-nav>a.is-active { color:var(--blue-700); background:#edf7ff; }
.primary-nav>a:hover::after,.primary-nav>a.is-active::after { transform:scaleX(1); }
.nav-toggle { display:none; width:46px; height:46px; padding:0; border:1px solid var(--line); border-radius:14px; background:#fff; cursor:pointer; }
.nav-toggle span { display:block; width:21px; height:2px; margin:5px auto; background:var(--blue-900); transition:transform .25s,opacity .25s; }
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* Buttons */
.button { display:inline-flex; align-items:center; justify-content:center; gap:9px; min-height:50px; padding:0 22px; border:1px solid var(--blue); border-radius:999px; color:#fff; background:linear-gradient(135deg,var(--blue),var(--blue-700)); box-shadow:0 12px 28px rgba(0,119,200,.22); font-weight:900; cursor:pointer; transition:transform .25s var(--ease),box-shadow .25s,filter .25s; }
.button:hover { transform:translateY(-3px); box-shadow:0 18px 34px rgba(0,119,200,.28); filter:saturate(1.08); }
.button:active { transform:translateY(-1px); }
.button-small { min-height:42px; padding-inline:18px; font-size:.88rem; }
.button-yellow { color:var(--blue-950); border-color:var(--yellow); background:linear-gradient(135deg,var(--yellow-2),var(--yellow)); box-shadow:0 12px 28px rgba(245,179,53,.28); }
.button-ghost { color:var(--blue-800); background:#fff; border-color:#a8cfee; box-shadow:none; }
.button-ghost:hover { background:#eff8ff; box-shadow:0 12px 25px rgba(0,119,200,.10); }
.text-link { display:inline-flex; align-items:center; gap:8px; color:var(--blue-700); font-weight:900; }
.text-link span { transition:transform .2s; }
.text-link:hover span { transform:translate(3px,-3px); }

/* Typography */
.eyebrow { display:inline-flex; align-items:center; gap:10px; margin:0 0 14px; color:var(--blue-700); font-size:.8rem; font-weight:900; letter-spacing:.12em; text-transform:uppercase; }
.eyebrow::before { content:"✦"; color:var(--yellow); font-size:1.1rem; }
h1,h2,h3,h4,p { margin-top:0; }
h1,h2,h3,h4 { line-height:1.24; letter-spacing:-.025em; }
h1 { font-size:clamp(2.65rem,5.4vw,5.25rem); }
h2 { font-size:clamp(2rem,4vw,3.55rem); }
h3 { font-size:clamp(1.18rem,2vw,1.52rem); }
.section-heading { max-width:820px; margin-bottom:48px; }
.section-heading.center { margin-inline:auto; text-align:center; }
.section-heading.center .eyebrow { justify-content:center; }
.section-heading.split { max-width:none; display:flex; align-items:end; justify-content:space-between; gap:30px; }
.section-heading h2 { margin-bottom:16px; }
.section-heading p:last-child { color:var(--muted); font-size:1.04rem; }
.light,.section-blue { color:#fff; }
.section-blue { background:radial-gradient(circle at 15% 5%,rgba(93,187,255,.30),transparent 28%),radial-gradient(circle at 85% 80%,rgba(245,179,53,.22),transparent 32%),linear-gradient(135deg,var(--blue-950),var(--blue-800)); }
.section-blue .eyebrow,.light .eyebrow { color:#bfe7ff; }
.section-blue .section-heading p:last-child { color:rgba(255,255,255,.72); }

/* Hero */
.hero { min-height:calc(100vh - var(--header-height)); display:grid; align-items:center; padding:72px 0 90px; background:radial-gradient(circle at 80% 20%,rgba(245,179,53,.19),transparent 28%),radial-gradient(circle at 8% 84%,rgba(0,119,200,.13),transparent 30%),linear-gradient(180deg,#fbfdff,#eef8ff); }
.hero-grid { position:relative; z-index:2; display:grid; grid-template-columns:minmax(0,.92fr) minmax(480px,1.08fr); align-items:center; gap:54px; }
.hero-copy h1 { margin-bottom:24px; color:var(--blue-950); }
.hero-copy h1 em,.page-hero h1 em { display:block; color:var(--blue); font-style:normal; }
.hero-lead,.page-hero p { max-width:680px; color:#53647b; font-size:clamp(1rem,1.4vw,1.18rem); }
.hero-actions { display:flex; flex-wrap:wrap; gap:12px; margin:30px 0 25px; }
.trust-list { display:flex; flex-wrap:wrap; gap:10px 18px; margin:0; padding:0; list-style:none; color:#4f6077; font-size:.91rem; font-weight:750; }
.trust-list span { color:var(--yellow); }
.hero-proof { display:flex; flex-wrap:wrap; gap:10px; margin-top:24px; }
.hero-proof div { display:grid; min-width:118px; padding:10px 14px; border:1px solid rgba(0,119,200,.13); border-radius:16px; background:rgba(255,255,255,.7); box-shadow:var(--shadow-sm); }
.hero-proof strong { color:var(--blue-800); }
.hero-proof small { color:var(--muted); font-weight:700; }
.hero-visual { position:relative; min-height:535px; }
.hero-frame { position:absolute; inset:32px 0 28px 20px; overflow:hidden; border:1px solid rgba(0,119,200,.15); border-radius:34px; background:#fff; box-shadow:var(--shadow-lg); transform:rotate(1.2deg); transition:transform .45s var(--ease),box-shadow .45s; }
.hero-frame:hover { transform:rotate(0) translateY(-7px); box-shadow:0 45px 100px rgba(3,48,88,.25); }
.hero-frame img { width:100%; height:100%; object-fit:cover; }
.frame-shine { position:absolute; inset:-60% -25%; background:linear-gradient(115deg,transparent 42%,rgba(255,255,255,.72) 50%,transparent 58%); transform:translateX(-70%) rotate(6deg); transition:transform .8s var(--ease); }
.hero-frame:hover .frame-shine { transform:translateX(70%) rotate(6deg); }
.hero-badge { position:absolute; z-index:3; display:grid; padding:13px 17px; border:1px solid rgba(0,119,200,.16); border-radius:18px; background:rgba(255,255,255,.92); box-shadow:var(--shadow-md); backdrop-filter:blur(10px); }
.hero-badge strong { color:var(--blue-800); font-size:.95rem; }
.hero-badge small { color:var(--muted); font-size:.75rem; font-weight:750; }
.badge-one { left:-14px; bottom:20px; animation:floatY 4.6s ease-in-out infinite; }
.badge-two { right:-22px; top:40px; animation:floatY 5.2s ease-in-out infinite reverse; }
@keyframes floatY { 50%{transform:translateY(-10px)} }

/* Decorative book and gems */
.floating-book { position:absolute; z-index:4; left:-16px; top:78px; width:96px; height:72px; transform:rotate(-12deg); filter:drop-shadow(0 18px 22px rgba(4,52,94,.2)); animation:bookFloat 5s ease-in-out infinite; }
.floating-book span { position:absolute; top:12px; width:49px; height:48px; border:3px solid #fff; background:linear-gradient(145deg,var(--blue),var(--blue-700)); }
.floating-book span:first-child { left:0; border-radius:10px 2px 8px 12px; transform:skewY(12deg); }
.floating-book span:nth-child(2) { right:0; border-radius:2px 10px 12px 8px; transform:skewY(-12deg); background:linear-gradient(145deg,var(--yellow),#ff9f1a); }
.floating-book i { position:absolute; z-index:2; left:25px; top:29px; color:#fff; font-size:.61rem; font-style:normal; font-weight:900; letter-spacing:.08em; }
.floating-book.compact { transform:scale(.78) rotate(-10deg); left:2%; top:66%; }
@keyframes bookFloat { 0%,100%{transform:rotate(-12deg) translateY(0)} 50%{transform:rotate(-8deg) translateY(-13px)} }
.gem { width:54px; height:54px; clip-path:polygon(50% 0,86% 30%,72% 78%,50% 100%,28% 78%,14% 30%); box-shadow:inset 0 0 0 3px rgba(255,255,255,.65); }
.gem::after { content:""; position:absolute; inset:14% 24% 38%; clip-path:polygon(50% 0,100% 100%,0 100%); background:rgba(255,255,255,.55); }
.gem-blue { background:linear-gradient(145deg,#b8e7ff 0,#0b8ce2 45%,#073a86 100%); }
.gem-yellow { background:linear-gradient(145deg,#fff0a3 0,#ffc228 42%,#f07a00 100%); }
.hero-visual>.gem-blue { position:absolute; right:5px; bottom:60px; animation:gemFloat 4s ease-in-out infinite; }
.hero-visual>.gem-yellow { position:absolute; left:16%; top:2px; width:38px; height:38px; animation:gemFloat 3.5s ease-in-out infinite reverse; }
@keyframes gemFloat { 50%{transform:translateY(-12px) rotate(7deg)} }

.scroll-cue { position:absolute; z-index:3; left:50%; bottom:24px; display:grid; justify-items:center; gap:7px; color:var(--blue-800); font-size:.72rem; font-weight:900; letter-spacing:.1em; transform:translateX(-50%); }
.scroll-cue span { width:22px; height:34px; border:2px solid currentColor; border-radius:999px; }
.scroll-cue span::after { content:""; display:block; width:4px; height:7px; margin:6px auto 0; border-radius:5px; background:currentColor; animation:scrollDot 1.8s infinite; }
@keyframes scrollDot { 50%{transform:translateY(12px);opacity:.15} }

.signal-strip { color:#fff; background:linear-gradient(90deg,var(--blue-950),var(--blue-700)); }
.signal-grid { min-height:72px; display:grid; grid-template-columns:auto repeat(5,1fr); align-items:center; gap:12px; }
.signal-grid p { margin:0; color:#9ed8ff; font-size:.78rem; font-weight:900; letter-spacing:.12em; }
.signal-grid span { text-align:center; font-weight:850; }

/* Story cards */
.story-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.story-card { position:relative; min-height:300px; padding:30px; overflow:hidden; border:1px solid var(--line); border-radius:var(--radius); background:#fff; box-shadow:var(--shadow-sm); transition:transform .35s var(--ease),box-shadow .35s,border-color .35s; }
.story-card:hover { transform:translateY(-9px); border-color:#8ec8ed; box-shadow:var(--shadow-md); }
.story-card::after { content:""; position:absolute; width:140px; height:140px; right:-58px; bottom:-62px; border-radius:50%; background:radial-gradient(circle,rgba(0,119,200,.12),transparent 70%); }
.story-index { color:#a4b8c9; font-size:.78rem; font-weight:900; letter-spacing:.1em; }
.story-icon { display:grid; place-items:center; width:62px; height:62px; margin:28px 0 22px; border-radius:18px; color:#fff; font-size:1.7rem; font-weight:900; box-shadow:0 14px 25px rgba(4,63,110,.16); }
.story-icon-problem { background:linear-gradient(145deg,var(--red),#a44961); }
.story-icon-plan { background:linear-gradient(145deg,var(--blue),var(--blue-800)); }
.story-icon-success { background:linear-gradient(145deg,var(--yellow),#f07a00); }
.story-card p { color:var(--muted); }

/* Plan */
.plan-grid { position:relative; display:grid; grid-template-columns:repeat(3,1fr); gap:30px; margin:20px 0 46px; }
.plan-grid::before { content:""; position:absolute; top:38px; left:17%; right:17%; border-top:1px dashed rgba(255,255,255,.36); }
.plan-step { position:relative; z-index:1; padding:28px; text-align:center; border:1px solid rgba(255,255,255,.15); border-radius:26px; background:rgba(255,255,255,.07); backdrop-filter:blur(10px); transition:transform .3s,background .3s; }
.plan-step:hover { transform:translateY(-7px); background:rgba(255,255,255,.11); }
.step-ring { display:grid; place-items:center; width:76px; height:76px; margin:0 auto 22px; border:1px solid rgba(255,255,255,.35); border-radius:50%; background:rgba(255,255,255,.09); }
.step-ring span { display:grid; place-items:center; width:52px; height:52px; border-radius:50%; color:var(--blue-950); background:var(--yellow); font-size:1.3rem; font-weight:950; }
.plan-step p { color:rgba(255,255,255,.7); }
.plan-step small { color:#aadaff; font-weight:900; letter-spacing:.1em; }

/* Generic carousel */
.showcase-carousel,.featured-product-carousel { position:relative; border:1px solid rgba(0,119,200,.15); border-radius:var(--radius-lg); background:#fff; box-shadow:var(--shadow-lg); overflow:hidden; }
.showcase-viewport { position:relative; aspect-ratio:16/8.2; min-height:420px; }
.showcase-slide { position:absolute; inset:0; display:grid; grid-template-columns:1.25fr .75fr; opacity:0; visibility:hidden; transform:scale(1.02); transition:opacity .6s ease,transform .7s var(--ease),visibility .6s; }
.showcase-slide.is-active { opacity:1; visibility:visible; transform:scale(1); }
.showcase-slide>img { width:100%; height:100%; object-fit:cover; }
.showcase-copy { display:flex; flex-direction:column; justify-content:center; padding:44px; background:linear-gradient(145deg,#fff,#eff8ff); }
.showcase-copy>span { color:var(--orange); font-size:.76rem; font-weight:950; letter-spacing:.1em; }
.showcase-copy h3 { margin:12px 0 16px; color:var(--blue-900); font-size:clamp(1.5rem,3vw,2.5rem); }
.showcase-copy p { color:var(--muted); }
.showcase-copy a { align-self:flex-start; color:var(--blue-700); font-weight:900; }
.carousel-arrow { position:absolute; z-index:5; top:50%; display:grid; place-items:center; width:50px; height:50px; padding:0; border:1px solid rgba(255,255,255,.7); border-radius:50%; color:#fff; background:rgba(3,31,60,.5); backdrop-filter:blur(8px); font-size:2rem; cursor:pointer; transform:translateY(-50%); transition:background .2s,transform .2s; }
.carousel-arrow:hover { background:var(--blue-800); transform:translateY(-50%) scale(1.06); }
.carousel-prev { left:18px; }.carousel-next { right:18px; }
.carousel-footer { position:absolute; z-index:6; left:50%; bottom:16px; display:flex; align-items:center; gap:12px; padding:8px 12px; border-radius:999px; background:rgba(3,31,60,.64); backdrop-filter:blur(10px); transform:translateX(-50%); }
.carousel-dots { display:flex; gap:7px; }
.carousel-dot { width:8px; height:8px; padding:0; border:0; border-radius:999px; background:rgba(255,255,255,.45); cursor:pointer; transition:width .25s,background .25s; }
.carousel-dot.is-active { width:28px; background:var(--yellow); }
.carousel-play { display:grid; place-items:center; width:28px; height:28px; padding:0; border:1px solid rgba(255,255,255,.25); border-radius:50%; color:#fff; background:transparent; font-size:.72rem; cursor:pointer; }

/* Product mini preview */
.mini-product-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-bottom:34px; }
.mini-product { overflow:hidden; border:1px solid var(--line); border-radius:22px; background:#fff; box-shadow:var(--shadow-sm); transition:transform .35s var(--ease),box-shadow .35s,border-color .35s; }
.mini-product:hover { transform:translateY(-8px); border-color:#8ec8ed; box-shadow:var(--shadow-md); }
.mini-product img { width:100%; aspect-ratio:1; object-fit:cover; transition:transform .55s var(--ease); }
.mini-product:hover img { transform:scale(1.04); }
.mini-product div { padding:20px; }
.mini-product span { color:var(--orange); font-size:.73rem; font-weight:900; }
.mini-product h3 { margin:6px 0 8px; color:var(--blue-900); }
.mini-product p { margin:0; color:var(--muted); font-size:.88rem; }

/* Services preview */
.services-preview { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.service-card { position:relative; min-height:330px; padding:28px; overflow:hidden; border:1px solid var(--line); border-radius:24px; background:#fff; box-shadow:var(--shadow-sm); transition:transform .35s var(--ease),box-shadow .35s,border-color .35s; }
.service-card:hover { transform:translateY(-9px); border-color:#8ec8ed; box-shadow:var(--shadow-md); }
.service-card>span { position:absolute; top:18px; right:20px; color:#b2c5d5; font-weight:950; }
.service-card h3 { margin-top:88px; }
.service-card p,.service-card li { color:var(--muted); }
.service-card ul { padding-left:18px; }
.service-gem { position:absolute; top:28px; left:28px; width:50px; height:50px; }
.service-book { position:absolute; top:29px; left:27px; width:62px; height:48px; }
.service-book::before,.service-book::after { content:""; position:absolute; top:6px; width:32px; height:35px; border:3px solid #fff; background:var(--blue); box-shadow:0 8px 18px rgba(0,119,200,.18); }
.service-book::before { left:0; border-radius:9px 2px 7px 9px; transform:skewY(10deg); }
.service-book::after { right:0; border-radius:2px 9px 9px 7px; transform:skewY(-10deg); background:var(--yellow); }
.service-star { position:absolute; top:23px; left:29px; color:var(--yellow); font-size:3.5rem; filter:drop-shadow(0 8px 16px rgba(245,179,53,.22)); animation:twinkleSimple 2.8s infinite; }
@keyframes twinkleSimple { 50%{transform:scale(.8) rotate(15deg);opacity:.7} }

/* CTA */
.cta-panel { position:relative; display:flex; align-items:center; justify-content:space-between; gap:30px; overflow:hidden; padding:46px 50px; border-radius:32px; color:#fff; background:radial-gradient(circle at 82% 15%,rgba(245,179,53,.3),transparent 25%),linear-gradient(135deg,var(--blue-950),var(--blue-700)); box-shadow:var(--shadow-lg); }
.cta-panel::after { content:"✦"; position:absolute; right:18%; top:-34px; color:rgba(255,255,255,.13); font-size:11rem; }
.cta-panel>div,.cta-panel>a { position:relative; z-index:1; }
.cta-panel h2 { margin-bottom:12px; }
.cta-panel p:last-child { max-width:720px; margin-bottom:0; color:rgba(255,255,255,.72); }

/* Page hero */
.page-hero { position:relative; min-height:620px; display:grid; align-items:center; padding:80px 0; background:radial-gradient(circle at 78% 28%,rgba(245,179,53,.20),transparent 24%),linear-gradient(180deg,#fbfdff,#eef8ff); }
.page-hero-grid { position:relative; z-index:2; display:grid; grid-template-columns:minmax(0,.9fr) minmax(440px,1.1fr); align-items:center; gap:60px; }
.page-hero h1 { margin-bottom:24px; color:var(--blue-950); }

/* Contact page shared styles */
.contact-hero-art { min-height:430px; display:grid; place-items:center; }
.contact-orbit { position:relative; width:min(430px,90vw); aspect-ratio:1; display:grid; place-items:center; border:1px solid rgba(0,119,200,.14); border-radius:50%; background:radial-gradient(circle,#fff 0 35%,rgba(226,244,255,.7) 36% 60%,transparent 61%); box-shadow:var(--shadow-lg); }
.contact-orbit::before,.contact-orbit::after { content:""; position:absolute; border:1px dashed rgba(0,119,200,.32); border-radius:50%; animation:spin 18s linear infinite; }
.contact-orbit::before { inset:13%; }.contact-orbit::after { inset:26%; animation-direction:reverse; animation-duration:13s; }
.contact-orbit>img { width:150px; height:150px; z-index:2; }
.orbit-label { position:absolute; z-index:3; padding:7px 12px; border-radius:999px; color:var(--blue-900); background:#fff; box-shadow:var(--shadow-sm); font-size:.72rem; font-weight:950; }
.orbit-label.one{top:8%;left:42%}.orbit-label.two{right:1%;top:43%}.orbit-label.three{bottom:8%;left:41%}.orbit-label.four{left:0;top:43%}
.contact-orbit .gem-blue { position:absolute; right:16%; top:17%; width:40px; height:40px; }.contact-orbit .gem-yellow { position:absolute; left:17%; bottom:16%; width:45px; height:45px; }
@keyframes spin { to{transform:rotate(360deg)} }

.service-tabs { display:grid; grid-template-columns:260px 1fr; gap:28px; }
.service-tab-list { display:grid; align-content:start; gap:10px; }
.service-tab { min-height:58px; padding:0 20px; border:1px solid var(--line); border-radius:16px; text-align:left; color:var(--blue-900); background:#fff; font-weight:900; cursor:pointer; transition:transform .2s,background .2s,color .2s,border-color .2s; }
.service-tab:hover { transform:translateX(5px); border-color:#8ec8ed; }
.service-tab.is-active { color:#fff; border-color:var(--blue); background:linear-gradient(135deg,var(--blue),var(--blue-800)); box-shadow:0 12px 28px rgba(0,119,200,.2); }
.service-tab-panel { min-height:410px; padding:36px; border:1px solid var(--line); border-radius:28px; background:#fff; box-shadow:var(--shadow-md); }
.service-panel-head { display:flex; justify-content:space-between; gap:20px; align-items:start; margin-bottom:24px; }
.service-panel-head span { padding:6px 11px; border-radius:999px; color:var(--blue-800); background:#eaf6ff; font-size:.75rem; font-weight:900; }
.service-panel-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:24px; }
.service-panel-grid article { padding:20px; border:1px solid var(--line); border-radius:18px; background:#f8fcff; }
.service-panel-grid b { color:var(--blue-700); }
.service-panel-grid p { margin:7px 0 0; color:var(--muted); font-size:.88rem; }
.service-output { margin:24px 0 0; padding:18px 20px; border-left:4px solid var(--yellow); border-radius:0 14px 14px 0; color:#5e4a15; background:#fff7dc; }

.process-timeline { display:grid; grid-template-columns:repeat(5,1fr); gap:16px; }
.process-timeline article { position:relative; padding:26px 20px; border:1px solid rgba(255,255,255,.15); border-radius:22px; background:rgba(255,255,255,.07); }
.process-timeline b { display:grid; place-items:center; width:48px; height:48px; margin-bottom:20px; border-radius:50%; color:var(--blue-950); background:var(--yellow); }
.process-timeline p { margin:0; color:rgba(255,255,255,.7); }

.faq-list { max-width:880px; margin-inline:auto; display:grid; gap:12px; }
.faq-list details { border:1px solid var(--line); border-radius:18px; background:#fff; box-shadow:var(--shadow-sm); }
.faq-list summary { position:relative; padding:20px 56px 20px 22px; color:var(--blue-900); font-weight:900; cursor:pointer; list-style:none; }
.faq-list summary::-webkit-details-marker { display:none; }
.faq-list summary::after { content:"+"; position:absolute; right:22px; top:50%; color:var(--blue); font-size:1.5rem; transform:translateY(-50%); transition:transform .2s; }
.faq-list details[open] summary::after { transform:translateY(-50%) rotate(45deg); }
.faq-list details p { padding:0 22px 22px; margin:0; color:var(--muted); }

.contact-layout { display:grid; grid-template-columns:.85fr 1.15fr; gap:48px; align-items:start; }
.contact-info h2 { margin-bottom:18px; }
.contact-info>p { color:var(--muted); }
.contact-card { display:grid; gap:8px; margin:28px 0; padding:22px; border:1px solid var(--line); border-radius:22px; background:#fff; box-shadow:var(--shadow-sm); }
.contact-card span { color:var(--muted); font-size:.75rem; font-weight:900; letter-spacing:.1em; }
.contact-card a { color:var(--blue-700); font-size:1.18rem; font-weight:950; word-break:break-all; }
.copy-email { justify-self:start; padding:6px 11px; border:1px solid var(--line); border-radius:999px; color:var(--blue-800); background:#f4faff; font-size:.78rem; font-weight:900; cursor:pointer; }
.company-summary { padding:22px; border-radius:22px; color:#fff; background:linear-gradient(145deg,var(--blue-950),var(--blue-800)); }
.company-summary p { margin:0; color:rgba(255,255,255,.75); }
.social-links { display:flex; flex-wrap:wrap; gap:10px; margin-top:20px; }
.social-links a { padding:8px 13px; border:1px solid var(--line); border-radius:999px; color:var(--blue-800); background:#fff; font-size:.82rem; font-weight:900; transition:transform .2s,background .2s; }
.social-links a:hover { transform:translateY(-3px); background:#eaf6ff; }
.contact-form { padding:34px; border:1px solid var(--line); border-radius:28px; background:#fff; box-shadow:var(--shadow-md); }
.form-heading { display:flex; justify-content:space-between; align-items:center; gap:15px; margin-bottom:24px; }
.form-heading span { color:var(--blue-900); font-size:1.4rem; font-weight:950; }.form-heading small { color:var(--muted); }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.form-grid label { display:grid; gap:7px; }.form-grid label.full { grid-column:1/-1; }
.form-grid label>span { color:#40536d; font-size:.82rem; font-weight:900; }
.form-grid input,.form-grid select,.form-grid textarea { width:100%; border:1px solid #cfe0ee; border-radius:14px; padding:12px 14px; color:var(--ink); background:#fbfdff; outline:none; transition:border-color .2s,box-shadow .2s,background .2s; }
.form-grid input:focus,.form-grid select:focus,.form-grid textarea:focus { border-color:var(--blue); background:#fff; box-shadow:0 0 0 4px rgba(0,119,200,.1); }
.form-grid textarea { resize:vertical; }
.consent { display:flex; align-items:flex-start; gap:10px; margin:20px 0; color:var(--muted); font-size:.82rem; }
.form-status { margin:12px 0 0; color:var(--blue-800); font-weight:800; }

/* Footer */
.site-footer { padding:66px 0 22px; color:#fff; background:var(--blue-950); }
.footer-main { display:grid; grid-template-columns:1.8fr repeat(3,1fr); gap:42px; }
.footer-logo { min-width:0; margin-bottom:18px; }.footer-logo .brand-copy strong { color:#fff; }
.footer-brand p { max-width:440px; color:rgba(255,255,255,.62); }
.footer-column { display:grid; align-content:start; gap:9px; }
.footer-column h3 { margin-bottom:9px; color:#fff; font-size:.96rem; }
.footer-column a { color:rgba(255,255,255,.65); font-size:.88rem; transition:color .2s,transform .2s; }
.footer-column a:hover { color:var(--yellow); transform:translateX(3px); }
.footer-bottom { display:flex; justify-content:space-between; gap:20px; margin-top:46px; padding-top:20px; border-top:1px solid rgba(255,255,255,.1); color:rgba(255,255,255,.45); font-size:.78rem; }
.back-to-top { position:fixed; z-index:700; right:20px; bottom:20px; width:48px; height:48px; padding:0; border:1px solid rgba(255,255,255,.7); border-radius:50%; color:#fff; background:var(--blue-800); box-shadow:var(--shadow-md); cursor:pointer; opacity:0; visibility:hidden; transform:translateY(10px); transition:opacity .2s,visibility .2s,transform .2s; }
.back-to-top.is-visible { opacity:1; visibility:visible; transform:translateY(0); }

/* Modals */
.modal { position:fixed; z-index:1200; inset:0; display:grid; place-items:center; padding:24px; background:rgba(1,20,39,.68); backdrop-filter:blur(10px); opacity:0; visibility:hidden; transition:opacity .25s,visibility .25s; }
.modal.is-open { opacity:1; visibility:visible; }
.modal-dialog { position:relative; width:min(920px,100%); max-height:min(88vh,920px); overflow:auto; border-radius:28px; background:#fff; box-shadow:0 40px 100px rgba(0,0,0,.3); transform:translateY(20px) scale(.98); transition:transform .3s var(--ease); }
.modal.is-open .modal-dialog { transform:none; }
.modal-close { position:sticky; z-index:5; top:16px; float:right; margin:16px 16px -60px 0; width:42px; height:42px; border:0; border-radius:50%; color:#fff; background:rgba(3,31,60,.78); font-size:1.5rem; cursor:pointer; }
.modal-content { padding:34px; }

/* Reveal and tilt */
.reveal { opacity:0; transform:translateY(28px); transition:opacity .7s var(--ease),transform .7s var(--ease); transition-delay:var(--reveal-delay,0ms); }
.reveal.is-visible { opacity:1; transform:none; }
.tilt-card { transform-style:preserve-3d; }

@media (max-width:1080px) {
  .hero-grid,.page-hero-grid { grid-template-columns:1fr 1fr; }
  .services-preview { grid-template-columns:repeat(2,1fr); }
  .mini-product-grid { grid-template-columns:repeat(2,1fr); }
  .process-timeline { grid-template-columns:repeat(3,1fr); }
}
@media (max-width:900px) {
  :root { --header-height:70px; }
  .container { width:min(100% - 30px,var(--container)); }
  .section { padding:82px 0; }
  .nav-toggle { display:block; }
  .primary-nav { position:fixed; inset:var(--header-height) 0 auto; display:grid; gap:5px; padding:18px 20px 26px; border-bottom:1px solid var(--line); background:rgba(255,255,255,.98); box-shadow:0 18px 38px rgba(3,48,88,.12); opacity:0; visibility:hidden; transform:translateY(-10px); transition:opacity .2s,visibility .2s,transform .2s; }
  .primary-nav.is-open { opacity:1; visibility:visible; transform:none; }
  .primary-nav>a:not(.button) { justify-content:center; }
  .nav-cta { width:100%; margin-top:4px; }
  .hero { min-height:auto; padding:62px 0 95px; }
  .hero-grid,.page-hero-grid { grid-template-columns:1fr; }
  .hero-copy { text-align:center; }.hero-copy .eyebrow,.hero-copy .hero-actions,.hero-copy .trust-list,.hero-copy .hero-proof { justify-content:center; }
  .hero-lead { margin-inline:auto; }
  .hero-visual { min-height:470px; }
  .hero-frame { inset:18px 4% 25px; }
  .page-hero { min-height:auto; }.page-hero-grid>div:first-child { text-align:center; }.page-hero-grid .hero-actions { justify-content:center; }.page-hero p { margin-inline:auto; }
  .story-grid { grid-template-columns:1fr; }
  .plan-grid { grid-template-columns:1fr; }.plan-grid::before{display:none}
  .showcase-slide { grid-template-columns:1fr; }.showcase-viewport { aspect-ratio:auto; min-height:690px; }.showcase-slide>img { height:390px; }.showcase-copy { padding:34px; }
  .signal-grid { grid-template-columns:repeat(3,1fr); padding:16px 0; }.signal-grid p { grid-column:1/-1;text-align:center; }
  .section-heading.split { display:block; }.section-heading.split>p,.section-heading.split>.text-link { margin-top:16px; }
  .service-tabs { grid-template-columns:1fr; }.service-tab-list { grid-template-columns:repeat(2,1fr); }.service-tab:hover{transform:translateY(-2px)}
  .process-timeline { grid-template-columns:1fr 1fr; }
  .contact-layout { grid-template-columns:1fr; }
  .footer-main { grid-template-columns:1.5fr 1fr 1fr; }.footer-column:last-child{grid-column:2/4}
}
@media (max-width:640px) {
  .container { width:min(100% - 22px,var(--container)); }
  .section { padding:68px 0; }
  h1 { font-size:clamp(2.35rem,12vw,3.5rem); } h2 { font-size:clamp(1.85rem,9vw,2.75rem); }
  .brand { min-width:0; }.brand-mark{width:44px;height:44px}.brand-copy strong{font-size:1.05rem}.brand-copy small{font-size:.47rem}
  .hero-visual { min-height:350px; }.hero-frame{inset:10px 0 30px}.floating-book{transform:scale(.72) rotate(-12deg);left:-20px;top:30px}.hero-badge{padding:9px 12px}.badge-two{right:-5px;top:12px}.badge-one{left:3px;bottom:8px}
  .hero-proof div { min-width:96px; }
  .signal-grid { grid-template-columns:1fr 1fr; }.signal-grid span{font-size:.82rem}
  .services-preview,.mini-product-grid { grid-template-columns:1fr; }
  .showcase-viewport { min-height:590px; }.showcase-slide>img{height:300px}.showcase-copy{padding:26px 24px}.carousel-arrow{width:44px;height:44px}.carousel-prev{left:10px}.carousel-next{right:10px}
  .cta-panel { display:grid; padding:34px 25px; }
  .service-tab-list { display:flex; overflow-x:auto; padding-bottom:4px; scrollbar-width:none; }.service-tab-list::-webkit-scrollbar{display:none}.service-tab{flex:0 0 auto;min-height:50px}
  .service-tab-panel { padding:24px; }.service-panel-grid{grid-template-columns:1fr}
  .process-timeline { grid-template-columns:1fr; }
  .form-grid { grid-template-columns:1fr; }.form-grid label.full{grid-column:auto}.contact-form{padding:24px 18px}.form-heading{display:grid}
  .footer-main { grid-template-columns:1fr 1fr; }.footer-brand{grid-column:1/-1}.footer-column:last-child{grid-column:auto}.footer-bottom{display:grid}
  .modal { padding:10px; }.modal-content{padding:24px 18px}.modal-dialog{border-radius:22px;max-height:94vh}
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation-duration:.001ms!important; animation-iteration-count:1!important; scroll-behavior:auto!important; transition-duration:.001ms!important; }
}