/* ==========================================================================
   Shanghai Relyon Metal Materials Co., Ltd. — brand theme layer
   "LINE & LAYER"
   Design language: white paper · 1px hairlines · no gradients · no glow ·
   no shadows-as-decoration · no decorative grids. Motion comes from lines
   that draw themselves. Accent (RL blue) is used ONLY as thin line / small
   solid — never as a large colour field. Deep surfaces are graphite-black,
   never navy.
   Loaded AFTER style.css.
   ========================================================================== */

:root{
  --paper:#FFFFFF;
  --paper-2:#FAFAFB;
  --paper-3:#F1F2F4;

  --ink:#0E1216;
  --ink-2:#151A1F;
  --ink-3:#1C2228;
  --ink-4:#2A3138;

  --line:rgba(14,18,22,.14);
  --line-2:rgba(14,18,22,.075);
  --text:#1A1F25;
  --dim:#5F6B76;
  --dim-2:#6A757F;

  /* RL brand blue — hairlines, ticks, small solids only */
  --accent:#1B5EA8;
  --accent-2:#6E9CCB;
  --accent-d:#15508F;
  --gold:var(--accent);
  --gold-l:var(--accent-2);
  --gold-d:var(--accent-d);

  --ok:#2F6B4C;
  --sans:'Inter','Helvetica Neue',Helvetica,Arial,'PingFang SC','Hiragino Sans GB','Microsoft YaHei',sans-serif;
  --disp:'Sora','Space Grotesk','Inter','Helvetica Neue',Arial,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,'SF Mono',Menlo,Consolas,monospace;

  --nav-h:78px;
  --wrap:1180px;
  --r:2px;                                    /* near-square: structural */
  --ease:cubic-bezier(.22,.61,.36,1);
  --slow:cubic-bezier(.33,.02,.12,1);

  /* outline instead of shadow */
  --sh-sm:0 0 0 1px rgba(14,18,22,.05);
  --sh-md:0 0 0 1px rgba(14,18,22,.07),0 16px 44px rgba(14,18,22,.07);
}

