/* ==================== Index Page Styles ==================== */
/* Base reset, :root variables, nav, footer, mobile overlay, top-btn,
   page-header, and shared responsive rules live in common.css.
   This file contains only homepage-specific styles and index-only overrides. */

/* ==================== Reveal Animation ==================== */
/* Scroll-reveal system — uses !important to override common.css's
   FOUC-prevention rule so animations activate on index pages. */
[data-reveal]{opacity:0 !important;transform:translateY(48px) !important;transition:opacity .9s var(--transition),transform .9s var(--transition)}
[data-reveal].in{opacity:1 !important;transform:none !important}
[data-reveal="left"]{transform:translateX(-48px) !important}
[data-reveal="left"].in{transform:none !important}
[data-reveal="right"]{transform:translateX(48px) !important}
[data-reveal="right"].in{transform:none !important}
[data-reveal="scale"]{transform:scale(.92) !important;opacity:0 !important}
[data-reveal="scale"].in{transform:none !important;opacity:1 !important}
.d1{transition-delay:.08s}.d2{transition-delay:.16s}.d3{transition-delay:.24s}.d4{transition-delay:.32s}.d5{transition-delay:.4s}
html{overflow-x:hidden}
/* ==================== Nav Enhancements (index-only) ==================== */
.nav-logo-img{transition:filter .4s}
.nav-mobile-btn span{transition:all .3s}
.nav-mobile-btn:hover span{background:var(--c-brand)}
.nav.solid .nav-mobile-btn span{background:var(--c-text-secondary)}

