/* 艾薇緹娜有限公司 — v4 樣式
   方向：程式畫的動態系統圖為主視覺、思源宋體特粗標題、慢速極光、深色優先＋淺色版。
   Dials：VARIANCE 7 / MOTION 6 / DENSITY 4 */
:root{
  --bg:#07090c; --bg-2:#0c1015; --bg-3:#11161c; --ink:#f2f4f6; --ink-2:#aab2bd; --ink-3:#6e7783;
  --line:rgba(255,255,255,.08); --line-2:rgba(255,255,255,.16);
  --g1:#2fd694; --g2:#22c1c3; --g3:#3b82f6; --on-g:#06110c;
  --glow:rgba(47,214,148,.35); --aurora-op:.22; --grain-op:.06;
  --serif:'Noto Serif TC','Songti TC',serif; --sans:'Manrope','Noto Sans TC',-apple-system,'PingFang TC',sans-serif; --mono:ui-monospace,Menlo,monospace;
  color-scheme:dark;
}
:root[data-theme="light"]{
  --bg:#f7f8f7; --bg-2:#ffffff; --bg-3:#eef1f0; --ink:#0f1417; --ink-2:#4b555f; --ink-3:#7a848e;
  --line:rgba(15,20,23,.09); --line-2:rgba(15,20,23,.18);
  --g1:#0f9d68; --g2:#0e8f95; --g3:#2563eb; --on-g:#ffffff;
  --glow:rgba(15,157,104,.22); --aurora-op:.16; --grain-op:.04;
  color-scheme:light;
}
*{box-sizing:border-box} html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none} p{margin:0} img{max-width:100%;display:block}
.wrap{max-width:1240px;margin:0 auto;padding:0 28px}

/* 氛圍 */
.aurora{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.aurora i{position:absolute;width:60vw;height:60vw;border-radius:50%;filter:blur(100px);opacity:var(--aurora-op);mix-blend-mode:screen;animation:drift 22s ease-in-out infinite alternate}
:root[data-theme="light"] .aurora i{mix-blend-mode:multiply}
.aurora i:nth-child(1){background:var(--g1);left:-20vw;top:-30vw}
.aurora i:nth-child(2){background:var(--g2);right:-25vw;top:-20vw;animation-duration:28s}
.aurora i:nth-child(3){background:var(--g3);left:20vw;bottom:-45vw;animation-duration:34s;opacity:calc(var(--aurora-op) * .8)}
@keyframes drift{from{transform:translate(0,0) scale(1)}to{transform:translate(8vw,6vw) scale(1.15)}}
.grain{position:fixed;inset:0;pointer-events:none;z-index:60;opacity:var(--grain-op);background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence baseFrequency='.9' numOctaves='2'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .5 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}

/* Nav */
.nav{position:sticky;top:0;z-index:40;backdrop-filter:blur(14px);background:color-mix(in srgb,var(--bg) 70%,transparent);border-bottom:1px solid var(--line)}
.nav .wrap{height:64px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:-.01em}
.logo .mark{width:30px;height:30px;color:var(--ink)}
.links{display:flex;gap:28px;font-size:14px;color:var(--ink-2)} .links a:hover{color:var(--ink)}
.nav-right{display:flex;align-items:center;gap:10px}
.theme-toggle{width:36px;height:36px;border-radius:8px;border:1px solid var(--line-2);background:transparent;color:var(--ink);cursor:pointer;display:grid;place-items:center;font-size:14px}
.nav-toggle{display:none;background:none;border:0;color:var(--ink);font-size:22px;cursor:pointer}
@media (max-width:860px){.links{display:none}.nav-toggle{display:block}}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 18px;border-radius:8px;font-weight:700;font-size:14px;border:1px solid transparent;transition:transform .15s,background .15s,border-color .15s;cursor:pointer;white-space:nowrap}
.btn:active{transform:scale(.98)}
.btn-p{background:var(--g1);color:var(--on-g)} .btn-p:hover{filter:brightness(1.08)}
.btn-s{border-color:var(--line-2);color:var(--ink);background:transparent} .btn-s:hover{border-color:var(--g1);color:var(--g1)}