a:hover{color:var(--accent-d);}
::selection{background:var(--accent);color:#fff;}
:focus-visible{outline:1px solid var(--accent-d);outline-offset:3px;}
::-webkit-scrollbar-thumb{background:#C4CAD1;border:2px solid var(--paper-2);}

/* ==========================================================================
   1. KILL THE AI TELLS — grids, glows, gradients
   ========================================================================== */
.hero::before,.phero::before,.hero::after{
  content:none!important;display:none!important;background-image:none!important;
}
.card,.pcard,.img-card,.hero-fig .img-card{box-shadow:none;}

/* ==========================================================================
   2. MOTION PRIMITIVES — everything animates as a line drawing
   ========================================================================== */
@keyframes LineSlideUp{from{opacity:0;transform:translateY(22px);}to{opacity:1;transform:none;}}
@keyframes LineGrowX{from{transform:scaleX(0);}to{transform:scaleX(1);}}
@keyframes LineGrowY{from{transform:scaleY(0);}to{transform:scaleY(1);}}
@keyframes LineDraw{to{stroke-dashoffset:0;}}
@keyframes FadeIn{to{opacity:1;}}
@keyframes WipeUp{from{clip-path:inset(0 0 102% 0);}to{clip-path:inset(0 0 -4% 0);}}
@keyframes SweepOnce{
  0%{transform:translateX(-60%) skewX(-14deg);opacity:0;}
  18%{opacity:.85;}
  100%{transform:translateX(220%) skewX(-14deg);opacity:0;}
}
/* masked headline: copy rises out of nothing, like ink on paper */
@keyframes HeroLineUp{
  from{opacity:0;transform:translateY(0.34em);}
  to{opacity:1;transform:translateY(0);}
}

/* ==========================================================================
   3. TYPE
   ========================================================================== */
h1,h2,h3,h4,h5,h6{color:var(--ink);letter-spacing:-.034em;}
h1.hero-h{font-family:var(--disp);font-weight:700;letter-spacing:-.045em;line-height:1.04;
  font-size:clamp(2.35rem,4.85vw,3.7rem);}
h2.sec-h{font-family:var(--disp);font-weight:600;letter-spacing:-.038em;line-height:1.1;}
h3.card-h{font-family:var(--disp);letter-spacing:-.018em;}
.gold,.accent{color:var(--accent-d);}
.lead{color:var(--dim);font-size:1.06rem;line-height:1.78;}

/* eyebrow: monospaced label + a hairline that draws itself */
.eyebrow{
  font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.24em;
  text-transform:uppercase;color:var(--accent-d);margin-bottom:22px;
}
.eyebrow::before{width:34px;height:1px;background:var(--accent);animation:LineGrowX .9s var(--ease) .25s backwards;}
.eyebrow.center::after{width:34px;height:1px;background:var(--accent);animation:LineGrowX .9s var(--ease) .45s backwards;}
.reveal .eyebrow::before,.reveal .eyebrow::after{transform:scaleX(0);transform-origin:left;animation:none;
  transition:transform .75s var(--ease) .12s;}
.reveal.in .eyebrow::before,.reveal.in .eyebrow::after{transform:scaleX(1);}

/* ==========================================================================
   4. NAV — white bar, hairline, underline grows from the left
   ========================================================================== */
.nav{
  background:rgba(255,255,255,.86);
  -webkit-backdrop-filter:saturate(150%) blur(14px);backdrop-filter:saturate(150%) blur(14px);
  border-bottom:1px solid transparent;box-shadow:none;
}
.nav.scrolled{
  background:rgba(255,255,255,.94);border-bottom-color:var(--line-2);
  box-shadow:0 1px 0 rgba(14,18,22,.04);
}
.brand-en{color:var(--ink);letter-spacing:.1em;}
.brand-sub{color:var(--dim-2);letter-spacing:.2em;}
.brand-mark{border-radius:1px;}

.nav-links > li > a,.nav-links > li > span,.nav-links > li > .drop-toggle{color:var(--dim);position:relative;}
.nav-links > li > a:hover,.nav-links > li > span:hover,
.nav-links > li > .drop-toggle:hover{color:var(--ink);}
.nav-links > li > a::after{
  content:"";position:absolute;left:14px;right:14px;bottom:5px;height:1px;
  background:var(--accent);transform:scaleX(0);transform-origin:left;
  transition:transform .38s var(--ease);
}
.nav-links > li > a:hover::after{transform:scaleX(1);}
.nav-links > li > a.active{color:var(--ink);}
.nav-links > li > a.active::after{
  content:"";position:absolute;left:14px;right:14px;bottom:5px;height:1px;margin:0;
  display:block;background:var(--accent);transform:scaleX(1);transform-origin:left;
}
.drop,.drawer{background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:0 0 0 1px rgba(14,18,22,.04),0 18px 44px rgba(14,18,22,.08);}
.nav-links .drop a{color:var(--dim);}
.nav-links .drop a:hover{background:var(--paper-2);color:var(--ink);}
.nav-toggle{border-color:var(--line);border-radius:var(--r);}
.nav-toggle span{background:var(--ink);}

/* ==========================================================================
   5. HERO — white stage, hairline rules, drawn blueprint
   ========================================================================== */
.hero{
  background:var(--paper);
  padding:calc(var(--nav-h) + 96px) 0 0;
  overflow:hidden;
}
.hero-grid{grid-template-columns:1.06fr .88fr;gap:64px;align-items:start;}
.hero-in{position:relative;z-index:2;}

.hero-tag{
  border:1px solid var(--line);border-radius:var(--r);background:transparent;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;color:var(--accent-d);
  padding:7px 14px;animation:LineSlideUp .9s var(--ease) .05s backwards;
}
.hero-tag i{width:5px;height:5px;border-radius:0;background:var(--accent);}

/* headline: masked line-by-line rise */
.hero h1{margin-top:10px;color:var(--ink);line-height:1.07;animation:HeroLineUp .95s var(--slow) .18s backwards;}
.hero h1 br{display:block;}
.hero h1 em{font-style:normal;color:var(--accent-d);}
.hero h1 .ln{position:relative;white-space:nowrap;}
.hero h1 .ln::after{
  content:"";position:absolute;left:0;right:0;bottom:.06em;height:1px;background:var(--accent);
  transform:scaleX(0);transform-origin:left;animation:LineGrowX .9s var(--ease) 1.05s forwards;
}
.hero p[style*="--gold"],.hero .hero-big{color:var(--accent-d);}
.hero .lead{animation:LineSlideUp .9s var(--ease) .34s backwards;}
.hero .cta-row{animation:LineSlideUp .9s var(--ease) .46s backwards;margin-top:36px;}

/* hero figure: squared, hairline framed, corner ticks, one light sweep */
.hero-fig{position:relative;animation:LineSlideUp 1.1s var(--ease) .4s backwards;}
.hero-fig .img-card{
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--paper-3);
  position:relative;
}
.hero-fig .img-card::after{
  content:"";position:absolute;top:0;bottom:0;width:26%;pointer-events:none;z-index:3;
  background:linear-gradient(100deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.55) 50%,rgba(255,255,255,0) 100%);
  animation:SweepOnce 1.5s var(--ease) .85s 1 both;
}
.hero-fig::before,.hero-fig::after{
  content:"";position:absolute;width:16px;height:16px;pointer-events:none;z-index:4;
}
.hero-fig::before{left:-1px;top:-1px;border-left:1px solid var(--accent);border-top:1px solid var(--accent);}
.hero-fig figcaption{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim-2);
}
.hero-fig figcaption::before{width:22px;height:1px;background:var(--accent);}

