/* ===== ShadoUI v1.0 · dark · Apple glassmorphism tokens ===== */
:root{
  --bg:#000; --bg2:rgba(255,255,255,.03);
  --card:rgba(255,255,255,.045); --card-hover:rgba(255,255,255,.07);
  --border:rgba(255,255,255,.12); --border-active:rgba(129,140,248,.6);
  --text:#fff; --muted:#8e8e93; --text2:#c8c8cc;
  --primary:#818cf8; --primary2:#a5b4fc; --accent:#818cf8;
  --accent-dim:rgba(129,140,248,.15); --accent-glow:rgba(129,140,248,.3);
  --green:#30d158; --red:#ff453a; --gold:#f0b429;
  --radius:10px; --radius-lg:14px; --radius-sm:6px;
  --tr:.2s ease;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;overflow-y:scroll;background:#000}
section[id]{scroll-margin-top:80px}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;color:var(--text);line-height:1.6;-webkit-font-smoothing:antialiased}

/* ===== aurora light field (fixed, animated, heavily blurred) ===== */
body::before{
  content:"";position:fixed;inset:-45%;z-index:-2;pointer-events:none;
  background:
    radial-gradient(46% 55% at 20% 24%, rgba(99,102,241,.50), transparent 68%),
    radial-gradient(40% 50% at 82% 18%, rgba(34,211,238,.34), transparent 68%),
    radial-gradient(50% 58% at 78% 80%, rgba(232,121,249,.30), transparent 68%),
    radial-gradient(44% 52% at 22% 84%, rgba(59,130,246,.42), transparent 68%);
  filter:blur(80px) saturate(1.3);
  animation:aurora 56s ease-in-out infinite alternate, breathe 13s ease-in-out infinite;
  will-change:transform,opacity;
}
@keyframes aurora{
  0%{transform:translate(0,0) scale(1) rotate(0deg)}
  25%{transform:translate(5%,-6%) scale(1.1) rotate(3deg)}
  50%{transform:translate(-6%,-2%) scale(.94) rotate(-2deg)}
  75%{transform:translate(-3%,5%) scale(1.08) rotate(2deg)}
  100%{transform:translate(4%,6%) scale(1.02) rotate(-3deg)}
}
@keyframes breathe{
  0%,100%{opacity:.72}
  50%{opacity:1}
}
/* film grain — kills the flat "generated" look */
body::after{
  content:"";position:fixed;inset:0;z-index:500;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media(prefers-reduced-motion:reduce){body::before{animation:none;opacity:.85}}
.container{max-width:1140px;margin:0 auto;padding:0 20px}
.container-narrow{max-width:760px}
.grad{background:linear-gradient(90deg,var(--primary),var(--primary2));-webkit-background-clip:text;background-clip:text;color:transparent}
img{max-width:100%;display:block}

/* thin scrollbar */
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.28)}
::-webkit-scrollbar-track{background:transparent}

/* scroll reveal */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .55s cubic-bezier(.22,.61,.36,1),transform .55s cubic-bezier(.22,.61,.36,1)}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}
/* ticket loading placeholder keeps layout stable */
#ticketLoading{min-height:320px;display:flex;align-items:center;justify-content:center;transition:opacity .25s ease}
#ticketLoading.fade{opacity:0}
svg.ic{display:inline-block;vertical-align:-.15em}