/* Type */
.kicker{font-family:var(--mono);font-size:12px;letter-spacing:.16em;color:var(--g1);text-transform:uppercase;margin-bottom:22px}
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.16em;color:var(--ink-3);text-transform:uppercase}
h1{font-family:var(--serif);font-weight:900;font-size:clamp(40px,5.4vw,68px);line-height:1.12;letter-spacing:-.01em;margin:0}
h2{font-family:var(--serif);font-weight:900;font-size:clamp(30px,3.6vw,48px);line-height:1.15;margin:10px 0 0}
h1 em,h2 em{font-style:normal;white-space:nowrap;background:linear-gradient(90deg,var(--g1),var(--g2));-webkit-background-clip:text;background-clip:text;color:transparent}
h1 .w{display:inline-block;opacity:0;transform:translateY(.6em) rotate(2deg);animation:rise .9s cubic-bezier(.16,1,.3,1) forwards}
@keyframes rise{to{opacity:1;transform:none}}
.lead{margin-top:22px;font-size:18px;color:var(--ink-2);max-width:46ch;opacity:0;animation:fade 1s .7s forwards}
.ctas{margin-top:30px;display:flex;gap:12px;flex-wrap:wrap;opacity:0;animation:fade 1s .9s forwards}
@keyframes fade{to{opacity:1}}
.section-sub{margin-top:14px;color:var(--ink-2);font-size:17px;max-width:60ch}

/* Hero */
.hero{position:relative;padding:88px 0 64px}
.hero .wrap{position:relative;z-index:1}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.hero-solo h1{max-width:22ch}
@media (max-width:900px){.hero-grid{grid-template-columns:1fr}}

/* 系統圖（SVG 共用） */
.diagram{position:relative;width:100%;max-width:600px;margin-left:auto}
.diagram svg,.mini svg{width:100%;height:auto;display:block;overflow:visible}
.node{fill:var(--bg-2);stroke:var(--line-2);stroke-width:1}
.node.core{stroke:var(--g1);stroke-width:1.5;filter:drop-shadow(0 0 18px var(--glow))}
.lbl{font-family:var(--sans);font-size:14px;font-weight:700;fill:var(--ink);letter-spacing:.02em}
.sub{font-family:var(--mono);font-size:11px;fill:var(--ink-3)}
.wire{fill:none;stroke:var(--line-2);stroke-width:1.2}
.flow{fill:none;stroke:var(--g1);stroke-width:2;stroke-dasharray:14 22;stroke-linecap:round;animation:dash 2.4s linear infinite}
@keyframes dash{to{stroke-dashoffset:-72}}
.pulse{fill:var(--g1);animation:pulse 2.4s ease-out infinite}
@keyframes pulse{0%{r:3;opacity:1}100%{r:14;opacity:0}}
.ring{fill:none;stroke:var(--g1);stroke-opacity:.35;animation:spin 18s linear infinite;transform-origin:center;stroke-dasharray:2 10}
@keyframes spin{to{transform:rotate(360deg)}}
.tick{font-family:var(--mono);font-size:11px;fill:var(--g1);opacity:0;animation:blink 6s infinite}
.tick.t2{animation-delay:2s}.tick.t3{animation-delay:4s}
@keyframes blink{0%,10%{opacity:0}15%,40%{opacity:1}50%,100%{opacity:0}}
.float{animation:floaty 7s ease-in-out infinite}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.bar{fill:color-mix(in srgb,var(--g1) 18%,transparent);stroke:var(--g1);stroke-width:1;transform-origin:bottom;animation:grow 1.4s cubic-bezier(.16,1,.3,1) both}
@keyframes grow{from{transform:scaleY(0)}}
.cell{fill:var(--bg-2);stroke:var(--line)} .cell.on{fill:color-mix(in srgb,var(--g1) 22%,transparent);stroke:var(--g1)}
.cell.on.blink{animation:cellblink 3s infinite} @keyframes cellblink{0%,100%{opacity:1}50%{opacity:.35}}
.dot{fill:var(--g1)} .dot.mv{animation:move 4s linear infinite} @keyframes move{to{offset-distance:100%}}

