/*
Theme Name: 远帆出海工作室
Author: Overseas Web Studio
Description: 面向外贸企业与跨境品牌的精品独立站工作室主题，包含案例、价格、服务、视频与博客模块。
Version: 1.3.0
Requires at least: 6.2
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: overseas-studio
*/

:root {
  --ink: #161914;
  --ink-soft: #4f544b;
  --paper: #f4f2eb;
  --paper-2: #ebe8df;
  --card: #fbfaf5;
  --lime: #c8f36b;
  --lime-dark: #91bb31;
  --line: rgba(22, 25, 20, .14);
  --white: #fff;
  --radius: 22px;
  --shadow: 0 22px 70px rgba(25, 30, 20, .11);
  --container: min(1180px, calc(100% - 40px));
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 16px/1.75 -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  -webkit-font-smoothing: antialiased;
}
body.menu-open { overflow: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; }
.container { width: var(--container); margin-inline: auto; }
.skip-link { position: fixed; left: 16px; top: -100px; z-index: 999; padding: 10px 16px; background: var(--ink); color: white; }
.skip-link:focus { top: 16px; }

/* Header */
.site-header { position: fixed; inset: 0 0 auto; z-index: 90; padding: 20px 0; transition: .3s ease; }
.site-header.is-scrolled { padding: 11px 0; background: rgba(244,242,235,.88); backdrop-filter: blur(18px); border-bottom: 1px solid var(--line); }
.nav-shell { display: flex; align-items: center; min-height: 64px; padding: 0 10px 0 21px; border: 1px solid rgba(255,255,255,.15); border-radius: 999px; background: rgba(22,25,20,.88); color: var(--white); box-shadow: 0 12px 30px rgba(0,0,0,.12); }
.brand { display: inline-flex; align-items: center; gap: 12px; margin-right: auto; font-size:17px; font-weight: 800; letter-spacing: -.03em; white-space: nowrap; }
.brand-mark { position: relative; flex:0 0 auto; width: 34px; height: 34px; border-radius: 50%; background: var(--lime); }
.brand-mark::before { content:""; position:absolute; inset:8px; border:2px solid var(--ink); border-radius:50%; }
.brand-mark::after { content:""; position:absolute; width:7px; height:7px; right:5px; top:5px; border-radius:50%; background:var(--ink); }
.brand-sub { margin-left: 7px; color: rgba(255,255,255,.58); font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; }
.primary-menu { display: flex; align-items: center; gap: 3px; margin: 0 14px; padding: 0; list-style: none; }
.primary-menu a { display: block; padding: 11px 13px; color: rgba(255,255,255,.75); font-size: 15px; white-space:nowrap; transition: .2s; }
.primary-menu a:hover, .primary-menu .current-menu-item>a { color: var(--white); }
.nav-cta { display: inline-flex; align-items:center; justify-content:center; gap: 8px; padding: 12px 20px; border-radius: 999px; background: var(--lime); color: var(--ink); font-size: 15px; font-weight: 800; white-space:nowrap; }
.nav-cta:hover { background: #d7ff80; }
.menu-toggle { display:none; border:0; color:#fff; background:transparent; padding:8px; cursor:pointer; }
.menu-toggle span { display:block; width:23px; height:2px; margin:5px; background:currentColor; }
.mobile-nav { display:none; }

/* Shared */
.section { padding: 112px 0; }
.section-tight { padding: 82px 0; }
.section-dark { background: var(--ink); color: var(--white); }
.section-head { display: grid; grid-template-columns: .85fr 1.15fr; gap: 50px; align-items: end; margin-bottom: 52px; }
.eyebrow { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 18px; color: var(--ink-soft); font-size: 12px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.eyebrow::before { content:""; width: 7px; height: 7px; border-radius: 50%; background: var(--lime-dark); box-shadow: 0 0 0 5px rgba(145,187,49,.14); }
.section-dark .eyebrow { color: rgba(255,255,255,.55); }
.section-dark .eyebrow::before { background: var(--lime); }
.display-title { margin: 0; font-size: clamp(38px, 5vw, 68px); line-height: 1.04; letter-spacing: -.055em; font-weight: 750; }
.section-title { margin: 0; font-size: clamp(32px, 4vw, 54px); line-height: 1.08; letter-spacing: -.045em; }
.section-copy { max-width: 620px; margin: 0; color: var(--ink-soft); font-size: 18px; }
.section-dark .section-copy { color: rgba(255,255,255,.62); }
.btn { display:inline-flex; align-items:center; justify-content:center; gap: 10px; min-height: 52px; padding: 0 23px; border:1px solid transparent; border-radius:999px; cursor:pointer; font-weight:750; transition:.25s ease; }
.btn:hover { transform: translateY(-2px); }
.btn-primary { background:var(--lime); color:var(--ink); }
.btn-primary:hover { background:#d8ff86; box-shadow:0 10px 25px rgba(200,243,107,.2); }
.btn-dark { background:var(--ink); color:#fff; }
.btn-outline { border-color:var(--line); background:transparent; }
.btn-outline:hover { border-color:var(--ink); }
.text-link { display:inline-flex; align-items:center; gap:9px; font-weight:750; border-bottom:1px solid currentColor; }
.arrow { font-size:1.15em; transition:transform .2s; }
a:hover .arrow { transform:translate(3px,-3px); }

/* Hero */
.hero { position:relative; min-height: 810px; padding: 145px 0 55px; overflow:hidden; background:var(--ink); color:white; }
.hero::before { content:""; position:absolute; inset:0; opacity:.19; background-image:linear-gradient(rgba(255,255,255,.16) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.16) 1px,transparent 1px); background-size:52px 52px; mask-image:linear-gradient(to bottom,black 25%,transparent 80%); }
.hero-glow { position:absolute; width:600px; height:600px; right:-130px; top:-130px; border-radius:50%; background:radial-gradient(circle,rgba(200,243,107,.22),transparent 65%); pointer-events:none; }
.hero-slider { position:relative; min-height:570px; }
.hero-slide { position:absolute; inset:0; display:grid; grid-template-columns:1.05fr .95fr; gap:66px; align-items:center; opacity:0; transform:translateY(18px); pointer-events:none; transition:opacity .65s ease,transform .65s ease; }
.hero-slide.is-active { opacity:1; transform:none; pointer-events:auto; }
.hero-kicker { display:inline-flex; align-items:center; gap:10px; margin-bottom:24px; color:rgba(255,255,255,.68); font-size:13px; font-weight:700; letter-spacing:.08em; }
.hero-kicker::before { content:""; width:29px; height:1px; background:var(--lime); }
.hero h1 { max-width:720px; margin:0 0 24px; font-size:clamp(50px,6.3vw,88px); line-height:.98; letter-spacing:-.065em; font-weight:750; }
.hero h1 em { color:var(--lime); font-style:normal; }
.hero-lead { max-width:610px; margin:0 0 34px; color:rgba(255,255,255,.66); font-size:18px; line-height:1.8; }
.hero-actions { display:flex; flex-wrap:wrap; gap:12px; }
.hero .btn-outline { color:white; border-color:rgba(255,255,255,.22); }
.hero .btn-outline:hover { border-color:white; }
.hero-visual { position:relative; min-height:500px; display:grid; place-items:center; }
.hero-art { width:min(128%,700px); max-width:none; height:auto; transform:translateX(4%); filter:drop-shadow(0 34px 70px rgba(0,0,0,.28)); -webkit-mask-image:radial-gradient(ellipse 76% 74% at 52% 50%,#000 62%,transparent 100%); mask-image:radial-gradient(ellipse 76% 74% at 52% 50%,#000 62%,transparent 100%); }
.browser { width:100%; max-width:510px; overflow:hidden; border:1px solid rgba(255,255,255,.18); border-radius:20px; background:#f8f7f2; color:var(--ink); box-shadow:0 42px 90px rgba(0,0,0,.35); transform:rotate(2deg); }
.browser-bar { display:flex; align-items:center; gap:6px; height:36px; padding:0 14px; background:#e9e7e0; }
.browser-bar i { width:7px; height:7px; border-radius:50%; background:#c7c5bd; }
.browser-url { width:42%; height:10px; margin:auto; border-radius:10px; background:#d8d6cf; }
.browser-body { position:relative; min-height:360px; padding:35px; overflow:hidden; }
.mock-nav { width:100%; height:8px; border-radius:5px; background:linear-gradient(90deg,var(--ink) 20%,transparent 20% 71%,#c9c8c1 71%); }
.mock-tag { width:90px; height:24px; margin-top:55px; border-radius:20px; background:var(--lime); }
.mock-title { width:77%; height:72px; margin-top:16px; border-radius:5px; background:linear-gradient(var(--ink) 0 25%,transparent 25% 38%,var(--ink) 38% 63%,transparent 63% 76%,var(--ink) 76%); }
.mock-lines { width:55%; height:32px; margin-top:17px; background:repeating-linear-gradient(to bottom,#b7b7b1 0 5px,transparent 5px 14px); }
.mock-card { position:absolute; right:25px; bottom:22px; width:34%; height:145px; border-radius:15px; background:var(--ink); box-shadow:-12px 14px 30px rgba(0,0,0,.17); }
.mock-card::before { content:"AI"; display:grid; place-items:center; width:42px; height:42px; margin:17px; border-radius:11px; background:var(--lime); font-weight:900; }
.float-stat { position:absolute; z-index:2; padding:16px 20px; border-radius:15px; background:var(--lime); color:var(--ink); box-shadow:0 15px 40px rgba(0,0,0,.22); font-weight:800; }
.float-stat strong { display:block; font-size:25px; line-height:1.1; }
.float-stat small { font-size:11px; opacity:.65; }
.float-one { left:0; bottom:64px; transform:rotate(-5deg); }
.float-two { right:-12px; top:50px; background:white; transform:rotate(5deg); }
.hero-dots { position:absolute; z-index:4; left:0; bottom:2px; display:flex; gap:8px; }
.hero-dot { width:28px; height:4px; border:0; border-radius:8px; background:rgba(255,255,255,.22); cursor:pointer; transition:.25s; }
.hero-dot.is-active { width:55px; background:var(--lime); }
.hero-bottom { position:absolute; z-index:4; right:0; bottom:0; display:flex; gap:30px; color:rgba(255,255,255,.48); font-size:12px; letter-spacing:.1em; }

/* Trust + benefits */
.trust-strip { border-bottom:1px solid var(--line); background:var(--card); }
.trust-inner { display:grid; grid-template-columns:1.3fr repeat(3,1fr); align-items:center; min-height:118px; }
.trust-intro { font-size:13px; color:var(--ink-soft); }
.trust-item { padding-left:34px; border-left:1px solid var(--line); }
.trust-item strong { display:block; font-size:20px; letter-spacing:-.03em; }
.trust-item span { color:var(--ink-soft); font-size:13px; }
.why-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; counter-reset:why; }
.why-card { position:relative; min-height:355px; padding:34px; overflow:hidden; border:1px solid var(--line); border-radius:var(--radius); background:var(--card); transition:.3s; counter-increment:why; }
.why-card:hover { transform:translateY(-7px); box-shadow:var(--shadow); }
.why-card::before { content:"0" counter(why); display:block; margin-bottom:70px; color:#8c9186; font-size:12px; font-weight:800; letter-spacing:.12em; }
.why-card h3 { margin:0 0 14px; font-size:27px; line-height:1.2; letter-spacing:-.035em; }
.why-card p { margin:0; color:var(--ink-soft); }
.why-card.featured { background:var(--ink); color:#fff; }
.why-card.featured p { color:rgba(255,255,255,.62); }
.why-card.featured::before { color:var(--lime); }
.why-orbit { position:absolute; right:-50px; top:-40px; width:170px; height:170px; border:1px solid rgba(200,243,107,.25); border-radius:50%; }
.why-orbit::before,.why-orbit::after { content:""; position:absolute; border:1px solid rgba(200,243,107,.15); border-radius:50%; }
.why-orbit::before { inset:22px; }.why-orbit::after { inset:50px; background:var(--lime); }

/* Work */
.work-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:22px; }
.work-card { position:relative; min-height:470px; overflow:hidden; border-radius:26px; background:#2d302b; color:white; }
.work-card:nth-child(3n) { grid-column:span 2; min-height:560px; }
.work-image { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .7s ease; background:#2d302b; }
.work-card:hover .work-image { transform:scale(1.035); }
.work-overlay { position:absolute; inset:0; background:linear-gradient(to top,rgba(9,11,8,.97),rgba(9,11,8,.72) 34%,rgba(9,11,8,.02) 75%); }
.work-meta { position:absolute; inset:auto 30px 27px; }
.work-copy { display:block; max-width:650px; }
.work-meta h3 { margin:5px 0 0; font-size:27px; line-height:1.2; }
.work-type { color:rgba(255,255,255,.58); font-size:12px; letter-spacing:.1em; text-transform:uppercase; }
.work-background { display:block; max-width:590px; margin-top:12px; color:rgba(255,255,255,.7); font-size:14px; line-height:1.65; }
.work-background b { display:block; margin-bottom:3px; color:var(--lime); font-size:11px; letter-spacing:.12em; }
.work-actions { display:flex; flex-wrap:wrap; gap:9px; margin-top:17px; }
.work-detail,.work-demo { display:inline-flex; align-items:center; gap:8px; padding:9px 14px; border:1px solid rgba(255,255,255,.28); border-radius:999px; font-size:13px; font-weight:800; transition:.25s; }
.work-detail:hover { border-color:#fff; background:#fff; color:var(--ink); }
.work-card:hover .work-demo { border-color:var(--lime); background:var(--lime); color:var(--ink); }
.work-footer { display:flex; justify-content:space-between; align-items:center; margin-top:34px; }
.work-footer p { color:rgba(255,255,255,.5); }

/* Services */
.service-split { display:grid; grid-template-columns:1fr 1fr; border:1px solid var(--line); border-radius:28px; overflow:hidden; background:var(--card); }
.service-panel { min-height:490px; padding:48px; }
.service-panel+.service-panel { border-left:1px solid var(--line); }
.service-label { display:flex; justify-content:space-between; color:var(--ink-soft); font-size:13px; font-weight:800; letter-spacing:.11em; text-transform:uppercase; }
.service-panel h3 { margin:80px 0 15px; font-size:42px; line-height:1; letter-spacing:-.05em; }
.service-panel>p { color:var(--ink-soft); }
.feature-list { margin:35px 0; padding:0; list-style:none; }
.feature-list li { display:flex; align-items:flex-start; gap:11px; padding:10px 0; border-top:1px solid var(--line); }
.feature-list li::before { content:"✓"; color:var(--lime-dark); font-weight:900; }
.service-panel.dark { background:#20241f; color:#fff; }
.service-panel.dark p,.service-panel.dark .service-label { color:rgba(255,255,255,.57); }
.service-panel.dark .feature-list li { border-color:rgba(255,255,255,.12); }

/* Pricing */
.price-switch { display:flex; width:max-content; margin-bottom:30px; padding:5px; border:1px solid var(--line); border-radius:999px; background:var(--paper-2); }
.price-switch button { padding:10px 20px; border:0; border-radius:999px; background:transparent; cursor:pointer; color:var(--ink-soft); font-weight:700; }
.price-switch button.is-active { background:var(--ink); color:white; }
.pricing-grid { display:none; grid-template-columns:repeat(2,1fr); gap:18px; }
.pricing-grid.is-active { display:grid; }
.price-card { position:relative; padding:38px; border:1px solid var(--line); border-radius:24px; background:var(--card); }
.price-card.recommended { border-color:var(--ink); box-shadow:var(--shadow); }
.price-badge { position:absolute; right:22px; top:20px; padding:6px 11px; border-radius:20px; background:var(--lime); font-size:11px; font-weight:900; }
.price-card h3 { margin:0; font-size:25px; }
.price-card .desc { min-height:55px; color:var(--ink-soft); }
.price { margin:30px 0 20px; font-size:54px; line-height:1; font-weight:800; letter-spacing:-.05em; }
.price sup { font-size:18px; vertical-align:top; margin-right:4px; }
.price small { font-size:13px; color:var(--ink-soft); font-weight:500; letter-spacing:0; }
.included { margin:24px 0 32px; padding:0; list-style:none; }
.included li { padding:10px 0; border-bottom:1px solid var(--line); color:var(--ink-soft); }
.included li::before { content:"＋"; margin-right:9px; color:var(--ink); font-weight:800; }
.price-note { margin-top:18px; color:var(--ink-soft); font-size:13px; }

/* Process */
.process { display:grid; grid-template-columns:repeat(6,1fr); }
.process-step { position:relative; padding:0 18px; border-left:1px solid rgba(255,255,255,.15); }
.process-step:first-child { padding-left:0; border:0; }
.process-num { display:grid; place-items:center; width:38px; height:38px; margin-bottom:65px; border:1px solid rgba(255,255,255,.22); border-radius:50%; color:var(--lime); font-size:12px; }
.process-step h4 { margin:0 0 8px; font-size:18px; }
.process-step p { margin:0; color:rgba(255,255,255,.48); font-size:13px; line-height:1.6; }

/* Content hub */
.hub-grid { display:grid; grid-template-columns:1.25fr .75fr; grid-template-rows:repeat(2,250px); gap:18px; }
.hub-card { position:relative; display:flex; flex-direction:column; justify-content:space-between; padding:32px; overflow:hidden; border:1px solid var(--line); border-radius:24px; background:var(--card); transition:.25s; }
.hub-card:first-child { grid-row:span 2; background:var(--ink); color:white; }
.hub-card:hover { transform:translateY(-4px); box-shadow:var(--shadow); }
.hub-card .tag { color:var(--ink-soft); font-size:12px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.hub-card:first-child .tag { color:var(--lime); }
.hub-card h3 { max-width:430px; margin:0; font-size:32px; line-height:1.15; letter-spacing:-.04em; }
.hub-card:first-child h3 { font-size:45px; }
.hub-card p { margin:12px 0 0; color:var(--ink-soft); }
.hub-card:first-child p { color:rgba(255,255,255,.52); }
.hub-visual { position:absolute; right:-50px; top:35px; width:235px; height:235px; border:1px solid rgba(200,243,107,.25); border-radius:50%; }
.hub-visual::before { content:""; position:absolute; inset:35px; border:1px solid rgba(200,243,107,.38); border-radius:50%; }
.hub-visual::after { content:"▶"; position:absolute; inset:75px; display:grid; place-items:center; border-radius:50%; background:var(--lime); color:var(--ink); font-size:28px; }

/* Contact CTA + footer */
.contact-band { padding:30px 0 110px; }
.contact-shell { position:relative; overflow:hidden; padding:70px; border-radius:30px; background:var(--lime); }
.contact-shell::after { content:""; position:absolute; width:360px; height:360px; right:-100px; top:-130px; border:70px solid rgba(22,25,20,.08); border-radius:50%; }
.contact-shell h2 { position:relative; z-index:1; max-width:780px; margin:0 0 28px; font-size:clamp(38px,5vw,66px); line-height:1.05; letter-spacing:-.055em; }
.contact-shell .btn { position:relative; z-index:1; }
.site-footer { position:relative; padding:82px 0 25px; overflow:hidden; border-top:1px solid rgba(255,255,255,.055); background:linear-gradient(180deg,#111510 0,#090c09 28%,#090c09 100%); color:white; }
.site-footer::before { content:""; position:absolute; top:0; left:50%; width:min(760px,70%); height:1px; transform:translateX(-50%); background:linear-gradient(90deg,transparent,rgba(200,243,107,.42),transparent); }
.footer-grid { display:grid; grid-template-columns:1.4fr .6fr .6fr 1fr; gap:50px; padding-bottom:65px; }
.footer-brand p { max-width:340px; color:rgba(255,255,255,.48); }
.footer-title { margin-bottom:17px; color:rgba(255,255,255,.4); font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
.footer-links { margin:0; padding:0; list-style:none; }
.footer-links li { margin:8px 0; }
.footer-links a:hover { color:var(--lime); }
.footer-contact strong { display:block; margin-bottom:8px; font-size:24px; }
.footer-contact span { color:rgba(255,255,255,.5); }
.footer-bottom { display:flex; justify-content:space-between; padding-top:24px; border-top:1px solid rgba(255,255,255,.12); color:rgba(255,255,255,.4); font-size:12px; }

/* Inner pages */
.page-hero { padding:190px 0 95px; background:var(--ink); color:#fff; }
.page-hero .eyebrow { color:rgba(255,255,255,.55); }
.page-hero p { max-width:690px; margin:25px 0 0; color:rgba(255,255,255,.6); font-size:19px; }
.prose { max-width:820px; }
.prose h2 { margin-top:2em; font-size:34px; letter-spacing:-.03em; }
.prose p { color:var(--ink-soft); }
.post-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.post-card { overflow:hidden; border:1px solid var(--line); border-radius:20px; background:var(--card); transition:.25s; }
.post-card:hover { transform:translateY(-5px); box-shadow:var(--shadow); }
.post-thumb { aspect-ratio:16/10; overflow:hidden; background:var(--paper-2); }
.post-thumb img { width:100%; height:100%; object-fit:cover; transition:.45s; }
.post-card:hover img { transform:scale(1.04); }
.post-info { padding:24px; }
.post-info time { color:var(--ink-soft); font-size:12px; }
.post-info h2,.post-info h3 { margin:10px 0; font-size:22px; line-height:1.35; }
.post-info p { margin:0; color:var(--ink-soft); font-size:14px; }
.empty-state { grid-column:1/-1; padding:55px; border:1px dashed var(--line); border-radius:20px; text-align:center; color:var(--ink-soft); }
.solution-hero-grid { display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-top:-45px; position:relative; }
.solution-card { padding:42px; border-radius:24px; background:var(--card); box-shadow:var(--shadow); }
.solution-card .num { color:var(--lime-dark); font-size:13px; font-weight:900; }
.solution-card h3 { margin:25px 0 12px; font-size:27px; }
.solution-card p { color:var(--ink-soft); }
.template-cta { display:grid; grid-template-columns:1fr auto; gap:30px; align-items:center; padding:45px; border-radius:24px; background:var(--lime); }
.template-cta h2 { margin:0 0 8px; font-size:36px; }
.template-cta p { margin:0; }
.contact-grid { display:grid; grid-template-columns:1.15fr .85fr; gap:20px; }
.contact-card { padding:42px; border:1px solid var(--line); border-radius:24px; background:var(--card); }
.contact-item { padding:20px 0; border-bottom:1px solid var(--line); }
.contact-item small { display:block; color:var(--ink-soft); }
.contact-item strong { font-size:22px; }
.qr-card { display:grid; place-items:center; text-align:center; background:var(--ink); color:#fff; }
.qr-card img { width:210px; padding:12px; border-radius:15px; background:#fff; }
.qr-card p { color:rgba(255,255,255,.55); }
.case-detail-wrap { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(280px,.8fr); gap:54px; align-items:start; }
.case-detail-media { overflow:hidden; border-radius:24px; background:var(--paper-2); box-shadow:var(--shadow); }
.case-detail-media img { width:100%; height:auto; }
.case-detail-copy .case-type { color:var(--lime-dark); font-size:12px; font-weight:900; letter-spacing:.12em; text-transform:uppercase; }
.case-detail-copy h2 { margin:14px 0 18px; font-size:34px; letter-spacing:-.035em; }
.case-detail-copy .case-summary { color:var(--ink-soft); font-size:18px; line-height:1.8; }
.case-detail-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:30px; }
.pagination { margin-top:40px; }
.pagination .page-numbers { display:inline-grid; place-items:center; min-width:42px; height:42px; margin-right:5px; border:1px solid var(--line); border-radius:50%; }
.pagination .current { background:var(--ink); color:white; }

/* Reveal */
.reveal { opacity:0; transform:translateY(22px); transition:opacity .65s ease,transform .65s ease; }
.reveal.is-visible { opacity:1; transform:none; }

@media (max-width: 1020px) {
  .primary-menu { display:none; }
  .menu-toggle { display:block; margin-left:6px; }
  .nav-cta { margin-left:auto; }
  .mobile-nav { display:none; position:fixed; inset:84px 20px auto; z-index:88; padding:18px; border-radius:20px; background:var(--ink); color:white; box-shadow:var(--shadow); }
  .mobile-nav.is-open { display:block; }
  .mobile-nav ul { margin:0; padding:0; list-style:none; }
  .mobile-nav a { display:block; padding:13px 10px; border-bottom:1px solid rgba(255,255,255,.1); }
  .hero-slide { grid-template-columns:1fr .8fr; gap:25px; }
  .hero h1 { font-size:61px; }
  .why-grid { grid-template-columns:1fr; }
  .why-card { min-height:260px; }
  .why-card::before { margin-bottom:38px; }
  .process { grid-template-columns:repeat(3,1fr); gap:50px 0; }
  .footer-grid { grid-template-columns:1fr 1fr; }
}

@media (max-width: 760px) {
  :root { --container:min(100% - 28px,1180px); --radius:18px; }
  .section { padding:80px 0; }
  .section-tight { padding:60px 0; }
  .brand-sub,.nav-cta { display:none; }
  .nav-shell { min-height:56px; padding-left:15px; }
  .brand { font-size:16px; }
  .brand-mark { width:32px; height:32px; }
  .site-header { padding:12px 0; }
  .hero { min-height:820px; padding-top:115px; }
  .hero-slider { min-height:640px; }
  .hero-slide { display:block; }
  .hero h1 { font-size:clamp(45px,13vw,62px); }
  .hero-lead { font-size:16px; }
  .hero-visual { min-height:265px; margin-top:25px; }
  .hero-art { width:min(118%,500px); transform:none; }
  .browser { max-width:330px; transform:rotate(1deg); }
  .browser-body { min-height:210px; padding:22px; }
  .mock-tag { margin-top:25px; }
  .mock-title { height:50px; }
  .mock-card { height:90px; }
  .mock-card::before { width:30px; height:30px; margin:12px; font-size:11px; }
  .float-stat { padding:10px 13px; }
  .float-stat strong { font-size:19px; }
  .float-two { right:0; top:15px; }
  .float-one { left:2px; bottom:24px; }
  .hero-bottom { display:none; }
  .trust-inner { grid-template-columns:1fr 1fr; padding:20px 0; }
  .trust-intro { grid-column:1/-1; padding-bottom:15px; }
  .trust-item { padding:14px 0; border:0; }
  .section-head { grid-template-columns:1fr; gap:18px; margin-bottom:36px; }
  .section-copy { font-size:16px; }
  .work-grid,.pricing-grid,.service-split,.solution-hero-grid,.contact-grid,.case-detail-wrap { grid-template-columns:1fr; }
  .work-card,.work-card:nth-child(3n) { grid-column:auto; min-height:390px; }
  .service-panel { min-height:auto; padding:32px 25px; }
  .service-panel+.service-panel { border-left:0; border-top:1px solid var(--line); }
  .service-panel h3 { margin-top:45px; font-size:35px; }
  .process { grid-template-columns:1fr 1fr; }
  .process-step { padding:0 12px; }
  .process-num { margin-bottom:25px; }
  .hub-grid { grid-template-columns:1fr; grid-template-rows:auto; }
  .hub-card,.hub-card:first-child { grid-row:auto; min-height:260px; }
  .hub-card:first-child h3 { font-size:34px; }
  .contact-shell { padding:42px 25px; }
  .footer-grid { grid-template-columns:1fr; gap:30px; }
  .site-footer { padding-top:60px; }
  .footer-bottom { display:block; }
  .page-hero { padding:145px 0 70px; }
  .post-grid { grid-template-columns:1fr; }
  .template-cta { grid-template-columns:1fr; padding:30px; }
  .contact-card { padding:28px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation-duration:.01ms!important; transition-duration:.01ms!important; }
  .reveal { opacity:1; transform:none; }
}