/* ---------- blueprint: clad-plate cross section, drawn line by line ---------- */
.bp{
  margin:72px 0 0;position:relative;border-top:1px solid var(--line);
  padding:30px 0 0;overflow:hidden;
}
.bp svg{display:block;width:100%;height:auto;overflow:visible;}
.bp .bp-l,.bp .bp-m{
  stroke-dasharray:1;stroke-dashoffset:1;
  animation:LineDraw 1.1s var(--ease) forwards;
}
.bp .bp-m{stroke-width:1;}
.bp text{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
  fill:var(--dim-2);opacity:0;animation:FadeIn .7s var(--ease) forwards;
}
.bp text.bp-acc{fill:var(--accent-d);}

/* ==========================================================================
   6. STATS — ruled row, hairline separators only
   ========================================================================== */
.stats{
  margin-top:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  grid-template-columns:repeat(4,1fr);gap:0;
}
.stat{padding:30px 26px 30px;border-left:1px solid var(--line-2);position:relative;}
.stat:first-child{border-left:0;padding-left:0;}
.stat::before{
  content:"";position:absolute;left:26px;right:26px;top:-1px;height:1px;background:var(--ink);
  transform:scaleX(0);transform-origin:left;transition:transform .55s var(--ease);
}
.stat:first-child::before{left:0;}
.stat:hover::before{transform:scaleX(1);}
.stat-n{font-family:var(--disp);font-size:1.95rem;font-weight:600;letter-spacing:-.035em;color:var(--ink);}
.stat-n em{font-style:normal;font-size:.95rem;font-weight:500;color:var(--accent-d);letter-spacing:0;}
.stat-l{font-size:12.5px;color:var(--dim);line-height:1.6;}

/* ==========================================================================
   7. INTERIOR PAGE HERO
   ========================================================================== */
.phero{background:var(--paper);padding:calc(var(--nav-h) + 76px) 0 58px;overflow:hidden;}
.phero::before{content:none!important;display:none!important;}
.phero h1{font-family:var(--disp);letter-spacing:-.042em;font-weight:700;}
.phero-in{position:relative;z-index:2;}
.crumb,.crumb a{color:var(--dim-2);}

/* ==========================================================================
   8. BUTTONS — square, hairline, active state is a line not a fill jump
   ========================================================================== */