/* 面板（格線＋掃描線） */
.panel{position:relative;aspect-ratio:4/3;border:1px solid var(--line-2);border-radius:16px;background:linear-gradient(180deg,color-mix(in srgb,var(--ink) 3%,transparent),transparent);overflow:hidden}
.panel::before{content:"";position:absolute;inset:0;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:32px 32px;mask:radial-gradient(60% 60% at 50% 50%,#000 30%,transparent 100%)}
.panel .scan{position:absolute;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--g1),transparent);top:0;animation:scan 5s linear infinite;opacity:.7}
@keyframes scan{to{top:100%}}
.panel svg{position:absolute;inset:0;width:100%;height:100%;padding:36px}
.panel .view{position:absolute;inset:0;opacity:0;transition:opacity .35s}
.panel .view.on{opacity:1}
.chip{fill:var(--bg-2);stroke:var(--line-2)} .chip.on{stroke:var(--g1);filter:drop-shadow(0 0 14px var(--glow))}

/* 數字帶 */
.band{position:relative;z-index:1;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--ink) 2%,transparent)}
.band .wrap{display:grid;grid-template-columns:repeat(4,1fr)}
.stat{padding:30px 24px;border-right:1px solid var(--line)} .stat:last-child{border-right:0}
.stat b{display:block;font-family:var(--serif);font-weight:900;font-size:40px;line-height:1;letter-spacing:-.02em}
.stat b small{font-family:var(--sans);font-size:18px;color:var(--g1);margin-left:4px}
.stat span{display:block;margin-top:8px;font-size:13px;color:var(--ink-2)}
@media (max-width:900px){.band .wrap{grid-template-columns:1fr 1fr}.stat:nth-child(2){border-right:0}.stat:nth-child(-n+2){border-bottom:1px solid var(--line)}}

/* Sections */
section{padding:112px 0;position:relative;z-index:1}
.section-soft{background:color-mix(in srgb,var(--ink) 2.5%,var(--bg))}

/* 服務清單＋面板 */
.svc{margin-top:56px;display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.svc-list{display:grid}
.svc-item{padding:22px 0;border-top:1px solid var(--line);display:grid;grid-template-columns:44px 1fr;gap:16px;cursor:pointer;transition:opacity .2s}
.svc-item:last-child{border-bottom:1px solid var(--line)}
.svc-item .n{font-family:var(--mono);font-size:12px;color:var(--ink-3);padding-top:6px}
.svc-item h3{margin:0;font-size:20px;font-weight:800;letter-spacing:-.01em}
.svc-item p{margin:6px 0 0;color:var(--ink-2);font-size:15px;max-width:44ch}
.svc-item.on h3{color:var(--g1)}
.svc-list:hover .svc-item:not(:hover){opacity:.45}
@media (max-width:900px){.svc{grid-template-columns:1fr}}

/* 卡片 */
.grid{display:grid;gap:16px;margin-top:48px} .grid-2{grid-template-columns:repeat(2,1fr)} .grid-3{grid-template-columns:repeat(3,1fr)}
.card{position:relative;background:var(--bg-2);border:1px solid var(--line);border-radius:16px;padding:30px;overflow:hidden;transition:border-color .2s,transform .2s}
.card:hover{border-color:var(--g1);transform:translateY(-2px)}
.card::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(400px circle at var(--mx,50%) var(--my,50%),color-mix(in srgb,var(--g1) 10%,transparent),transparent 45%);opacity:0;transition:opacity .25s}
.card:hover::after{opacity:1}
.card h3{margin:0 0 8px;font-size:18px;font-weight:800} .card p{color:var(--ink-2);font-size:15px}
.card .tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.pill{display:inline-block;font-size:12px;padding:3px 9px;border-radius:999px;border:1px solid var(--line-2);color:var(--ink-2)}
.pill.g{border-color:var(--g1);color:var(--g1)}
.card-accent{background:linear-gradient(135deg,color-mix(in srgb,var(--g1) 16%,var(--bg-2)),var(--bg-2));border-color:color-mix(in srgb,var(--g1) 40%,var(--line))}
@media (max-width:900px){.grid-3{grid-template-columns:1fr 1fr}} @media (max-width:640px){.grid-2,.grid-3{grid-template-columns:1fr}}

/* 方法列 */
.rows{margin-top:48px;border-top:1px solid var(--line)}
.row{display:grid;grid-template-columns:56px 1fr;gap:20px;padding:26px 0;border-bottom:1px solid var(--line)}
.row .n{font-family:var(--mono);font-size:12px;color:var(--g1);padding-top:5px}
.row h3{margin:0 0 6px;font-size:19px;font-weight:800} .row p{color:var(--ink-2);font-size:15px;max-width:64ch}

