* { margin:0; padding:0; box-sizing:border-box; }
:root{
  --bg:#080c09; --bg-2:#0f160f; --paper:#ffffff; --soft:#f4faf6; --line:#1a2a1a;
  --green:#3ddc84; --green-d:#0f8f45; --green-glow:rgba(61,220,132,.35);
  --accent:#3ddc84; --lime:#b8e25b; --teal:#2bd4b3;
  --txt:#f0f4f0; --muted:#8b9d8e; --muted-l:#c4d2c6;
  --r:20px; --maxw:1200px; --shadow:0 24px 70px rgba(0,0,0,.32);
}
html{scroll-behavior:smooth}
body{font-family:"Noto Sans SC","Outfit",-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;
  color:var(--txt); background:var(--bg); line-height:1.8; -webkit-font-smoothing:antialiased; overflow-x:hidden;}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px;}
a{color:var(--green); text-decoration:none;}
img{max-width:100%; display:block;}

/* NAV */
.nav-wrap{position:fixed; top:16px; left:0; right:0; z-index:50; display:flex; justify-content:center; padding:0 16px;}
.nav-pill{width:100%; max-width:var(--maxw); display:flex; align-items:center; gap:16px;
  background:rgba(15,22,15,.82); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,.10); box-shadow:var(--shadow); border-radius:999px; padding:8px 16px;}