.btn{border-radius:var(--r);font-weight:600;letter-spacing:.05em;font-size:12.5px;padding:14px 26px;}
.btn-gold{background:var(--accent);color:#fff;border-color:var(--accent);}
.btn-gold:hover{background:var(--accent-d);border-color:var(--accent-d);color:#fff;transform:translateY(-1px);}
.btn-ghost{border-color:rgba(14,18,22,.3);color:var(--ink);background:transparent;}
.btn-ghost:hover{border-color:var(--ink);background:var(--ink);color:#fff;}
.btn-dark{background:var(--ink);color:#fff;}
.btn-dark:hover{background:var(--accent-d);color:#fff;}
.btn-arr::after{content:"→";transition:transform .3s var(--ease);}

.tlink{color:var(--accent-d);}
.tlink:hover{color:var(--accent);}

/* ==========================================================================
   9. SECTIONS / CARDS / TABLES — hairline instead of shadow
   ========================================================================== */
.section{padding:104px 0;}
.section-alt{background:var(--paper-2);}
.section-line{border-top:1px solid var(--line-2);}
.hr{background:var(--line-2);height:1px;}

.card,.pcard{
  background:#fff;border:1px solid var(--line-2);border-radius:var(--r);
  box-shadow:none;transition:border-color .35s var(--ease),transform .35s var(--ease);
}
.card:hover,.pcard:hover{border-color:rgba(27,94,168,.45);transform:translateY(-2px);box-shadow:none;}
.card::after{
  content:"";position:absolute;left:0;top:0;width:100%;height:1px;background:var(--accent);
  transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease);
}
.card:hover::after{transform:scaleX(1);}
.pcard::after{
  content:"";position:absolute;left:0;top:0;width:100%;height:1px;background:var(--accent);
  transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease);
}
.pcard:hover::after{transform:scaleX(1);}
.pcark,.pcard-k{color:var(--accent-d);font-family:var(--mono);letter-spacing:.2em;}
.pcard ul li::before{width:8px;height:1px;background:var(--accent);top:.72em;}
.card-idx{color:var(--accent-d);font-family:var(--mono);}
.card-t,.frow-t{font-family:var(--disp);}
.card-ico path,.card-ico circle,.card-ico rect,.card-ico line,
.card-ico polyline,.card-ico polygon{stroke:var(--accent-d);stroke-width:1.2;}

.card-vis{border-bottom:1px solid var(--line-2);}
.pcard-vis{border-bottom:1px solid var(--line-2);background:var(--paper-3);}

/* chips — outlined, not filled */
.chip,.badge{
  background:transparent;border:1px solid var(--line);border-radius:var(--r);
  color:var(--dim);font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
}
.chip-gold,.badge-gold{background:var(--accent);color:#fff;border-color:var(--accent);}

/* tables — rule-based, no dark header */
.dtable th,.table th{
  background:transparent;color:var(--ink);font-family:var(--disp);font-weight:600;
  border-bottom:1px solid var(--ink);letter-spacing:-.01em;
}
.dtable td,.table td{border-bottom:1px solid var(--line-2);}
.dtable tr:nth-child(even) td,.table tr:nth-child(even) td{background:var(--paper-2);}

.callout{background:transparent;border:1px solid var(--line-2);border-left:2px solid var(--accent);border-radius:0;}
.callout-t{font-family:var(--disp);}

.img-card{border-radius:var(--r);border:1px solid var(--line-2);}
.img-card .img-tag{background:rgba(255,255,255,.92);border-radius:0;border-left:2px solid var(--accent);color:var(--ink);}
.frow{border-top:1px solid var(--line-2);}
.frow-n{color:var(--accent-d);font-family:var(--mono);}
.subscene img{border-radius:var(--r);}
.subscene figcaption{color:var(--accent-d);}

/* ==========================================================================
   10. DEEP SURFACES — graphite black (never navy), no gradient
   ========================================================================== */
.band-dark,.ctaband{background:var(--ink);color:#DDE3E8;}
.band-dark h2,.band-dark h3,.ctaband h2,.ctaband h3{color:#fff;}
.band-dark .lead,.band-dark .sec-sub,.ctaband .sec-sub{color:#9BA6AF;}
.band-dark .eyebrow,.ctaband .eyebrow{color:var(--accent-2);}
.band-dark .eyebrow::before,.ctaband .eyebrow::before{background:var(--accent-2);}
.band-dark .card,.ctaband .card{background:transparent;border-color:rgba(255,255,255,.14);}
.band-dark .card h3,.ctaband .card h3{color:#fff;}
.band-dark .card-d,.band-dark .card p,.ctaband .card p{color:#A7B2BA;}
.band-dark .stat,.ctaband .stat{border-left-color:rgba(255,255,255,.12);}
.band-dark .stat-n,.ctaband .stat-n{color:#fff;}
.band-dark p,.band-dark li,.band-dark td,.ctaband p,.ctaband li{color:#C3CBD2;}
.band-dark strong,.ctaband strong{color:#fff;}

footer,.footer{background:var(--ink);color:#96A1A9;border-top:1px solid rgba(255,255,255,.1);}
footer h4,.footer h4,footer .f-t,.footer .f-t{color:#fff;font-family:var(--disp);}
footer a,.footer a{color:#96A1A9;}
footer a:hover,.footer a:hover{color:#fff;}
.footer .eyebrow,.footer h4::before{color:var(--accent-2);}

/* ==========================================================================
   11. RESPONSIVE + ACCESSIBILITY
   ========================================================================== */
@media (max-width:980px){
  .hero-grid{grid-template-columns:1fr;gap:44px;}
  .stats{grid-template-columns:repeat(2,1fr);}
  .stat{border-left:1px solid var(--line-2);padding-left:26px;}
  .stat:nth-child(odd){border-left:0;padding-left:0;}
  .bp{display:none;}
}
@media (max-width:640px){
  .hero{padding:calc(var(--nav-h) + 60px) 0 0;}
  .section{padding:72px 0;}
  .stat{padding:22px 0 22px;}
  .hero h1 .ln{white-space:normal;}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;}
}

/* ---------- footer brand row (v20261101f) ---------- */
.foot-brand{gap:15px;}
.foot-brand .foot-mark{width:52px;height:auto;flex:none;}
.footer .foot-brand .brand-en{font-size:15px;letter-spacing:.12em;color:#fff;}
.footer .foot-brand .brand-sub{font-size:10px;letter-spacing:.22em;color:#8FA0B0;margin-top:5px;}
.brand-txt .brand-en,.brand-txt .brand-sub{display:block;}

/* ---------- brand film (home) ---------- */
.film-sec{padding:0 0 104px;background:#fff;}
.film-head{display:flex;justify-content:space-between;align-items:baseline;gap:18px;flex-wrap:wrap;
  border-top:1px solid var(--line-2);padding-top:15px;margin-bottom:20px;}
.film-tag{font-family:var(--mono);font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--accent-d);display:flex;align-items:center;gap:10px;}
.film-tag::before{content:"";width:24px;height:1px;background:var(--accent-d);display:block;flex:none;}
.film-note{font-size:12.5px;color:var(--dim-2);letter-spacing:.01em;}
.film-box{position:relative;margin:0;border:1px solid var(--line-2);background:#0E1216;
  aspect-ratio:16 / 9;overflow:hidden;}
.film-v{display:block;width:100%;height:100%;object-fit:cover;background:#0E1216;}
.film-box .fc{position:absolute;width:16px;height:16px;pointer-events:none;}
.film-box .fc.tl{left:0;top:0;border-left:1px solid var(--accent);border-top:1px solid var(--accent);}
.film-box .fc.br{right:0;bottom:0;border-right:1px solid var(--accent);border-bottom:1px solid var(--accent);}
.film-cap{display:flex;justify-content:space-between;align-items:baseline;gap:18px;flex-wrap:wrap;
  margin-top:15px;font-size:12.5px;color:var(--dim-2);line-height:1.6;}
.film-cap b{color:var(--text);font-weight:600;}
.film-cap .mono{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim-2);}
@media(max-width:640px){
  .film-sec{padding-bottom:72px;}
  .film-note{display:none;}
}

/* ---------- hero video background (v20261101i) ---------- */
/* video spans the headline block only, stopping just above the section drawing */
.hero-video{position:relative;background:var(--paper);padding-top:0;}
.hero-top{position:relative;overflow:hidden;padding:calc(var(--nav-h) + 88px) 0 60px;}
.hero-bgv{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 45%;z-index:0;}
/* veil = flat-edged panel behind the text column; right boundary is a CONCAVE arc
   (the video "bites" into the panel) via an inverted radial-gradient mask */
.hero-veil{
  position:absolute;z-index:1;pointer-events:none;
  left:-14%;top:-30%;width:89%;height:172%;
  background:rgba(246,248,251,.95);
  border-radius:0;
  -webkit-mask-image:radial-gradient(45% 130% at 133% 50%, transparent 99.4%, #000 99.7%);
          mask-image:radial-gradient(45% 130% at 133% 50%, transparent 99.4%, #000 99.7%);
}
.hero-top .wrap{position:relative;z-index:2;}
.hero-grid-one{grid-template-columns:minmax(0,780px)!important;}
.hero-video .lead{color:#26313D;}
@media (max-width:1080px){
  .hero-top{padding-bottom:48px;}
  .hero-veil{left:0;top:0;width:100%;height:100%;
    -webkit-mask-image:none;mask-image:none;}
}
@media (max-width:640px){
  .hero-top{padding-bottom:36px;}
  .hero-veil{left:-34%;top:-12%;width:136%;height:130%;filter:blur(34px);}
}
@media (prefers-reduced-motion: reduce){
  .hero-bgv{display:none;}
  .hero-veil{display:none;}
}

/* ---------- hero panel toggle (v20261101j) ---------- */
.hero-veil{transition:transform .62s cubic-bezier(.22,.72,.2,1),opacity .46s ease;}
.hero-top.mask-off .hero-veil{transform:translateX(-104%);opacity:0;}
.hero-top.mask-off .hero-veil{-webkit-mask-image:none;mask-image:none;}
.veil-tog{
  position:absolute;z-index:3;top:50%;left:calc(66% + 10px);transform:translateY(-50%);
  display:inline-flex;align-items:center;gap:8px;height:30px;padding:0 12px 0 10px;
  background:rgba(255,255,255,.93);border:1px solid #C6D0DA;color:#1B3A5C;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
  cursor:pointer;transition:background .2s,border-color .2s,color .2s;
}
.veil-tog:hover{background:#FFFFFF;border-color:#1B5EA8;color:#1B5EA8;}
.veil-tog:focus-visible{outline:2px solid #1B5EA8;outline-offset:2px;}
.veil-tog svg{transition:transform .42s cubic-bezier(.22,.72,.2,1);}
.hero-top.mask-off .veil-tog svg{transform:rotate(180deg);}
@media (max-width:1080px){.veil-tog{display:none;}}