/* ==================== Hero ==================== */
.hero{position:relative;min-height:100vh;display:flex;align-items:center;overflow:hidden;background:#fafafa}
.hero-bg{position:absolute;inset:0;z-index:1}
.hero-bg canvas{width:100%;height:100%}
.hero-mesh{position:absolute;inset:0;z-index:2;
  background:
    radial-gradient(ellipse 80% 60% at 10% 90%,rgba(37,99,235,.1) 0%,transparent 60%),
    radial-gradient(ellipse 60% 50% at 90% 20%,rgba(124,58,237,.08) 0%,transparent 50%),
    radial-gradient(ellipse 50% 40% at 50% 50%,rgba(245,158,11,.07) 0%,transparent 50%);
}
.hero-grid{position:absolute;inset:0;z-index:3;
  background-image:
    linear-gradient(rgba(240,240,240,1) 1px,transparent 1px),
    linear-gradient(90deg,rgba(240,240,240,1) 1px,transparent 1px);
  background-size:80px 80px;
  mask-image:radial-gradient(ellipse 70% 60% at 50% 40%,black 20%,transparent 70%);
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 40%,black 20%,transparent 70%);
}
.hero-content{position:relative;z-index:10;text-align:center;max-width:1000px;margin:0 auto;padding:0 2rem}
.hero-chip{display:inline-flex;align-items:center;gap:.6rem;padding:.4rem 1rem .4rem .5rem;background:rgba(0,0,0,.03);border:1px solid rgba(0,0,0,.06);border-radius:100px;font-size:.775rem;font-weight:500;color:var(--c-text-secondary);margin-bottom:2rem;transition:all .4s}
.hero-chip:hover{background:rgba(0,0,0,.05);color:var(--c-text)}
.hero-chip i{width:7px;height:7px;background:#22c55e;border-radius:50%;animation:blink 2.5s ease infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}
.hero h1{font-family:'Space Grotesk','Noto Sans SC','Inter',sans-serif;font-size:clamp(3.4rem,5.2vw,5.15rem);font-weight:700;color:var(--c-text);line-height:1.08;letter-spacing:-.03em;margin-bottom:2rem}
.hero h1 em{font-style:normal;background:linear-gradient(135deg,var(--c-brand),var(--c-brand-dark));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.hero-sub{font-size:clamp(.95rem,1.35vw,1.08rem);color:var(--c-text-secondary);max-width:680px;margin:0 auto 3.5rem;line-height:1.85;font-weight:400;letter-spacing:.02em}
.hero-actions{display:flex;align-items:center;justify-content:center;gap:1rem;flex-wrap:wrap;margin-top:-.35rem}
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.85rem 2rem;font-size:.9rem;font-weight:600;border-radius:var(--r-2xl);transition:all .4s var(--transition);cursor:pointer;border:none;font-family:inherit}
.btn-primary{background:var(--c-brand);color:#fff;box-shadow:0 0 0 1px rgba(37,99,235,.15)}
.btn-primary:hover{background:var(--c-brand-dark);transform:translateY(-2px);box-shadow:0 8px 32px rgba(37,99,235,.2)}
.btn-ghost{background:transparent;color:var(--c-text-secondary);border:1px solid var(--c-border-strong)}
.btn-ghost:hover{background:var(--c-surface-alt);color:var(--c-text);border-color:var(--c-text-muted)}
.hero-scroll{display:none}
.mobile-break{display:none}

/* ==================== Tag ==================== */
.tag{display:inline-flex;align-items:center;gap:.5rem;font-size:.75rem;font-weight:600;color:var(--c-brand);text-transform:uppercase;letter-spacing:.1em;margin-bottom:1.25rem}
.tag::before{content:'';width:20px;height:1.5px;background:var(--c-brand);border-radius:1px}

/* ==================== About ==================== */
.about{padding:clamp(5rem,10vw,9rem) 0;background:var(--c-surface)}
.about-wrap{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(320px,.85fr);gap:clamp(2rem,5vw,5rem);align-items:center}
.about-left{display:flex;flex-direction:column;gap:1rem}
.about-header .tag{margin-bottom:1rem}
.about-header h2{font-family:'Space Grotesk','Noto Sans SC','Inter',sans-serif;font-size:clamp(2.2rem,3.8vw,3.2rem);font-weight:700;letter-spacing:-.02em;line-height:1.15;margin-bottom:1rem}
.about-header p{font-size:1rem;color:var(--c-text-secondary);line-height:1.85}
.about-visual{position:relative;min-height:400px;display:flex;align-items:center;justify-content:center}
.about-illustration{width:100%;max-width:420px;height:auto}

/* ==================== Stage Section (shared layout) ==================== */
.stage-section{padding:clamp(5rem,10vw,9rem) 0}
.muted-band{background:var(--c-surface);border-top:1px solid var(--c-border);border-bottom:1px solid var(--c-border)}
.section-head{max-width:830px;margin-bottom:clamp(3rem,6vw,5rem)}
.global-wrap .section-head{margin-bottom: 0;}
.section-head.center{text-align:center;margin-left:auto;margin-right:auto}
.section-head h2{font-family:'Space Grotesk','Noto Sans SC','Inter',sans-serif;font-size:clamp(2.2rem,4.5vw,3.5rem);font-weight:700;letter-spacing:-.02em;line-height:1.15;margin-bottom:1.25rem}
.section-head p{font-size:1rem;color:var(--c-text-secondary);line-height:1.85}

/* ==================== Business ==================== */
.business-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.25rem}
.business-card{background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--r-xl);padding:clamp(2rem,3vw,2.75rem);transition:all .5s var(--transition);position:relative;overflow:hidden;min-height:248px}
.business-card::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(37,99,235,.2),transparent);opacity:0;transition:opacity .5s}
.business-card:hover{border-color:rgba(37,99,235,.12);box-shadow:var(--shadow-lg);transform:translateY(-4px)}
.business-card:hover::before{opacity:1}
.business-card-icon{width:44px;height:44px;display:flex;align-items:center;justify-content:center;border-radius:var(--r-md);margin-bottom:1.25rem;background:var(--c-surface-alt);transition:background .3s}
.business-card:hover .business-card-icon{background:rgba(37,99,235,.08)}
.business-card-icon svg{width:20px;height:20px;stroke:var(--c-brand);stroke-width:1.5;fill:none;stroke-linecap:round;stroke-linejoin:round}
.business-card h3{font-size:1.2rem;font-weight:700;margin-bottom:.7rem;letter-spacing:-.01em;white-space: nowrap;}
.business-card p{font-size:.92rem;color:var(--c-text-secondary);line-height:1.78}

/* ==================== PowerTokens ==================== */
.powertokens-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem}
.powertokens-card{background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--r-xl);padding:clamp(1.75rem,2.5vw,2.35rem);min-height:220px;transition:all .5s var(--transition);position:relative;overflow:hidden}
.powertokens-card:hover{border-color:rgba(37,99,235,.14);box-shadow:var(--shadow-lg);transform:translateY(-4px)}
.powertokens-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--c-brand),var(--c-brand-light));transform:scaleX(0);transform-origin:left;transition:transform .5s var(--transition)}
.powertokens-card:hover::before{transform:scaleX(1)}
.powertokens-card .pt-icon{width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:var(--c-surface-alt);border-radius:10px;margin-bottom:1.35rem;color:var(--c-brand)}.powertokens-card .pt-icon svg{width:20px;height:20px}
.powertokens-card h3{font-size:1.05rem;font-weight:700;margin-bottom:.65rem}
.powertokens-card p{font-size:.88rem;color:var(--c-text-secondary);line-height:1.75}