/* buttons */
.btn{display:inline-block;padding:.65rem 1.5rem;border-radius:var(--radius-sm);font-weight:500;text-decoration:none;transition:var(--tr);cursor:pointer;border:1px solid transparent;font-size:1rem}
.btn-primary{background:var(--primary);border-color:var(--primary);color:#fff}
.btn-primary:hover{filter:brightness(1.12)}
.btn-ghost{background:transparent;border-color:var(--border);color:var(--text2)}
.btn-ghost:hover{background:var(--card-hover);border-color:rgba(255,255,255,.25);color:var(--text)}
.btn-lg{padding:.85rem 2.1rem;font-size:1.02rem}
.btn-sm{padding:.42rem 1.05rem;font-size:.88rem}
.btn-block{width:100%}

/* nav */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;background:rgba(0,0,0,.45);backdrop-filter:blur(28px) saturate(1.8);-webkit-backdrop-filter:blur(28px) saturate(1.8);border-bottom:1px solid var(--border)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:64px}
.logo{font-size:1.3rem;font-weight:700;text-decoration:none;color:var(--text)}
.logo span{color:var(--primary)}
.nav-links{display:flex;gap:1.8rem;align-items:center}
.nav-links a{color:var(--muted);text-decoration:none;font-weight:500;position:relative;transition:color var(--tr)}
.nav-links a:not(.btn)::after{content:"";position:absolute;left:0;bottom:-4px;width:0;height:2px;background:var(--primary);transition:width var(--tr)}
.nav-links a:not(.btn):hover::after{width:100%}
.nav-links a:hover{color:var(--text)}
.nav-links .btn{color:#fff}
.nav-toggle{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer}
.nav-toggle span{width:24px;height:2px;background:var(--text);transition:var(--tr)}
.lang-switch{position:relative;margin-left:.8rem}
.lang-btn{display:flex;align-items:center;gap:.4rem;padding:.35rem .8rem;border-radius:8px;border:1px solid var(--border);background:none;color:var(--muted);font-size:.82rem;font-weight:600;cursor:pointer;transition:color var(--tr),border-color var(--tr)}
.lang-btn:hover,.lang-switch.open .lang-btn{color:var(--text);border-color:var(--primary)}
.lang-btn .ic{width:15px;height:15px}
.lang-btn .chev{width:12px;height:12px;transition:transform var(--tr)}
.lang-switch.open .chev{transform:rotate(180deg)}
.lang-menu{position:absolute;top:calc(100% + 8px);right:0;min-width:150px;padding:.35rem;border-radius:12px;border:1px solid var(--border);background:rgba(12,12,18,.92);backdrop-filter:blur(20px) saturate(1.6);-webkit-backdrop-filter:blur(20px) saturate(1.6);box-shadow:0 12px 40px rgba(0,0,0,.5);opacity:0;transform:translateY(-6px) scale(.97);pointer-events:none;transition:opacity var(--tr),transform var(--tr);z-index:200}
.lang-switch.open .lang-menu{opacity:1;transform:none;pointer-events:auto}
.lang-menu button{display:flex;align-items:center;justify-content:space-between;width:100%;padding:.5rem .7rem;border:0;border-radius:8px;background:none;color:var(--text2);font-size:.85rem;cursor:pointer;transition:background var(--tr),color var(--tr);text-align:left}
.lang-menu button:hover{background:var(--card-hover);color:var(--text)}
.lang-menu button.on{color:var(--primary2);background:var(--accent-dim)}
.lang-menu button.on::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--primary);margin-left:.6rem}

/* hero */
.hero{padding:140px 0 80px}
.hero-inner{display:grid;grid-template-columns:1.1fr .9fr;gap:3rem;align-items:center}
.badge{display:inline-flex;align-items:center;gap:.45rem;padding:.35rem 1rem;border:1px solid rgba(129,140,248,.25);border-radius:999px;font-size:.85rem;color:var(--primary);margin-bottom:1.2rem;background:var(--accent-dim)}
.badge svg{width:14px;height:14px}
.hero h1{font-size:3rem;line-height:1.15;font-weight:700;margin-bottom:1.2rem}
.hero p{color:var(--muted);font-size:1.1rem;margin-bottom:1.8rem;max-width:520px}
.hero-cta{display:flex;gap:1rem;flex-wrap:wrap;margin-bottom:2.5rem}
.hero-stats{display:flex;gap:2.5rem}
.hero-stats div{display:flex;flex-direction:column}
.hero-stats strong{font-size:1.6rem;color:var(--primary)}
.hero-stats span{color:var(--muted);font-size:.85rem}
.hero-img>img{border-radius:var(--radius-lg);border:1px solid var(--border)}
.hero-img.plx{border-radius:var(--radius-lg);border:1px solid var(--border);box-shadow:0 24px 60px -24px rgba(0,0,0,.55)}

