/* v3.6 brand refresh and mobile stability overrides */
:root{
 --primary:var(--brand-primary,#9E5252);
 --primary-2:var(--brand-secondary,#D9637C);
 --pink:var(--brand-glow,#F5A0B5);
 --cyan:#F7B7C6;
 --green:#B76672;
 --orange:#E58A98;
 --bg-soft:#FFF8F8;
 --bg-mist:#FFF1F3;
 --surface-3:#FBE8EB;
 --shadow:0 20px 64px color-mix(in srgb,var(--brand-primary,#9E5252) 15%,transparent);
 --shadow-lg:0 36px 100px color-mix(in srgb,var(--brand-primary,#9E5252) 24%,transparent);
}
html.pre-dark,html[data-theme=dark]{
 --bg:#07162F;
 --bg-soft:#091C39;
 --bg-mist:#0C2244;
 --surface:#0E274B;
 --surface-2:#112D55;
 --surface-3:#17365F;
 --text:#FFF4F5;
 --muted:#BCA9B5;
 --line:#344563;
 --primary:#C97B84;
 --primary-2:#E48FA2;
 --pink:#F3A8B8;
}
body{background-image:radial-gradient(circle at 12% 7%,color-mix(in srgb,var(--pink) 8%,transparent),transparent 28%),radial-gradient(circle at 90% 24%,color-mix(in srgb,var(--primary) 7%,transparent),transparent 26%)}
.page-progress{background:linear-gradient(90deg,var(--primary),var(--primary-2),var(--pink));box-shadow:0 0 18px color-mix(in srgb,var(--pink) 80%,transparent)}
.site-header.scrolled{box-shadow:0 14px 42px color-mix(in srgb,var(--primary) 10%,transparent)}

/* official logo */
.brand-image-link{min-width:154px;display:flex;align-items:center}
.brand-logo-picture{position:relative;display:block;width:168px;height:44px;flex:0 0 auto}
.brand-logo-picture img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:left center}
.brand-logo-dark{display:none}
html.pre-dark .brand-logo-light,html[data-theme=dark] .brand-logo-light{display:none}
html.pre-dark .brand-logo-dark,html[data-theme=dark] .brand-logo-dark{display:block}
.footer-brand-picture{width:202px;height:54px}

/* Rose/JD-like atmosphere */
.hero{background:linear-gradient(125deg,var(--bg) 4%,color-mix(in srgb,var(--bg-mist) 72%,var(--bg)) 52%,color-mix(in srgb,var(--pink) 18%,var(--bg)) 100%)}
[data-theme=dark] .hero{background:linear-gradient(125deg,#07162f 5%,#0b1c39 48%,#25172c 100%)}
.hero-aurora{filter:blur(72px);mix-blend-mode:multiply}
html[data-theme=dark] .hero-aurora{mix-blend-mode:screen}
.hero-aurora.a1{background:var(--brand-glow,#F5A0B5);opacity:.46}
.hero-aurora.a2{background:#D77C91;opacity:.35}
.hero-particles{background-image:radial-gradient(circle at 10% 20%,color-mix(in srgb,var(--pink) 76%,transparent) 0 2px,transparent 3px),radial-gradient(circle at 80% 28%,color-mix(in srgb,var(--primary-2) 66%,transparent) 0 2px,transparent 3px),radial-gradient(circle at 30% 75%,color-mix(in srgb,var(--primary) 62%,transparent) 0 2px,transparent 3px),radial-gradient(circle at 90% 72%,color-mix(in srgb,var(--pink) 68%,transparent) 0 2px,transparent 3px)}
.rotating-word{background:linear-gradient(90deg,var(--primary),var(--primary-2),var(--pink));background-clip:text;-webkit-background-clip:text}
.header-contact,.btn-primary{background:linear-gradient(105deg,var(--primary),var(--primary-2));box-shadow:0 14px 32px color-mix(in srgb,var(--primary) 28%,transparent)}
.header-contact:hover,.btn-primary:hover{box-shadow:0 18px 40px color-mix(in srgb,var(--primary) 38%,transparent)}
.nav-art:before,.nav-art:after{background:linear-gradient(90deg,var(--primary),var(--primary-2))}
.hero-badge{box-shadow:0 12px 30px color-mix(in srgb,var(--primary) 10%,transparent)}
.hero-console,.capability-stage,.revolution-stage{box-shadow:0 28px 80px color-mix(in srgb,var(--primary) 14%,transparent)}
.final-cta{background:linear-gradient(105deg,#874547,var(--primary),var(--primary-2))}
.cta-btn{color:var(--primary)}
.pain-glow{background:radial-gradient(circle,color-mix(in srgb,var(--pink) 28%,transparent),transparent 68%)}

/* Brand replaces AI placeholders */
.pain-brand-core{width:188px;height:188px;border-radius:50%;padding:22px;background:linear-gradient(145deg,color-mix(in srgb,var(--surface) 88%,transparent),color-mix(in srgb,var(--pink) 16%,var(--surface)));border:1px solid color-mix(in srgb,var(--primary) 28%,var(--line));box-shadow:0 30px 80px color-mix(in srgb,var(--pink) 40%,transparent),inset 0 0 34px color-mix(in srgb,var(--pink) 14%,transparent)}
.pain-brand-core img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 10px 18px color-mix(in srgb,var(--primary) 25%,transparent))}
.pain-brand-core:after{content:"";position:absolute;inset:12px;border:1px solid color-mix(in srgb,var(--primary) 18%,transparent);border-radius:50%;animation:pulseRing 3.2s ease-out infinite}

.about-logo{gap:18px;min-width:0}
.about-logo .about-ai-badge{flex:0 0 62px}
.about-brand-picture{position:relative;display:block;width:min(270px,calc(100% - 80px));height:68px}
.about-brand-picture img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:left center}

/* Strategy cockpit recolored + official mark in center */
.strategy-v35{--strategy-accent:var(--primary);--strategy-accent-2:var(--primary-2);--strategy-cyan:var(--pink);--strategy-ink:#fff6f7;--strategy-muted:#d3b9c1;background:radial-gradient(circle at 50% 38%,color-mix(in srgb,var(--pink) 16%,transparent),transparent 35%),linear-gradient(160deg,#151021,#261522 55%,#12152a)}
.strategy-v35:before{background:radial-gradient(circle at 50% 10%,color-mix(in srgb,var(--pink) 16%,transparent),transparent 54%)}
.strategy-v35 .eyebrow{color:#ffdbe2;background:color-mix(in srgb,var(--primary) 18%,transparent);border-color:color-mix(in srgb,var(--pink) 28%,transparent)}
.strategy-command{border-color:color-mix(in srgb,var(--pink) 23%,transparent);box-shadow:0 40px 110px rgba(35,7,18,.55),0 0 80px color-mix(in srgb,var(--primary) 14%,transparent)}
.strategy-status span i{background:var(--pink);box-shadow:0 0 0 6px color-mix(in srgb,var(--pink) 15%,transparent),0 0 20px var(--pink)}
.strategy-active-icon,.strategy-orbit-node.active{color:#fff;background:linear-gradient(145deg,var(--primary),var(--primary-2));box-shadow:0 14px 35px color-mix(in srgb,var(--primary) 35%,transparent)}
.strategy-readiness>i>em{background:linear-gradient(90deg,var(--primary),var(--pink))}
.strategy-contact{background:linear-gradient(100deg,var(--primary),var(--primary-2));box-shadow:0 18px 38px color-mix(in srgb,var(--primary) 30%,transparent)}
.strategy-engine{background:radial-gradient(circle at 50% 50%,color-mix(in srgb,var(--pink) 15%,transparent),transparent 43%),linear-gradient(150deg,rgba(255,255,255,.035),rgba(255,255,255,.008))}
.strategy-grid-plane{background-image:linear-gradient(color-mix(in srgb,var(--pink) 9%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--pink) 9%,transparent) 1px,transparent 1px)}
.strategy-scanline{background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--pink) 50%,transparent),transparent)}
.strategy-orbit{border-color:color-mix(in srgb,var(--pink) 28%,transparent);box-shadow:inset 0 0 28px color-mix(in srgb,var(--primary) 8%,transparent),0 0 22px color-mix(in srgb,var(--pink) 7%,transparent)}
.strategy-brand-core{width:154px;height:154px;border-radius:50%;padding:23px;background:radial-gradient(circle at 50% 38%,rgba(255,255,255,.17),transparent 38%),linear-gradient(150deg,#321823,var(--primary));box-shadow:0 28px 70px color-mix(in srgb,var(--primary) 42%,transparent),0 0 0 12px color-mix(in srgb,var(--pink) 7%,transparent),inset 0 1px rgba(255,255,255,.38)}
.strategy-brand-core:before{border-radius:50%;border-color:color-mix(in srgb,var(--pink) 42%,transparent)}
.strategy-brand-core img{width:78px;height:78px;object-fit:contain;filter:drop-shadow(0 8px 15px rgba(0,0,0,.28));position:relative;z-index:2}
.strategy-brand-core em{position:relative;z-index:2;margin-top:5px;color:#ffe8ed;font-size:9px;letter-spacing:.1em}
.strategy-orbit-node{border-color:color-mix(in srgb,var(--pink) 30%,transparent);background:rgba(49,24,36,.88);color:#fbd5de}
.radar-value{fill:color-mix(in srgb,var(--primary) 26%,transparent);stroke:var(--pink)}
.radar-dot{background:var(--pink);box-shadow:0 0 16px var(--pink)}
.strategy-stage.active{border-color:color-mix(in srgb,var(--pink) 45%,transparent);background:linear-gradient(145deg,color-mix(in srgb,var(--primary) 22%,transparent),rgba(255,255,255,.045));box-shadow:0 18px 38px color-mix(in srgb,var(--primary) 18%,transparent)}

/* Benchmarks: complete decorative perimeter on every viewport */
.benchmark-scroller{padding:24px 14px 38px;scroll-padding-inline:14px;overflow-y:visible;mask-image:none;-webkit-mask-image:none}
.benchmark-card{overflow:visible;isolation:isolate;border:0;box-shadow:0 18px 48px color-mix(in srgb,var(--primary) 10%,transparent)}
.benchmark-card:before{content:"";position:absolute;inset:-1px;width:auto;height:auto;border:1px solid color-mix(in srgb,var(--accent) 58%,var(--line));border-radius:inherit;background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 15%,transparent),transparent 42%,color-mix(in srgb,var(--pink) 10%,transparent));z-index:-2}
.benchmark-card:after{content:"";position:absolute;inset:8px;border:1px solid color-mix(in srgb,var(--accent) 23%,transparent);border-radius:calc(var(--radius) - 7px);pointer-events:none;z-index:-1}
.benchmark-card>*{position:relative;z-index:1}

/* Footer social links are data-driven and long-label safe */
.socials{display:flex;gap:10px;flex-wrap:wrap}
.socials a{width:auto;min-width:48px;height:38px;padding:0 14px;border-radius:12px;font-size:12px;font-weight:800;letter-spacing:.04em;border:1px solid color-mix(in srgb,var(--primary) 20%,var(--line));background:linear-gradient(145deg,var(--surface),color-mix(in srgb,var(--pink) 10%,var(--surface)));transition:transform .25s,box-shadow .25s,border-color .25s}
.socials a:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--primary) 48%,var(--line));box-shadow:0 12px 25px color-mix(in srgb,var(--primary) 16%,transparent)}

/* Safer text wrapping */
.section-heading h2,.revolution-slide h3,.benchmark-card h3{overflow-wrap:anywhere;text-wrap:balance}
.revolution-copy,.revolution-slide,.benchmark-card{min-width:0}

@media(max-width:1250px){
 .brand-logo-picture{width:148px;height:40px}
}
@media(max-width:980px){
 .brand-image-link{min-width:0}
 .brand-logo-picture{width:142px;height:38px}
 .strategy-brand-core{width:142px;height:142px}
 .benchmark-scroller{padding-inline:8px}
}
@media(max-width:680px){
 .site-header .brand-logo-picture{width:126px;height:34px}
 .revolution-section{padding-top:82px}
 .revolution-section .section-heading{margin-bottom:28px;padding-inline:6px}
 .revolution-section .section-heading h2{font-size:clamp(29px,8.3vw,36px);line-height:1.24;letter-spacing:-.025em;margin-bottom:14px;max-width:100%}
 .revolution-section .section-subtitle{line-height:1.75;max-width:96%}
 .revolution-stage{width:calc(100% - 28px);display:block;min-height:0;overflow:hidden;border-radius:25px}
 .revolution-copy{display:block;padding:26px 21px 30px;min-height:430px}
 .revolution-index{margin-bottom:20px}
 .revolution-slide{min-height:265px}
 .revolution-slide h3{font-size:clamp(27px,8.2vw,34px);line-height:1.24;margin:10px 0 14px;position:static;max-width:100%}
 .revolution-slide p{font-size:15px;line-height:1.75;margin-bottom:10px}
 .rev-controls{position:static;margin-top:24px;justify-content:space-between;max-width:100%}
 .rev-dots{flex:1;justify-content:center;overflow:visible}
 .revolution-visual{min-height:365px}
 .pain-brand-core{width:142px;height:142px;padding:18px}
 .about-logo{align-items:center;gap:13px}
 .about-logo .about-ai-badge{width:54px;height:54px;flex-basis:54px;border-radius:15px}
 .about-brand-picture{height:58px;width:calc(100% - 68px)}
 .strategy-brand-core{width:114px;height:114px;padding:18px}
 .strategy-brand-core img{width:58px;height:58px}
 .strategy-brand-core em{font-size:7.5px;line-height:1.2}
 .benchmark-scroller{grid-auto-columns:calc(100% - 22px);gap:15px;padding:18px 11px 32px;scroll-snap-type:x mandatory}
 .benchmark-card{scroll-snap-align:center;margin:0 1px;padding:25px 23px 28px;border-radius:22px}
 .benchmark-card:after{inset:7px;border-radius:15px}
 .benchmark-card h3{font-size:23px;line-height:1.28}
 .benchmark-card p{min-height:0}
 .footer-brand-picture{width:190px;height:50px}
 .socials a{min-width:54px;height:40px;padding-inline:13px}
}
@media(max-width:430px){
 .site-header .brand-logo-picture{width:112px;height:32px}
 .revolution-section .section-heading h2{font-size:29px}
 .revolution-copy{padding-inline:18px}
 .revolution-slide{min-height:285px}
 .benchmark-scroller{grid-auto-columns:calc(100% - 16px);padding-inline:8px}
 .benchmark-card{padding-inline:20px}
 .about-brand-picture{height:52px}
}
@media(prefers-reduced-motion:reduce){
 .pain-brand-core:after{animation:none}
}


/* v3.7 contact launcher, quick-contact card and mobile revolution stability */
.about-logo-only{display:block;min-height:74px}
.about-logo-only .about-brand-picture{width:min(330px,100%);height:74px}

.quick-contact-dialog{position:relative;width:min(430px,calc(100vw - 30px));padding:18px;background:var(--surface);border:1px solid color-mix(in srgb,var(--line) 82%,transparent);border-radius:24px;box-shadow:0 34px 90px rgba(14,30,62,.32);transform:translateY(18px) scale(.97);transition:.34s var(--ease);overflow:hidden}
.open .quick-contact-dialog{transform:none}
.quick-contact-head{height:54px;display:flex;align-items:center;justify-content:space-between;padding:0 2px 14px;border-bottom:1px solid var(--line)}
.quick-contact-head h2{margin:0;font-size:20px;letter-spacing:-.02em}
.quick-contact-close{min-width:58px;height:32px;padding:0 14px;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--muted);font-size:12px;cursor:pointer;transition:.25s}
.quick-contact-close:hover{border-color:color-mix(in srgb,var(--primary) 36%,var(--line));color:var(--primary);background:color-mix(in srgb,var(--primary) 6%,var(--surface))}
.quick-contact-list{display:grid;gap:14px;padding-top:16px}
.quick-contact-item{width:100%;min-height:80px;display:grid;grid-template-columns:58px minmax(0,1fr) auto;align-items:center;gap:14px;padding:13px;border:1px solid color-mix(in srgb,var(--line) 74%,transparent);border-radius:17px;background:linear-gradient(145deg,var(--surface-2),color-mix(in srgb,var(--surface) 92%,var(--primary) 8%));color:var(--text);text-align:left;text-decoration:none;cursor:pointer;transition:transform .25s,border-color .25s,box-shadow .25s}
.quick-contact-item:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--primary) 28%,var(--line));box-shadow:0 14px 34px color-mix(in srgb,var(--primary) 12%,transparent)}
.quick-contact-icon{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;color:#fff;box-shadow:0 10px 24px color-mix(in srgb,currentColor 20%,transparent)}
.quick-contact-icon .icon{width:27px;height:27px}
.quick-contact-icon-wechat{background:#10ad5a}.quick-contact-icon-phone{background:#2d6de8}.quick-contact-icon-cooperate{background:#f5a000}
.quick-contact-copy{min-width:0}.quick-contact-copy h3{margin:0 0 4px;font-size:15px}.quick-contact-copy p{margin:0;color:var(--muted);font-size:12px}.quick-contact-copy strong{display:block;color:#2d6de8;font-size:15px;line-height:1.35;overflow-wrap:anywhere}.quick-contact-cooperate .quick-contact-copy strong{color:var(--primary)}
.quick-contact-qr{width:84px;height:84px;margin:0;padding:7px;background:#fff;border:1px solid var(--line);border-radius:10px}.quick-contact-qr img{width:100%;height:100%;display:block;object-fit:contain;image-rendering:pixelated}

/* Compact mode means a real circle on every viewport; labels are fully removed. */
.floating-tools.floating-compact{padding:0;background:transparent;border:0;box-shadow:none;backdrop-filter:none;gap:10px}
.floating-tools.floating-compact .tool:not(.tool-top){width:60px!important;height:60px!important;min-height:60px!important;border-radius:50%!important;display:grid!important;grid-template-columns:1fr!important;grid-template-rows:1fr!important;padding:0!important;place-items:center!important;box-shadow:0 16px 34px color-mix(in srgb,var(--tool-color) 35%,transparent)}
.floating-tools.floating-compact .tool-label,.floating-tools.floating-compact .tool-phone-number{display:none!important}
.floating-tools.floating-compact .tool .icon{width:27px;height:27px}

@media(max-width:680px){
 .about-logo-only{min-height:60px}.about-logo-only .about-brand-picture{width:min(285px,100%);height:60px}
 .revolution-visual{display:flex!important;flex-direction:column;align-items:center;justify-content:center;gap:31px;min-height:430px!important;padding:38px 18px 27px}
 .revolution-visual .rev-rings{flex:0 0 auto}
 .revolution-visual .rev-year{position:relative!important;right:auto!important;bottom:auto!important;z-index:4;width:100%;min-height:62px;padding:12px 14px 0;text-align:center;border-top:1px solid color-mix(in srgb,var(--primary) 16%,var(--line));background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--primary) 5%,transparent))}
 .revolution-visual .rev-year strong{font-size:27px;line-height:1.15;white-space:nowrap}
 .revolution-visual .rev-year span{display:block;margin-top:7px}
 .floating-tools.floating-compact{left:auto!important;right:18px!important;bottom:calc(18px + env(safe-area-inset-bottom))!important;display:flex!important;width:auto!important;grid-template-columns:none!important}
 .floating-tools.floating-compact .tool:not(.tool-top){width:58px!important;height:58px!important;min-height:58px!important}
 .floating-tools.floating-expanded{grid-template-columns:1fr;width:min(180px,calc(100vw - 28px));left:auto!important;right:14px!important;bottom:calc(14px + env(safe-area-inset-bottom))!important}
 .floating-tools.floating-expanded .tool:not(.tool-top){grid-template-columns:28px 1fr;grid-template-rows:1fr;height:56px;min-height:56px;padding:0 15px;text-align:left;place-items:center start}
 .floating-tools.floating-expanded .tool-label{font-size:12px}
 .quick-contact-modal{padding:10px;align-items:center}
 .quick-contact-dialog{width:100%;max-width:410px;padding:16px;border-radius:22px}
 .quick-contact-item{min-height:80px;grid-template-columns:54px minmax(0,1fr) auto;gap:11px;padding:12px}
 .quick-contact-icon{width:50px;height:50px}.quick-contact-qr{width:78px;height:78px}
}
@media(max-width:370px){
 .quick-contact-dialog{padding:13px}.quick-contact-list{gap:10px}.quick-contact-item{grid-template-columns:48px minmax(0,1fr) auto;padding:10px;gap:9px}.quick-contact-icon{width:46px;height:46px}.quick-contact-qr{width:66px;height:66px}.quick-contact-copy h3{font-size:14px}.quick-contact-copy strong{font-size:13px}
 .revolution-visual{gap:26px;padding-inline:12px}.rev-rings{width:248px!important;height:248px!important}
}

/* v3.8 appointment-modal brand unification and compact mobile hero rhythm */
.contact-dialog{
 border:1px solid color-mix(in srgb,var(--primary) 18%,var(--line));
 box-shadow:0 42px 110px color-mix(in srgb,var(--primary) 22%,rgba(0,0,0,.38));
}
.contact-aside{
 background:
  radial-gradient(circle at 18% 12%,rgba(255,255,255,.18),transparent 26%),
  linear-gradient(148deg,color-mix(in srgb,var(--primary) 88%,#6e3038) 0%,var(--primary) 46%,var(--primary-2) 100%);
}
.contact-aside:before{
 border-color:rgba(255,255,255,.075);
 box-shadow:0 0 70px color-mix(in srgb,var(--pink) 32%,transparent);
}
.contact-aside:after{
 background-image:
  linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),
  linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px),
  radial-gradient(circle at 78% 22%,color-mix(in srgb,var(--pink) 34%,transparent),transparent 32%);
}
.contact-aside>small{color:#ffe7ec;opacity:.92}
.contact-benefits>span{color:#fff7f8}
.contact-modal .btn-primary{
 background:linear-gradient(105deg,var(--primary),var(--primary-2));
 box-shadow:0 14px 32px color-mix(in srgb,var(--primary) 30%,transparent);
}
.contact-modal .btn-primary:hover{box-shadow:0 18px 42px color-mix(in srgb,var(--primary) 42%,transparent)}
.contact-modal .radio-grid input:checked+i,
.contact-modal .contact-form input:focus,
.contact-modal .contact-form textarea:focus{border-color:var(--primary)}
.contact-modal .radio-grid input:checked+i:after{background:var(--primary)}

@media(max-width:680px){
 .hero-copy{padding-top:6px}
 .hero-badge{margin-bottom:0}
 .hero-title{
  margin:18px auto 8px;
  line-height:1.055;
 }
 .rotating-word{min-height:1.02em}
 .hero-subtitle{
  margin:0 auto 20px;
  line-height:1.68;
 }
 .hero-actions{margin-top:0}
 .contact-aside{
  min-height:220px;
  padding:27px 22px;
 }
}
@media(max-width:430px){
 .hero-title{margin-top:16px;margin-bottom:6px}
 .hero-subtitle{margin-bottom:18px;line-height:1.64}
}