.brand{display:flex; align-items:center;}
.logo-img{height:34px; width:auto;}
.logo-light{filter:brightness(0) invert(1);}
.nav-links{display:flex; gap:4px; flex:1; justify-content:center; flex-wrap:wrap;}
.nav-links a{color:var(--txt); font-size:14px; padding:8px 14px; border-radius:999px; transition:.25s;}
.nav-links a:hover{background:rgba(255,255,255,.08); color:var(--green);}
.nav-links a.nav-active{background:var(--green); color:#051308; font-weight:700;}
.nav-cta{background:var(--green); color:#051308 !important; padding:10px 22px; border-radius:999px; font-weight:700; font-size:14px; white-space:nowrap;}
.nav-cta:hover{background:#5ff29e;}
.nav-toggle{display:none; width:36px; height:36px; border:none; background:transparent; cursor:pointer; flex-direction:column; justify-content:center; gap:5px; margin-left:auto;}
.nav-toggle span{display:block; height:2px; width:22px; background:#fff; border-radius:2px; transition:.3s;}
body.nav-open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg);}
body.nav-open .nav-toggle span:nth-child(2){opacity:0;}
body.nav-open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* HERO */
.hero{position:relative; min-height:92vh; display:flex; align-items:center; background-size:cover; background-position:center; padding:150px 0 90px;}
.hero-sm{min-height:62vh;}
.hero-wash{position:absolute; inset:0; background:radial-gradient(120% 90% at 50% 0%, rgba(8,12,9,.25), rgba(8,12,9,.86) 70%), linear-gradient(180deg, rgba(8,12,9,.25), rgba(8,12,9,.95));}
.hero-wash-soft{position:absolute; inset:0; background:linear-gradient(180deg, rgba(8,12,9,.45), rgba(8,12,9,.92) 80%);}
.hero-inner{position:relative; z-index:2; text-align:center; color:#fff; max-width:900px; margin:0 auto;}
.hero-kicker{font-size:12px; letter-spacing:3px; text-transform:uppercase; color:var(--lime); font-weight:700; margin-bottom:18px;}
.hero h1{font-family:"Outfit","Noto Sans SC",sans-serif; font-weight:800; font-size:clamp(2.6rem,6vw,5.2rem); line-height:1.05; letter-spacing:-1px;}
.hero-lead{max-width:700px; margin:24px auto 0; font-size:clamp(1.05rem,1.7vw,1.25rem); color:var(--muted-l); opacity:.98; line-height:1.75;}
.hero-cta{margin-top:38px; display:flex; gap:16px; justify-content:center; flex-wrap:wrap;}
.btn-lg{background:var(--green); color:#051308; padding:16px 36px; border-radius:999px; font-weight:700; font-size:16px; display:inline-flex; align-items:center; gap:8px; transition:.25s; box-shadow:0 14px 34px var(--green-glow); border:none; cursor:pointer;}
.btn-lg:hover{transform:translateY(-2px); background:#5ff29e;}
.btn-ghost{background:rgba(255,255,255,.08); color:#fff; border:1px solid rgba(255,255,255,.35); padding:15px 32px; border-radius:999px; font-weight:600; font-size:16px; display:inline-flex; transition:.25s;}
.btn-ghost:hover{background:rgba(255,255,255,.18);}
.btn-sm{background:var(--green-d); color:#fff; padding:9px 18px; border-radius:999px; font-size:13px; font-weight:600; display:inline-flex; align-self:flex-start; margin-top:16px; transition:.25s;}
.btn-sm:hover{background:var(--green); color:#051308;}
.btn-outline{border:1px solid var(--green); color:var(--green); padding:12px 28px; border-radius:999px; font-weight:600; display:inline-block; transition:.25s;}
.btn-outline:hover{background:var(--green); color:#051308;}
.center{text-align:center; margin-top:48px;}

/* STATS */
.stats-band{background:var(--bg-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.stats-row{max-width:var(--maxw); margin:0 auto; display:grid; grid-template-columns:repeat(4,1fr); padding:44px 24px; gap:1px;}
.stat{text-align:center; position:relative;}
.stat:not(:last-child)::after{content:""; position:absolute; right:0; top:16%; height:68%; width:1px; background:rgba(255,255,255,.10);}
.stat b{display:block; font-family:"Outfit",sans-serif; font-size:clamp(2rem,3.2vw,2.8rem); font-weight:800; color:var(--green);}
.stat span{color:var(--muted); font-size:13.5px;}

/* SECTIONS */
.sec{padding:110px 24px;}
.top-pad{padding-top:150px;}
.sec-head{text-align:center; max-width:720px; margin:0 auto 52px;}
.sec-kicker{font-size:12px; letter-spacing:3px; text-transform:uppercase; color:var(--lime); font-weight:700; margin-bottom:14px;}
.sec-title{font-size:clamp(1.8rem,3.4vw,2.8rem); font-weight:800; letter-spacing:-.5px; margin-bottom:18px; color:#fff; line-height:1.2;}
.page-h{font-size:clamp(2.2rem,4.5vw,3.4rem); font-weight:800; letter-spacing:-.8px; color:#fff; line-height:1.1; margin-bottom:18px;}
.sec-sub{color:var(--muted); font-size:1.05rem; line-height:1.75;}
.kicker{font-size:11px; letter-spacing:2.5px; text-transform:uppercase; color:var(--lime); font-weight:700; margin-bottom:10px;}

/* BENTO */
.bento{display:grid; grid-template-columns:1.1fr 1fr; grid-auto-rows:270px; gap:18px;}
.bento-a{position:relative; border-radius:var(--r); overflow:hidden; background-size:cover; background-position:center; display:flex; align-items:flex-end; grid-row:span 2;}
.bento-ov{position:absolute; inset:0; background:linear-gradient(180deg, rgba(8,12,9,.2), rgba(8,12,9,.88));}
.bento-txt{position:relative; z-index:2; padding:34px; color:#fff;}
.bento-txt h3{font-size:1.55rem; font-weight:800; margin:8px 0 10px; line-height:1.25;}
.bento-txt p{font-size:14.5px; color:var(--muted-l); opacity:.98;}
.bento-b,.bento-c{background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r); padding:32px; display:flex; flex-direction:column; justify-content:center; transition:.35s;}
.bento-b:hover,.bento-c:hover{transform:translateY(-5px); box-shadow:var(--shadow); border-color:#2a4a2a;}
.bento-b h3,.bento-c h3{font-size:1.35rem; font-weight:800; margin:8px 0 10px; color:#fff; line-height:1.3;}
.bento-b p,.bento-c p{font-size:14.5px; color:var(--muted);}
.metric{margin-top:16px; font-weight:800; color:var(--green); font-size:15px;}

/* MARQUEE */
.marquee-sec{padding:70px 0; background:var(--bg-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line); overflow:hidden;}
.marquee-cap{text-align:center; color:var(--muted); font-size:12px; letter-spacing:3px; text-transform:uppercase; margin-bottom:30px;}
.marquee{overflow:hidden; white-space:nowrap; mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent); -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);}
.marquee-track{display:inline-flex; gap:18px; padding-right:18px; animation:scroll 42s linear infinite; align-items:center;}
.marquee-track.reverse{animation-direction:reverse;}
.brand-cell{height:56px; min-width:118px; padding:0 20px; background:rgba(255,255,255,.94); border-radius:14px; display:flex; align-items:center; justify-content:center; transition:.4s; box-shadow:0 6px 18px rgba(0,0,0,.28);}
.brand-cell:hover{transform:scale(1.06); box-shadow:0 12px 28px var(--green-glow);}
.brand-cell img{height:30px; width:auto; max-width:96px; object-fit:contain;}
.brand-name{display:none; font-size:14px; font-weight:700; color:#0b0d12; white-space:nowrap;}
@keyframes scroll{from{transform:translateX(0)} to{transform:translateX(-50%)}}

/* CASE WALL */
.case-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px;}
.case-grid.narrow{grid-template-columns:repeat(4,1fr);}
.case{position:relative; border-radius:var(--r); overflow:hidden; aspect-ratio:4/3; display:block; background:var(--bg-2); border:1px solid var(--line);}
.case-img{position:absolute; inset:0; background-size:cover; background-position:center; transition:transform .9s cubic-bezier(.2,.7,.2,1); filter:saturate(.9);}
.case:hover .case-img{transform:scale(1.09);}
.case-ov{position:absolute; inset:0; background:linear-gradient(180deg, rgba(8,12,9,0) 35%, rgba(8,12,9,.9)); display:flex; flex-direction:column; justify-content:flex-end; padding:20px; transition:.3s;}
.case-cat{font-size:10px; letter-spacing:1.5px; color:var(--lime); text-transform:uppercase; font-weight:700;}
.case-ov h4{color:#fff; font-size:1.05rem; font-weight:700; margin-top:6px; line-height:1.3;}
.case-more{font-size:12px; color:var(--green); margin-top:8px; opacity:0; transform:translateY(8px); transition:.3s;}
.case:hover .case-more{opacity:1; transform:translateY(0);}

/* APP SHOWCASE */
.app-sec{background:var(--bg-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.foot-icon{display:inline-block; width:64px; height:64px; border-radius:18px; overflow:hidden; box-shadow:0 10px 30px var(--green-glow); margin-bottom:14px; transition:.4s;}
.foot-icon:hover{transform:translateY(-4px); box-shadow:0 14px 36px var(--green-glow);}
.foot-icon img{width:100%; height:100%; object-fit:contain; display:block;}
.app-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:24px; max-width:1000px; margin:0 auto;}
.app-shot{text-align:center;}
.app-frame{border-radius:28px; overflow:hidden; border:1px solid var(--line); box-shadow:0 20px 50px rgba(0,0,0,.35); background:var(--bg); transition:.35s;}
.app-shot:hover .app-frame{transform:translateY(-8px); border-color:var(--green-d); box-shadow:0 28px 60px var(--green-glow);}
.app-frame img{width:100%; height:auto; display:block;}
.app-shot h4{color:#fff; font-size:1.05rem; margin-top:18px; font-weight:700;}
.app-shot p{color:var(--muted); font-size:14px; margin-top:6px;}
.app-note{text-align:center; color:var(--muted); font-size:13px; margin-top:40px;}

/* PROCESS */
.process-sec{background:var(--bg);}
.process-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:18px; max-width:1100px; margin:0 auto;}
.step{background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r); padding:28px 22px; text-align:center; transition:.35s; position:relative;}
.step:hover{transform:translateY(-5px); border-color:var(--green-d);}
.step::after{content:"→"; position:absolute; right:-18px; top:50%; transform:translateY(-50%); color:var(--green); font-size:18px; opacity:.6;}
.step:last-child::after{display:none;}
.step-no{font-family:"Outfit",sans-serif; font-size:36px; font-weight:800; color:var(--green); opacity:.35; line-height:1; margin-bottom:14px; display:block;}
.step h4{font-size:1.1rem; font-weight:700; color:#fff; margin-bottom:8px;}
.step p{color:var(--muted); font-size:13.5px; line-height:1.7;}

/* FAQ */
.faq-sec{background:var(--bg-2); border-top:1px solid var(--line);}
.faq-list{max-width:820px; margin:0 auto;}
.faq{background:var(--bg); border:1px solid var(--line); border-radius:16px; margin-bottom:14px; overflow:hidden; transition:.3s;}
.faq:hover{border-color:#2a4a2a;}
.faq-q{width:100%; text-align:left; background:transparent; border:none; color:#fff; font-size:16px; font-weight:600; padding:20px 24px; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:16px;}
.faq-q span{flex:1;}
.faq-icon{width:10px; height:10px; border-right:2px solid var(--green); border-bottom:2px solid var(--green); transform:rotate(45deg); transition:.3s; flex-shrink:0;}
.faq.open .faq-icon{transform:rotate(225deg);}
.faq-a{max-height:0; overflow:hidden; transition:max-height .35s ease;}
.faq.open .faq-a{max-height:220px;}
.faq-a p{padding:0 24px 20px; color:var(--muted); font-size:15px; line-height:1.8;}

/* SERVICE LIST */
.service-list{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
.service-card{background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r); padding:34px; transition:.35s;}
.service-card:hover{transform:translateY(-6px); box-shadow:var(--shadow); border-color:#2a4a2a;}
.svc-no{font-family:"Outfit",sans-serif; font-size:36px; font-weight:800; color:var(--green); opacity:.35; line-height:1; margin-bottom:16px; display:block;}
.service-card h3{font-size:1.3rem; font-weight:800; color:#fff; margin-bottom:12px; line-height:1.3;}
.service-card p{color:var(--muted); font-size:14.5px; margin-bottom:18px;}
.service-card ul{list-style:none;}
.service-card li{padding:6px 0 6px 20px; position:relative; color:var(--muted-l); font-size:14px;}
.service-card li::before{content:""; position:absolute; left:0; top:13px; width:6px; height:6px; border-radius:50%; background:var(--green);}

/* STAFF */
.staff-row{display:grid; grid-template-columns:repeat(4,1fr); gap:16px;}
.staff{aspect-ratio:1/1; border-radius:16px; background-size:cover; background-position:center; filter:grayscale(.3) contrast(1.05); transition:.6s; border:1px solid var(--line);}
.staff:hover{filter:grayscale(0) contrast(1.12); transform:translateY(-5px);}

/* DIFF */
.diff{list-style:none; max-width:780px; margin:0 auto;}
.diff li{padding:18px 0 18px 42px; position:relative; border-bottom:1px dashed var(--line); font-size:16px; color:var(--muted-l);}
.diff li::before{content:""; position:absolute; left:0; top:22px; width:16px; height:16px; border-radius:50%; background:var(--green); box-shadow:0 0 0 5px rgba(61,220,132,.15);}

/* CTA */
.cta-band{background:radial-gradient(140% 140% at 50% 0%, var(--green-d), var(--bg)); border-top:1px solid var(--line); padding:110px 0; margin-top:40px;}
.cta-inner{text-align:center; max-width:720px; margin:0 auto;}
.cta-inner h2{font-size:clamp(1.8rem,3.6vw,2.8rem); font-weight:800; letter-spacing:-.5px; color:#fff; line-height:1.2;}
.cta-inner p{color:var(--muted); margin:16px 0 34px; font-size:17px;}

/* ABOUT */
.about-meta{max-width:760px; background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r); padding:30px 34px; margin:0 auto 40px;}
.about-meta p{padding:11px 0; border-bottom:1px dashed var(--line); display:flex; gap:18px;}
.about-meta b{color:var(--muted); font-weight:600; min-width:90px; flex-shrink:0;}
.lic-grid{display:grid; grid-template-columns:1fr 1fr; gap:20px; max-width:900px; margin:0 auto;}
.lic{background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r); padding:28px;}
.lic h4{color:var(--green); margin-bottom:12px; font-size:1.1rem;}
.lic p{font-size:14px; color:var(--muted); padding:4px 0;}

/* CASE DETAIL */
.case-detail{background:var(--bg);}
.detail-grid{display:grid; grid-template-columns:1.4fr 1fr; gap:40px; align-items:start;}
.detail-main h2{font-size:1.7rem; font-weight:800; color:#fff; margin-bottom:18px; line-height:1.3;}
.detail-main p{color:var(--muted); font-size:16px; margin-bottom:16px; line-height:1.8;}
.detail-main .muted{color:var(--muted-l); font-size:14px; margin-top:24px; padding-top:20px; border-top:1px dashed var(--line);}
.detail-side{position:sticky; top:110px;}
.side-card{background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r); padding:22px; margin-bottom:16px;}
.side-card h4{font-size:13px; letter-spacing:1.5px; text-transform:uppercase; color:var(--lime); margin-bottom:8px;}
.side-card p{color:var(--txt); font-size:15px;}
.detail-side .btn-lg, .detail-side .btn-ghost{width:100%; justify-content:center; margin-bottom:12px;}

/* PRICING */
.table-wrap{overflow-x:auto; border:1px solid var(--line); border-radius:var(--r); background:var(--bg-2);}
table.price{width:100%; border-collapse:collapse; min-width:560px;}
table.price th,table.price td{padding:16px 18px; text-align:left; font-size:14.5px; border-bottom:1px solid var(--line);}
table.price th{background:var(--bg-2); color:#fff; font-weight:600;}
table.price tbody tr:nth-child(even){background:rgba(255,255,255,.02);}
.price-n{font-weight:800; color:var(--green); white-space:nowrap;}

/* CONTACT */
.contact-grid{display:grid; grid-template-columns:1.3fr 1fr; gap:28px; align-items:start; max-width:960px; margin:0 auto;}
.contact-info p{padding:13px 0; border-bottom:1px dashed var(--line); font-size:16px; color:var(--muted-l);}
.contact-info b{color:#fff; font-weight:600; margin-right:12px; display:inline-block; min-width:70px;}
.contact-card{background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r); padding:34px;}
.contact-card h3{font-size:1.3rem; margin-bottom:12px; color:#fff;}
.contact-card p{color:var(--muted); margin-bottom:24px; font-size:14px;}
.contact-card .btn-lg{width:100%; justify-content:center;}

/* FOOTER */
.foot{background:var(--bg-2); color:var(--muted-l); padding:72px 0 28px; margin-top:40px; border-top:1px solid var(--line);}
.foot-grid{display:grid; grid-template-columns:2fr 1fr 1fr; gap:34px;}
.foot h4{color:#fff; margin-bottom:14px; font-size:15px;}
.foot a{color:var(--green);}
.foot p{font-size:14px; padding:4px 0; color:var(--muted);}
.copyright{border-top:1px solid var(--line); margin-top:34px; padding-top:22px; color:var(--muted); font-size:13px;}
.muted{color:var(--muted); font-size:14px; margin-top:14px;}

/* REVEAL */
.reveal{opacity:0; transform:translateY(28px); transition:opacity .9s ease, transform .9s cubic-bezier(.2,.7,.2,1);}
.reveal.in{opacity:1; transform:none;}

@media(max-width:920px){
  .bento{grid-template-columns:1fr; grid-auto-rows:auto;}
  .bento-a{grid-row:auto; min-height:360px;}
  .service-list{grid-template-columns:1fr;}
  .case-grid,.case-grid.narrow,.staff-row{grid-template-columns:repeat(2,1fr);}
  .lic-grid,.contact-grid,.detail-grid{grid-template-columns:1fr;}
  .stats-row{grid-template-columns:repeat(2,1fr);}
  .stat:nth-child(2)::after{display:none;}
  .foot-grid{grid-template-columns:1fr;}
  .sec{padding:70px 20px;}
  .nav-pill{padding:10px 14px;}
  .nav-toggle{display:flex;}
  .nav-links{position:fixed; top:78px; left:16px; right:16px; background:rgba(15,22,15,.96); border:1px solid var(--line); border-radius:18px; padding:14px; flex-direction:column; gap:4px; display:none;}
  body.nav-open .nav-links{display:flex;}
  .nav-cta{display:none;}
  .app-grid{grid-template-columns:repeat(2,1fr);}
  .process-grid{grid-template-columns:1fr;}
  .step::after{display:none;}
}
@media(max-width:560px){
  .case-grid,.staff-row,.app-grid{grid-template-columns:1fr;}
  .stats-row{grid-template-columns:1fr 1fr;}
}