/* trust */
.trust{border-top:1px solid var(--border);border-bottom:1px solid var(--border);background:transparent}
.trust-inner{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding:1.1rem 20px;font-weight:500;color:var(--muted);font-size:.95rem}
.trust-inner span{display:inline-flex;align-items:center;gap:.45rem}
.trust-inner svg{width:16px;height:16px;color:var(--primary)}

/* sections */
.section{padding:90px 0}
.section-dark{background:rgba(255,255,255,.02)}
.sec-title{font-size:2.2rem;font-weight:700;text-align:center;margin-bottom:.6rem}
.sec-sub{text-align:center;color:var(--muted);margin-bottom:3rem}

/* NOTE: tilting/hover-animated cards must NOT have backdrop-filter —
   re-blurring on every transform frame makes hover feel seconds-late */
.card,.price-card,.step,.tk-row{box-shadow:inset 0 1px 0 rgba(255,255,255,.07)}
.faq-item,.order-form,.tk-card{backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:inset 0 1px 0 rgba(255,255,255,.07)}

/* cards */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem}
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;transition:var(--tr);display:flex;flex-direction:column}
.card:hover{transform:translateY(-2px);background:var(--card-hover)}
/* service card — AI image split into 3 depth planes: blurred deep field / scene / masked subject */
.card-img.plx{position:relative;aspect-ratio:4/3;overflow:hidden;background:#070b14;isolation:isolate;transition:transform .3s ease-out,box-shadow .3s ease-out}
.card:hover .card-img.plx,.hero-img.plx:hover{box-shadow:0 18px 50px -18px rgba(0,0,0,.6);box-shadow:0 18px 50px -18px color-mix(in srgb,var(--ac,#22d3ee) 40%,rgba(0,0,0,.6))}
.plx-layer{position:absolute;inset:0;pointer-events:none;will-change:transform;transition:transform .28s cubic-bezier(.22,.61,.21,1)}
.plx-glow{z-index:4;background:radial-gradient(ellipse 62% 56% at 50% 45%,rgba(255,255,255,.05),transparent 70%);background:radial-gradient(ellipse 62% 56% at 50% 45%,color-mix(in srgb,var(--ac,#22d3ee) 15%,transparent),transparent 70%);mix-blend-mode:screen}
.plx-l1{inset:0;z-index:1}
.plx-l1 img{width:100%;height:100%;object-fit:cover;display:block;will-change:transform;animation:plxKen 22s ease-in-out infinite alternate}
.plx-shine{inset:-30% -70%;z-index:3;background:linear-gradient(105deg,transparent 42%,rgba(255,255,255,.12) 50%,transparent 58%);transform:translate3d(-60%,0,0);transition:transform 1.1s cubic-bezier(.22,.61,.21,1)}
.card:hover .plx-shine,.hero-img.plx:hover .plx-shine{transform:translate3d(60%,0,0)}
.plx-glow{animation:plxPulse 6s ease-in-out infinite alternate}
@keyframes plxKen{from{transform:scale(1.02) translate3d(-.8%,.5%,0)}to{transform:scale(1.09) translate3d(.8%,-.6%,0)}}
@keyframes plxPulse{from{opacity:.55}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.plx-l1 img,.plx-glow{animation:none}}
.plx-frame{inset:0;z-index:5;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),inset 0 -70px 90px -45px rgba(0,0,0,.6)}
.card-body{padding:1.6rem;display:flex;flex-direction:column;flex:1}
.card-body h3{font-size:1.25rem;margin-bottom:.7rem}
.card-body p{color:var(--muted);font-size:.95rem;margin-bottom:1rem}
.card-body ul{list-style:none;margin-bottom:1.4rem;flex:1}
.card-body li{padding:.3rem 0 .3rem 1.5rem;position:relative;font-size:.9rem;color:var(--muted)}
.card-body li::before{content:"→";position:absolute;left:0;color:var(--primary)}
.card-body .btn{align-self:flex-start}

/* pricing */
.pricing{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem;align-items:stretch}
.price-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:2rem;text-align:center;position:relative;display:flex;flex-direction:column;transition:var(--tr)}
.price-card:hover{transform:translateY(-2px);background:var(--card-hover)}
.price-card.featured{border-color:var(--border-active)}
.ribbon{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--primary);color:#fff;padding:.25rem 1.2rem;border-radius:999px;font-size:.8rem;font-weight:600}
.price-card h3{font-size:1.15rem;color:var(--muted);margin-bottom:.8rem}
.price{font-size:2.8rem;font-weight:700;margin-bottom:1.4rem}
.price span{font-size:1.4rem;color:var(--muted)}
.price-card ul{list-style:none;text-align:left;margin-bottom:1.8rem;flex:1}
.price-card li{padding:.45rem 0 .45rem 1.5rem;font-size:.92rem;color:var(--muted);position:relative}
.price-card li::before{content:"";position:absolute;left:0;top:.85em;width:.85em;height:.85em;background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23818cf8' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E")}
.price-card .btn{width:100%}

/* steps */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:1.6rem}
.step{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:1.8rem;text-align:center;transition:var(--tr)}
.step:hover{transform:translateY(-2px);background:var(--card-hover)}
.step-num{width:44px;height:44px;margin:0 auto 1rem;border-radius:50%;background:var(--primary);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1.2rem}
.step h3{margin-bottom:.5rem;font-size:1.05rem}
.step p{color:var(--muted);font-size:.88rem}

/* faq */
.faq-list{display:flex;flex-direction:column;gap:.8rem}
.faq-item{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:1.1rem 1.4rem;transition:var(--tr)}
.faq-item:hover{background:var(--card-hover)}
.faq-item summary{cursor:pointer;font-weight:600;list-style:none;position:relative;padding-right:2rem}
.faq-item summary::after{content:"+";position:absolute;right:0;top:0;font-size:1.4rem;color:var(--primary);transition:var(--tr)}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-item p{color:var(--muted);margin-top:.7rem;font-size:.93rem}

/* form */
.order-form{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:2.2rem}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem}
.form-group{margin-bottom:1.2rem;display:flex;flex-direction:column}
.form-group label{font-size:.88rem;font-weight:600;margin-bottom:.4rem;color:var(--muted)}
.form-group input,.form-group select,.form-group textarea{background:transparent;border:1px solid var(--border);border-radius:var(--radius-sm);padding:.75rem 1rem;color:var(--text);font-size:.95rem;font-family:inherit;transition:var(--tr)}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{outline:none;border-color:var(--border-active);box-shadow:0 0 0 3px var(--accent-glow)}
.form-group select option{background:#111;color:var(--text)}
.form-note{text-align:center;color:var(--muted);font-size:.85rem;margin-top:1rem}
.form-note.success{color:var(--green)}
.form-note.error{color:var(--red)}

/* footer */
.footer{background:transparent;border-top:1px solid var(--border);padding-top:3.5rem}
.footer-inner{display:grid;grid-template-columns:2fr 1fr 1fr 1.4fr;gap:2rem;padding-bottom:2.5rem}
.footer-brand p{color:var(--muted);font-size:.9rem;margin-top:.8rem;max-width:280px}
.footer-links{display:flex;flex-direction:column;gap:.6rem}
.footer-links h4{margin-bottom:.4rem;font-size:.95rem}
.footer-links a{color:var(--muted);text-decoration:none;font-size:.88rem;transition:color var(--tr)}
.footer-links a:hover{color:var(--primary)}
.footer-bottom{border-top:1px solid var(--border);padding:1.2rem 20px;text-align:center;color:var(--muted);font-size:.85rem}

/* service detail modal */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);z-index:300;display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;pointer-events:none;transition:opacity .25s ease}
.modal-overlay.open{opacity:1;pointer-events:auto}
.modal-box{position:relative;width:560px;max-width:100%;max-height:85vh;overflow-y:auto;background:rgba(35,35,42,.6);backdrop-filter:blur(40px) saturate(1.8);-webkit-backdrop-filter:blur(40px) saturate(1.8);border:1px solid var(--border);border-radius:var(--radius-lg);padding:2.2rem;transform:translateY(12px);transition:transform .25s ease}
.modal-overlay.open .modal-box{transform:translateY(0)}
.modal-close{position:absolute;top:14px;right:16px;background:none;border:none;color:var(--muted);font-size:1.2rem;cursor:pointer;transition:color var(--tr)}
.modal-close:hover{color:var(--text)}
.modal-title{font-size:1.5rem;font-weight:700;margin-bottom:1.2rem;padding-right:2rem}
.modal-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem;margin-bottom:1.4rem}
.modal-stats .m-stat{background:rgba(255,255,255,.03);border:1px solid var(--border);border-radius:var(--radius-sm);padding:.9rem .6rem;text-align:center}
.modal-stats .m-stat strong{display:block;font-size:1.35rem;color:var(--primary)}
.modal-stats .m-stat span{font-size:.75rem;color:var(--muted)}
.modal-body h4{font-size:.95rem;margin:1.1rem 0 .5rem;color:var(--text)}
.modal-body p,.modal-body li{color:var(--muted);font-size:.92rem}
.modal-body ul{list-style:none}
.modal-body li{padding:.3rem 0 .3rem 1.4rem;position:relative}
.modal-body li::before{content:"";position:absolute;left:0;top:.65em;width:.8em;height:.8em;background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23818cf8' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E")}
.modal-close svg,.cw-close svg{width:16px;height:16px;vertical-align:middle}
.modal-box .btn-block{margin-top:1.6rem;text-align:center}
@media(max-width:600px){.modal-stats{grid-template-columns:1fr 1fr}.modal-box{padding:1.6rem}}

/* chat widget */
.chat-widget{position:fixed;right:22px;bottom:22px;z-index:200;font-size:15px}
.chat-fab{width:56px;height:56px;border-radius:50%;border:none;background:var(--primary);color:#fff;cursor:pointer;position:relative;transition:var(--tr);display:flex;align-items:center;justify-content:center}
.chat-fab svg{width:25px;height:25px}
.chat-fab:hover{transform:scale(1.06);filter:brightness(1.1)}
.chat-badge{position:absolute;top:-4px;right:-4px;min-width:20px;height:20px;border-radius:10px;background:var(--red);color:#fff;font-size:.72rem;font-weight:700;display:flex;align-items:center;justify-content:center;padding:0 5px}
.chat-badge.hidden{display:none}
.chat-panel{position:absolute;bottom:70px;right:0;width:340px;max-width:calc(100vw - 44px);background:rgba(35,35,42,.6);backdrop-filter:blur(40px) saturate(1.8);-webkit-backdrop-filter:blur(40px) saturate(1.8);border:1px solid var(--border);border-radius:var(--radius-lg);display:flex;flex-direction:column;overflow:hidden;opacity:0;pointer-events:none;transform:translateY(10px);transition:.25s ease}
.chat-panel.open{opacity:1;pointer-events:auto;transform:translateY(0)}
.cw-head{display:flex;justify-content:space-between;align-items:center;padding:.85rem 1.1rem;background:rgba(255,255,255,.04);border-bottom:1px solid var(--border)}
.cw-head strong{display:block;font-size:.95rem}
.cw-status{font-size:.72rem;color:var(--green)}
.cw-close{background:none;border:none;color:var(--muted);font-size:1rem;cursor:pointer;opacity:.8;transition:opacity var(--tr)}
.cw-close:hover{opacity:1}
.cw-name-row{padding:.6rem .9rem;border-bottom:1px solid var(--border)}
.cw-name-row.hidden{display:none}
.cw-name-row input{width:100%;background:transparent;border:1px solid var(--border);border-radius:var(--radius-sm);padding:.5rem .8rem;color:var(--text);font-size:.85rem;font-family:inherit}
.cw-msgs{height:280px;overflow-y:auto;padding:.9rem;display:flex;flex-direction:column;gap:.5rem}
.cw-msg{max-width:82%;padding:.55rem .8rem;border-radius:12px;font-size:.87rem;line-height:1.45;word-break:break-word}
.cw-msg.them{align-self:flex-start;background:rgba(255,255,255,.05);border:1px solid var(--border);border-bottom-left-radius:4px}
.cw-msg.me{align-self:flex-end;background:var(--primary);color:#fff;border-bottom-right-radius:4px}
.cw-msg img{max-width:200px;max-height:160px;border-radius:8px;display:block;cursor:pointer}
.cw-chips{display:flex;flex-wrap:wrap;gap:.4rem;padding:.1rem 0 .2rem}
.cw-chips button{background:rgba(255,255,255,.06);border:1px solid var(--border);color:var(--text);border-radius:999px;padding:.38rem .8rem;font-size:.78rem;cursor:pointer;transition:transform .15s ease,border-color .15s ease}
.cw-chips button:hover{border-color:var(--primary);transform:translateY(-1px)}
.cw-input{display:flex;gap:.5rem;padding:.7rem .9rem;border-top:1px solid var(--border)}
.cw-input input{flex:1;background:transparent;border:1px solid var(--border);border-radius:var(--radius-sm);padding:.55rem .8rem;color:var(--text);font-size:.88rem;font-family:inherit;transition:var(--tr)}
.cw-input input:focus{outline:none;border-color:var(--border-active)}
.cw-input button{width:40px;border:none;border-radius:var(--radius-sm);background:var(--primary);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:var(--tr)}
.cw-input button:hover{filter:brightness(1.1)}
.cw-input button svg{width:17px;height:17px}

/* ticket page */
.hidden{display:none!important}
.tk-grid{display:grid;grid-template-columns:1fr;gap:1.4rem;align-items:start;max-width:760px;margin:0 auto}
.tk-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:1.8rem}
.tk-head{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.tk-label{font-size:.78rem;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.tk-id{font-weight:700;font-size:1.2rem;color:var(--primary);word-break:break-all;font-family:"Cascadia Code","Consolas",monospace}
.tk-meta{color:var(--muted);font-size:.88rem;margin-top:.8rem;padding-bottom:1.2rem;border-bottom:1px solid var(--border)}
.tk-steps{display:flex;align-items:flex-start;gap:.4rem;margin:1.6rem 0 .8rem}
.tk-step{display:flex;flex-direction:column;align-items:center;gap:.5rem;flex:0 0 auto;text-align:center;max-width:120px}
.tk-step span{font-size:.75rem;color:var(--muted)}
.tk-dot{width:22px;height:22px;border-radius:50%;border:2px solid var(--border);background:transparent;transition:var(--tr)}
.tk-step.done .tk-dot{border-color:var(--green);background:var(--green)}
.tk-step.done span{color:var(--text)}
.tk-step.active .tk-dot{border-color:var(--primary);box-shadow:0 0 0 4px var(--accent-dim)}
.tk-step.active span{color:var(--primary);font-weight:600}
.tk-line{flex:1;height:2px;background:var(--border);margin-top:10px;min-width:12px}
.tk-note{color:var(--muted);font-size:.9rem;margin-top:.6rem}
.tk-list{list-style:none}
.tk-list li{padding:.35rem 0 .35rem 1.5rem;position:relative;color:var(--muted);font-size:.93rem}
.tk-list li::before{content:"";position:absolute;left:0;top:.8em;width:.8em;height:.8em;background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23818cf8' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E")}
.tk-list strong{color:var(--text)}
.tk-row{display:flex;justify-content:space-between;align-items:center;gap:1rem;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:1.1rem 1.4rem;text-decoration:none;color:var(--text);transition:var(--tr)}
.tk-row:hover{background:var(--card-hover);transform:translateY(-2px)}
.tk-row-id{font-weight:700;color:var(--primary);font-size:.95rem;font-family:"Cascadia Code","Consolas",monospace}
.tk-row-plan{color:var(--muted);font-size:.85rem;margin-top:.2rem}
.tk-row-status{font-size:.85rem;font-weight:600}
.tk-row-status.st-new{color:var(--gold)}
.tk-row-status.st-contacted{color:var(--primary)}
.tk-row-status.st-paid{color:var(--primary2)}
.tk-row-status.st-done{color:var(--green)}
.tk-row-status.st-refunded{color:var(--red)}
.tk-row-time{color:var(--muted);font-size:.78rem;margin-top:.2rem}
@media(max-width:600px){.tk-steps{flex-direction:column;align-items:stretch}.tk-step{flex-direction:row;max-width:none;text-align:left}.tk-line{display:none}}

/* responsive */
@media(max-width:900px){
  .hero-inner{grid-template-columns:1fr}
  .hero h1{font-size:2.3rem}
  .cards,.pricing,.steps{grid-template-columns:1fr 1fr}
  .footer-inner{grid-template-columns:1fr 1fr}
}
@media(max-width:600px){
  .cards,.pricing,.steps,.form-row{grid-template-columns:1fr}
  .footer-inner{grid-template-columns:1fr}
  .nav-links{position:fixed;top:64px;right:0;flex-direction:column;background:rgba(20,20,25,.95);backdrop-filter:blur(24px);border:1px solid var(--border);border-radius:0 0 0 12px;padding:1.4rem 2rem;transform:translateX(110%);transition:.25s ease;align-items:flex-start}
  .nav-links.open{transform:translateX(0)}
  .nav-toggle{display:flex}
  .hero{padding-top:110px}
  .hero-stats{gap:1.4rem}
}

/* ===== premium interactions (Linear / Arc / Stripe grade) ===== */
@keyframes pageIn{from{opacity:0}}
body{animation:pageIn .45s ease}

/* cursor spotlight — soft light follows the pointer */
.spotlight{position:fixed;top:0;left:0;width:520px;height:520px;border-radius:50%;pointer-events:none;z-index:-1;background:radial-gradient(circle,rgba(129,140,248,.14),transparent 60%);filter:blur(20px);will-change:transform}

/* scroll progress bar under nav */
.scroll-progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:400;background:linear-gradient(90deg,var(--primary),#22d3ee);transform:scaleX(0);transform-origin:left;pointer-events:none}

/* nav condenses after scrolling */
.nav{transition:background var(--tr),border-color var(--tr)}
.nav.scrolled{background:rgba(0,0,0,.68)}
.nav-links a.active{color:var(--text)}
.nav-links a.active:not(.btn)::after{width:100%}

/* hero title word-by-word rise */
.hero h1 .w{display:inline-block;overflow:hidden;vertical-align:bottom}
.hero h1 .w i{display:inline-block;font-style:normal;transform:translateY(110%);animation:wordRise .7s cubic-bezier(.22,.61,.36,1) forwards}
@keyframes wordRise{to{transform:none}}

/* tactile button press */
.btn:active{scale:.96}

@media(prefers-reduced-motion:reduce){
  body{animation:none}
  .hero h1 .w i{transform:none;animation:none}
}