/* 案例 */
.case{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--bg-2);margin-top:20px}
.case-media{position:relative;padding:32px;border-right:1px solid var(--line);display:flex;align-items:center;background:linear-gradient(180deg,color-mix(in srgb,var(--ink) 3%,transparent),transparent);min-height:320px}
.case-media::before{content:"";position:absolute;inset:0;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:32px 32px;mask:radial-gradient(60% 60% at 50% 50%,#000 20%,transparent 100%)}
.case-media .mini{position:relative;width:100%}
.case-media .shot{position:relative;width:100%;border:1px solid var(--line-2);border-radius:12px;overflow:hidden}
.case-body{padding:34px;display:flex;flex-direction:column;gap:12px}
.case-body h3{margin:0;font-family:var(--serif);font-weight:900;font-size:22px;line-height:1.3}
.case-body p{color:var(--ink-2);font-size:15px}
.status{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:11px;letter-spacing:.06em;padding:4px 10px;border-radius:999px;border:1px solid var(--line-2);color:var(--ink-2);width:fit-content}
.status.live{border-color:var(--g1);color:var(--g1)} .status.live::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--g1);box-shadow:0 0 10px var(--g1)}
.detail{display:grid;gap:12px;margin-top:6px}
.detail div{display:grid;grid-template-columns:128px 1fr;gap:12px;font-size:14px;line-height:1.55;padding-top:10px;border-top:1px solid var(--line)}
.detail b{color:var(--g1);font-weight:700;white-space:nowrap}
.detail span{color:var(--ink-2)}
.facts{display:flex;gap:26px;flex-wrap:wrap;margin-top:6px}
.facts b{display:block;font-family:var(--serif);font-weight:900;font-size:24px;line-height:1} .facts span{font-size:12px;color:var(--ink-3)}
@media (max-width:860px){.case{grid-template-columns:1fr}.case-media{border-right:0;border-bottom:1px solid var(--line)}}

/* 平台列 */
.logos{display:flex;flex-wrap:wrap;gap:18px 34px;align-items:center;margin-top:36px}
.logos span{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--ink-3)}
.logos img{height:18px;width:18px;opacity:.7}

/* 表單 */
.form{display:grid;gap:16px;max-width:520px}
.field{display:grid;gap:6px} .field label{font-size:14px;font-weight:700}
.field input,.field textarea{padding:12px 14px;border-radius:8px;border:1px solid var(--line-2);background:var(--bg-2);color:var(--ink);font:inherit;font-size:15px}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--g1);box-shadow:0 0 0 3px color-mix(in srgb,var(--g1) 25%,transparent)}
.field .hint{font-size:12px;color:var(--ink-3)}
.kv{border-top:1px solid var(--line)}
.kv div{display:grid;grid-template-columns:110px 1fr;gap:16px;padding:14px 0;border-bottom:1px solid var(--line);font-size:15px}
.kv div span:first-child{color:var(--ink-3);font-size:13px;padding-top:2px}

/* CTA */
.cta{position:relative;overflow:hidden;border:1px solid var(--line-2);border-radius:20px;padding:56px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;background:var(--bg-2)}
.cta .aurora i{opacity:calc(var(--aurora-op) * .9)}
.cta > *{position:relative;z-index:1}
.cta p{color:var(--ink-2);margin-top:8px}

/* Footer */
footer{position:relative;z-index:1;border-top:1px solid var(--line);padding:64px 0 32px;color:var(--ink-3);font-size:13px}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:32px}
.footer-grid h4{margin:0 0 12px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.footer-grid a{display:block;padding:4px 0;color:var(--ink-2)} .footer-grid a:hover{color:var(--g1)}
.footer-bottom{margin-top:40px;padding-top:20px;border-top:1px solid var(--line);display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px}
@media (max-width:760px){.footer-grid{grid-template-columns:1fr}}

/* 進場 */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .6s cubic-bezier(.16,1,.3,1),transform .6s cubic-bezier(.16,1,.3,1)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}h1 .w,.lead,.ctas,.reveal{opacity:1;transform:none}}