/* ==================== Service Scenarios ==================== */
.scenario-grid{display:flex;flex-direction:column}
.scenario-row{display:grid;grid-template-columns:48px 1fr 160px;gap:2rem;align-items:center;padding:1.5rem 0;border-bottom:1px solid var(--c-border)}
.scenario-row:first-child{border-top:1px solid var(--c-border)}
.scenario-row:last-child{border-bottom:none}
.scenario-row-num{font-family:'Space Grotesk','Inter',sans-serif;font-size:.82rem;font-weight:600;color:var(--c-text-muted);letter-spacing:.08em}
.scenario-row-body h3{font-size:1.12rem;font-weight:700;margin-bottom:.6rem;letter-spacing:-.01em}
.scenario-row-body p{font-size:.9rem;color:var(--c-text-secondary);line-height:1.78;max-width:540px}
.scenario-row-icon{display:flex;align-items:center;justify-content:center;width:160px}
.scenario-row-icon svg{width:72px;height:72px;stroke:var(--c-brand);stroke-width:1.3;fill:none;stroke-linecap:round;stroke-linejoin:round}
/* Scenario icon animations */
.sc-icon-net .s-node{animation:sNodePulse 2s ease-in-out infinite}
.sc-icon-net .s-line{stroke-dasharray:6;stroke-dashoffset:6;animation:sLineFlow 1.8s ease-in-out infinite}
.sc-icon-dash .s-bar{transform-origin:bottom;animation:sBarGrow 2.5s ease-in-out infinite}
.sc-icon-dash .s-scan{animation:sScan 3s ease-in-out infinite}
.sc-icon-chart .s-bar1{animation:sChartGrow 2s ease-in-out infinite}
.sc-icon-chart .s-bar2{animation:sChartGrow 2s ease-in-out .3s infinite}
.sc-icon-chart .s-bar3{animation:sChartGrow 2s ease-in-out .6s infinite}
.sc-icon-chart .s-arrow{stroke-dasharray:20;stroke-dashoffset:20;animation:sDraw 1.5s ease .9s forwards}
.sc-icon-support .s-headset{animation:sSupportPulse 2.5s ease-in-out infinite}
.sc-icon-support .s-wave{stroke-dasharray:6;stroke-dashoffset:6;animation:sWaveFlow 2s ease-in-out infinite}
@keyframes sNodePulse{0%,100%{r:3;opacity:.5}50%{r:4.5;opacity:1}}
@keyframes sLineFlow{0%{stroke-dashoffset:6}50%{stroke-dashoffset:0}100%{stroke-dashoffset:-6}}
@keyframes sBarGrow{0%,100%{transform:scaleY(1)}50%{transform:scaleY(1.15)}}
@keyframes sScan{0%,100%{opacity:.2}50%{opacity:.7}}
@keyframes sChartGrow{0%,100%{transform:scaleY(1)}50%{transform:scaleY(1.2)}}
@keyframes sDraw{to{stroke-dashoffset:0}}
@keyframes sSupportPulse{0%,100%{opacity:.5}50%{opacity:1}}
@keyframes sWaveFlow{0%{stroke-dashoffset:6}50%{stroke-dashoffset:0}100%{stroke-dashoffset:-6}}

/* ==================== Service Capability ==================== */
.service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem}
.service-card{background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--r-xl);padding:clamp(2rem,3vw,2.65rem);min-height:255px;transition:all .45s var(--transition);position:relative;overflow:hidden}
.service-card:hover{border-color:rgba(37,99,235,.14);box-shadow:var(--shadow-lg);transform:translateY(-4px)}
.service-icon{width:44px;height:44px;display:flex;align-items:center;justify-content:center;border-radius:var(--r-md);margin-bottom:1.25rem;background:var(--c-surface-alt);transition:background .3s}
.service-card:hover .service-icon{background:rgba(37,99,235,.08)}
.service-icon svg{width:20px;height:20px;stroke:var(--c-brand);stroke-width:1.5;fill:none;stroke-linecap:round;stroke-linejoin:round}
.service-card h3{font-size:1.12rem;font-weight:700;margin-bottom:.75rem}
.service-card p{font-size:.9rem;color:var(--c-text-secondary);line-height:1.78}

/* ==================== Global Service ==================== */
.global-wrap{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(320px,.92fr);gap:clamp(2rem,5vw,5rem);align-items:center}
.global-panel{position:relative;min-height:440px;overflow:hidden;padding:1.5rem;display:flex;align-items:center;justify-content:center}
.global-illustration{width:100%;height:auto;max-width:480px}
.global-notes{display:grid;gap:1rem;margin-top:2rem}
.global-note{border-top:1px solid var(--c-border);padding-top:1rem}
.global-note h3{font-size:1rem;font-weight:700;margin-bottom:.3rem}
.global-note p{font-size:.9rem;color:var(--c-text-secondary);line-height:1.72}

/* ==================== Contact ==================== */
.contact-section{padding:clamp(5rem,10vw,8rem) 0}
.contact-box{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(2rem,5vw,5rem);align-items:start;background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--r-2xl);padding:clamp(2.5rem,5vw,4.5rem);position:relative;overflow:hidden;box-shadow:var(--shadow-sm)}
.contact-box::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 55% 70% at 20% 80%,rgba(37,99,235,.06),transparent 62%),radial-gradient(ellipse 40% 50% at 90% 10%,rgba(245,158,11,.04),transparent 58%)}
.contact-box>*{position:relative;z-index:1}
.contact-box h2{font-family:'Space Grotesk','Noto Sans SC','Inter',sans-serif;font-size:clamp(2rem,4vw,3rem);font-weight:700;color:var(--c-text);letter-spacing:-.02em;line-height:1.15;margin-bottom:1rem}
.contact-box p{font-size:1rem;color:var(--c-text-secondary);line-height:1.85;max-width:560px}
.contact-list{display:grid;gap:1rem}
.contact-item{position:relative;background:var(--c-surface-alt);border:1px solid var(--c-border);border-radius:var(--r-lg);padding:1.25rem;padding-left:2.5rem;color:var(--c-text);transition:all .3s}
.contact-item span{display:block;font-size:.75rem;color:var(--c-text-muted);margin-bottom:.35rem}
.contact-item a,.contact-item strong{font-size:.95rem;color:var(--c-text);font-weight:600}
.contact-item:hover{border-color:rgba(37,99,235,.2);box-shadow:var(--shadow-sm);transform:translateY(-2px)}
.contact-icon{position:absolute;left:1rem;top:50%;transform:translateY(-50%);opacity:.6;transition:opacity .3s}
.contact-icon svg{width:18px;height:18px;stroke:var(--c-brand);stroke-width:1.5;fill:none;stroke-linecap:round;stroke-linejoin:round}
.contact-item:hover .contact-icon{opacity:1}

/* ==================== Footer Overrides (index-only) ==================== */
.footer-brand b{letter-spacing:-.01em}
.footer-bottom{flex-wrap:wrap;gap:1rem}

/* ==================== Responsive ==================== */
@media(max-width:1440px){
  .about-wrap{grid-template-columns:minmax(0,1fr) minmax(320px,.85fr);}
  .business-card h3{white-space: initial;}
  .about-header h2 br{display: none;}
}
@media(max-width:1180px){.nav-menu a{padding:.45rem .52rem;font-size:.82rem}.powertokens-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:1024px){.business-grid,.service-grid{grid-template-columns:1fr}.global-wrap,.contact-box{grid-template-columns:1fr}.global-panel{min-height:360px}.scenario-row{grid-template-columns:36px 1fr 120px;gap:1.5rem}}
@media(max-width:768px){.business-grid,.powertokens-grid,.service-grid{grid-template-columns:1fr}.scenario-row{grid-template-columns:32px 1fr;gap:1rem}.scenario-row-icon{display:none}.business-card,.powertokens-card,.service-card{min-height:auto}.about-wrap{grid-template-columns:1fr;gap:2.5rem}.about-visual{min-height:320px}.hero-content{padding:0 1.25rem}.hero h1{font-size:clamp(2.65rem,13vw,3.35rem);line-height:1.06;letter-spacing:-.035em}.mobile-break{display:block}.hero-sub{font-size:.95rem;max-width:36ch}.hero-actions{gap:.65rem}.btn{padding:.78rem 1.05rem;font-size:.84rem}.contact-box{border-radius:var(--r-xl)}
}

/* ==================== Print ==================== */
@media print{.nav,.top-btn{position:static}.hero{min-height:auto;padding:8rem 0 6rem}}