:root {
  --ink: #111315;
  --ink-soft: #1a1d20;
  --paper: #f6f6f5;
  --white: #ffffff;
  --muted: #9da1a4;
  --line: rgba(17, 19, 21, .14);
  --amber: #d62636;
  --amber-dark: #b81d2c;
  --max: 1240px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: Inter, sans-serif; line-height: 1.6; }
a { color: inherit; text-decoration: none; }

.concept-bar { background: var(--amber); color: #151515; font-size: 11px; font-weight: 700; letter-spacing: .12em; padding: 8px 20px; text-align: center; text-transform: uppercase; }
.site-header { align-items: center; background: rgba(17,19,21,.94); color: white; display: flex; gap: 28px; height: 82px; justify-content: space-between; padding: 0 max(24px, calc((100vw - var(--max))/2)); position: relative; z-index: 20; }
.brand { align-items: center; display: inline-flex; gap: 12px; }
.brand-mark { color: var(--amber); font: 800 32px/1 Barlow Condensed, sans-serif; font-style: italic; letter-spacing: -.04em; }
.brand-copy { border-left: 1px solid rgba(255,255,255,.25); display: flex; flex-direction: column; font: 700 18px/1 Barlow Condensed, sans-serif; letter-spacing: .08em; padding-left: 12px; text-transform: uppercase; }
.brand-copy small { color: var(--muted); font: 600 8px/1.4 Inter, sans-serif; letter-spacing: .18em; margin-top: 3px; }
nav { display: flex; gap: 30px; margin-left: auto; }
nav a { color: #c8cbcd; font-size: 13px; font-weight: 600; }
nav a:hover { color: var(--amber); }
.menu-toggle { display: none; }

.button { align-items: center; background: var(--amber); border: 0; color: #151515; display: inline-flex; font-size: 13px; font-weight: 800; gap: 20px; justify-content: center; letter-spacing: .05em; min-height: 54px; padding: 0 24px; text-transform: uppercase; transition: transform .2s, background .2s; }
.button:hover { background: #ffbb31; transform: translateY(-2px); }
.button-small { min-height: 42px; padding: 0 18px; }
.text-link { border-bottom: 1px solid rgba(255,255,255,.45); color: white; font-size: 13px; font-weight: 700; padding: 10px 0 7px; text-transform: uppercase; }
.text-link span { color: var(--amber); margin-left: 12px; }
.text-link.light { display: inline-block; margin-top: 18px; }

.hero { color: white; min-height: 700px; overflow: hidden; position: relative; }
.hero-image, .hero-overlay { inset: 0; position: absolute; }
.hero-image { background: url('assets/hero-workshop.png') center/cover no-repeat; transform: scale(1.01); }
.hero-overlay { background: linear-gradient(90deg, rgba(10,12,14,.82) 0%, rgba(10,12,14,.46) 46%, rgba(10,12,14,.06) 76%), linear-gradient(0deg, rgba(10,12,14,.9) 0, transparent 38%); }
.hero-content { margin: 0 auto; max-width: var(--max); padding: 128px 24px 210px; position: relative; z-index: 2; }
.eyebrow { color: var(--amber); font-size: 11px; font-weight: 800; letter-spacing: .18em; margin: 0 0 22px; text-transform: uppercase; }
.eyebrow span { background: currentColor; display: inline-block; height: 2px; margin: 0 12px 3px 0; width: 34px; }
.eyebrow.dark { color: #795000; }
h1, h2, h3 { font-family: Barlow Condensed, sans-serif; line-height: .98; margin-top: 0; text-transform: uppercase; }
h1 { font-size: clamp(58px, 7.2vw, 104px); letter-spacing: -.035em; margin-bottom: 28px; max-width: 840px; }
h1 em { color: var(--amber); font-style: normal; }
.hero-lead { color: #d1d4d5; font-size: 18px; margin-bottom: 34px; max-width: 540px; }
.hero-actions { align-items: center; display: flex; gap: 30px; }
.hero-facts { bottom: 0; display: grid; grid-template-columns: repeat(3, 1fr); left: 50%; max-width: var(--max); padding: 0 24px; position: absolute; transform: translateX(-50%); width: 100%; z-index: 3; }
.hero-facts div { backdrop-filter: blur(12px); background: rgba(20,22,24,.78); border-left: 3px solid var(--amber); display: flex; flex-direction: column; min-height: 108px; padding: 22px 28px; }
.hero-facts div + div { border-left-color: rgba(255,255,255,.1); }
.hero-facts strong { font: 700 24px/1.1 Barlow Condensed, sans-serif; letter-spacing: .02em; text-transform: uppercase; }
.hero-facts span { color: #aeb1b3; font-size: 11px; margin-top: 8px; text-transform: uppercase; }

.section { margin: 0 auto; max-width: var(--max); padding-left: 24px; padding-right: 24px; }
.intro { align-items: end; border-bottom: 1px solid var(--line); display: grid; gap: 55px; grid-template-columns: .45fr 1.4fr .8fr; padding-bottom: 62px; padding-top: 110px; }
.section-index { color: #777b7f; font: 700 11px Inter, sans-serif; letter-spacing: .15em; text-transform: uppercase; }
h2 { font-size: clamp(42px, 5vw, 68px); letter-spacing: -.025em; margin-bottom: 0; }
.section-copy { color: #64686b; font-size: 14px; margin: 0; }

.services { display: grid; gap: 1px; grid-template-columns: repeat(3, 1fr); padding-bottom: 110px; padding-top: 55px; }
.service-card { background: #eae8e2; min-height: 310px; padding: 30px; position: relative; transition: background .25s, transform .25s; }
.service-card:hover { background: #fff; transform: translateY(-5px); z-index: 2; }
.service-card.featured { background: var(--amber); }
.service-number { color: #777; font-size: 10px; font-weight: 700; letter-spacing: .12em; position: absolute; right: 25px; top: 23px; }
.featured .service-number { color: #6f4a00; }
.service-icon { font: 700 34px Barlow Condensed, sans-serif; height: 84px; }
.service-card h3 { font-size: 30px; letter-spacing: -.01em; margin-bottom: 18px; }
.service-card p { color: #62666a; font-size: 13px; margin: 0; max-width: 290px; }
.featured p { color: #3b2b08; }

.diagnostic { background: var(--ink); color: white; overflow: hidden; position: relative; }
.diagnostic::before { background: repeating-linear-gradient(90deg, transparent 0 79px, rgba(255,255,255,.025) 80px); content: ''; inset: 0; position: absolute; }
.diagnostic-grid { align-items: center; display: grid; gap: 110px; grid-template-columns: 1.25fr .75fr; min-height: 640px; padding-bottom: 90px; padding-top: 90px; position: relative; }
.diagnostic-copy h2 { margin-bottom: 30px; }
.diagnostic-copy > p:not(.eyebrow) { color: #b4b7b9; max-width: 600px; }
.check-list { list-style: none; margin: 30px 0 0; padding: 0; }
.check-list li { border-top: 1px solid rgba(255,255,255,.13); color: #e3e4e4; font-size: 13px; padding: 14px 0 14px 27px; position: relative; }
.check-list li::before { color: var(--amber); content: '✓'; left: 0; position: absolute; }
.diagnostic-panel { background: var(--amber); color: var(--ink); min-height: 390px; padding: 35px; position: relative; transform: rotate(2deg); }
.panel-label { font-size: 9px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; }
.panel-code { font: 800 150px/.9 Barlow Condensed, sans-serif; letter-spacing: -.08em; margin: 58px 0 20px; }
.panel-line { display: grid; gap: 5px; grid-template-columns: 2fr 1fr 3fr 1fr; }
.panel-line span { background: var(--ink); height: 5px; }
.diagnostic-panel p { font: 600 18px/1.25 Barlow Condensed, sans-serif; text-transform: uppercase; }
.diagnostic-panel small { bottom: 28px; font-size: 10px; font-weight: 700; letter-spacing: .16em; position: absolute; right: 28px; }

.process { padding-bottom: 115px; padding-top: 110px; }
.process-head { display: grid; gap: 30px; grid-template-columns: .55fr 1.7fr; margin: 38px 0 70px; }
.steps { display: grid; gap: 50px; grid-template-columns: repeat(3, 1fr); }
.steps article { border-top: 3px solid var(--ink); padding-top: 24px; }
.steps article > span { color: var(--amber-dark); font: 800 12px Inter, sans-serif; }
.steps h3 { font-size: 26px; margin: 35px 0 14px; }
.steps p { color: #6d7073; font-size: 13px; }

.about { background: #202326; color: white; }
.about-grid { align-items: center; display: grid; gap: 90px; grid-template-columns: 1fr 1fr; min-height: 630px; padding-bottom: 90px; padding-top: 90px; }
.about-number { color: var(--amber); font: 800 clamp(150px, 24vw, 340px)/.75 Barlow Condensed, sans-serif; font-style: italic; letter-spacing: -.15em; opacity: .94; white-space: nowrap; }
.about-number span { color: transparent; -webkit-text-stroke: 2px rgba(255,255,255,.35); }
.about-copy h2 { margin-bottom: 30px; }
.about-copy p:not(.eyebrow) { color: #b7babc; font-size: 14px; }

.contact { display: grid; gap: 100px; grid-template-columns: 1.2fr .8fr; padding-bottom: 110px; padding-top: 110px; }
.contact-copy h2 { margin-bottom: 25px; }
.contact-copy > p:not(.eyebrow) { color: #666a6d; margin-bottom: 30px; max-width: 520px; }
.dark-button { background: var(--ink); color: white; }
.dark-button:hover { background: #2a2e31; }
.contact-details { border-left: 1px solid var(--line); padding-left: 50px; }
.contact-details div { border-bottom: 1px solid var(--line); padding: 21px 0; }
.contact-details span { color: #8a8d90; display: block; font-size: 9px; font-weight: 800; letter-spacing: .18em; margin-bottom: 8px; text-transform: uppercase; }
.contact-details a, .contact-details p { font: 700 20px/1.35 Barlow Condensed, sans-serif; margin: 0; text-transform: uppercase; }

footer { align-items: center; background: #0b0c0d; color: #8d9295; display: grid; font-size: 10px; gap: 50px; grid-template-columns: auto 1fr auto; padding: 38px max(24px, calc((100vw - var(--max))/2)); }
.footer-brand { color: white; }
footer p { margin: 0 auto; max-width: 620px; text-align: center; }
footer > a { color: var(--amber); font-weight: 700; text-transform: uppercase; }
.floating-whatsapp { align-items: center; background: var(--amber); border-radius: 50%; bottom: 22px; box-shadow: 0 10px 35px rgba(0,0,0,.28); color: #111; display: flex; font-size: 11px; font-weight: 900; height: 54px; justify-content: center; position: fixed; right: 22px; width: 54px; z-index: 30; }

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

@media (max-width: 900px) {
  .site-header { height: 70px; }
  .site-header > .button-small { display: none; }
  .menu-toggle { background: transparent; border: 1px solid rgba(255,255,255,.25); color: white; display: block; font: 700 11px Inter, sans-serif; padding: 10px 13px; text-transform: uppercase; }
  nav { background: var(--ink); display: none; flex-direction: column; gap: 0; left: 0; margin: 0; padding: 12px 24px 24px; position: absolute; top: 70px; width: 100%; }
  nav.open { display: flex; }
  nav a { border-bottom: 1px solid rgba(255,255,255,.1); padding: 13px 0; }
  .hero { min-height: 720px; }
  .hero-content { padding-top: 105px; }
  .hero-image { background-position: 62% center; }
  .hero-facts { grid-template-columns: 1fr; }
  .hero-facts div { min-height: auto; padding: 12px 18px; }
  .hero-facts div + div { display: none; }
  .intro { align-items: start; grid-template-columns: 1fr; gap: 22px; padding-top: 80px; }
  .services { grid-template-columns: 1fr 1fr; }
  .diagnostic-grid, .about-grid, .contact { gap: 60px; grid-template-columns: 1fr; }
  .diagnostic-grid { padding-bottom: 75px; }
  .diagnostic-panel { max-width: 500px; width: 100%; }
  .process-head { grid-template-columns: 1fr; }
  .steps { gap: 25px; grid-template-columns: 1fr; }
  .about-number { font-size: 220px; }
  .contact-details { border-left: 0; padding-left: 0; }
  footer { grid-template-columns: 1fr; text-align: center; }
  footer .brand { justify-content: center; }
}

@media (max-width: 580px) {
  .concept-bar { font-size: 8px; }
  .brand-mark { font-size: 26px; }
  .brand-copy { font-size: 15px; }
  .hero { min-height: 690px; }
  .hero-content { padding-top: 90px; }
  .hero-overlay { background: linear-gradient(90deg, rgba(10,12,14,.88), rgba(10,12,14,.35)), linear-gradient(0deg, rgba(10,12,14,.9), transparent 45%); }
  h1 { font-size: 52px; }
  .hero-lead { font-size: 15px; }
  .hero-actions { align-items: flex-start; flex-direction: column; gap: 12px; }
  .services { grid-template-columns: 1fr; }
  .service-card { min-height: 260px; }
  .panel-code { font-size: 120px; }
  .about-number { font-size: 145px; }
  .section, .hero-content { padding-left: 20px; padding-right: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* Refined red, graphite and silver presentation. */
body{-webkit-font-smoothing:antialiased}
html{scroll-padding-top:28px}
::selection{background:#d62636;color:white}
a:focus-visible,button:focus-visible{outline:3px solid #ff6673;outline-offset:5px}
.concept-bar{background:#0a0b0c;color:#a9aaaf;font-size:10px;letter-spacing:.06em;padding:9px 20px;text-transform:none;border-bottom:1px solid #242528}
.site-header{height:92px;background:#111214;border-bottom:1px solid #ffffff13}
.brand-mark{color:white;font-size:40px}
.brand-mark:after{content:'';display:block;height:3px;background:var(--amber);transform:skewX(-18deg);margin-top:5px}
.brand-copy{font-family:Manrope,Inter,sans-serif;font-size:12px;letter-spacing:.13em}
.brand-copy small{margin-top:7px;color:#92969e}
nav a{font-size:12px;font-weight:500}
nav a:hover{color:white}
.button{border:1px solid var(--amber);border-radius:5px;color:white;font-size:12px;font-weight:600;letter-spacing:0;text-transform:none;min-height:56px;gap:26px;padding:0 26px}
.button:hover{background:#b81d2c;box-shadow:0 8px 28px #d6263620}
.button-small{min-height:42px;background:transparent;border-color:#ffffff38;padding:0 18px}
.button-small:hover{background:var(--amber)}
.text-link{font-size:12px;font-weight:500;text-transform:none;border-color:#ffffff3d}
.text-link span{color:#ff6673}
.hero{min-height:750px;background:#0d1013}
.hero-image{filter:grayscale(1);opacity:.74}
.hero-overlay{background:linear-gradient(90deg,#0b0d10ed 0%,#0b0d10ba 38%,#0b0d101a 80%),linear-gradient(0deg,#0b0d10 0%,transparent 45%)}
.hero-content{padding-top:105px;padding-bottom:194px}
.eyebrow{color:#e0a5aa;font-size:10px;font-weight:600;letter-spacing:.15em;margin-bottom:26px}
.eyebrow span{background:var(--amber);width:24px}
.eyebrow.dark{color:#9c1d2a}
h1,h2,h3{font-family:Manrope,Inter,sans-serif;text-transform:none}
h1{font-size:clamp(44px,4.5vw,66px);font-weight:500;line-height:1.14;letter-spacing:-.05em;max-width:820px}
h1 em{color:white;font-weight:800}
h1 em:after{content:'';display:block;width:56px;height:4px;background:var(--amber);margin-top:27px}
.hero-lead{color:#b4b8c0;font-size:15px;line-height:1.85;max-width:455px;margin-bottom:32px}
.hero-facts div{backdrop-filter:none;background:none;border-left:0;border-top:1px solid #ffffff26;padding:24px 28px 26px 0}
.hero-facts div+div{border-left:1px solid #ffffff13;padding-left:36px}
.hero-facts strong{font:600 19px/1.2 Manrope,sans-serif;letter-spacing:-.03em;text-transform:none}
.hero-facts span{color:#9298a2;font-size:10px;letter-spacing:.05em;text-transform:none}
h2{font-size:clamp(30px,3.3vw,46px);font-weight:600;line-height:1.22;letter-spacing:-.045em}
.intro{gap:36px;grid-template-columns:.4fr 1.45fr .85fr;padding-bottom:54px;border:0}
.intro .section-index{align-self:start;margin-top:5px}
.section-copy{font-size:13px;line-height:1.9;color:#777c83}
.services{gap:16px;padding-top:0}
.service-card{background:white;border:1px solid #e2e3e5;border-radius:8px;min-height:286px}
.service-card:hover{border-color:#d6263655;box-shadow:0 18px 40px #11121408;transform:translateY(-4px)}
.service-card.featured{background:#181a1e;border-color:#181a1e;color:white}
.service-number,.featured .service-number{color:#92959b}
.service-icon{height:82px;color:var(--amber)}
.service-icon svg{width:32px;height:32px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.featured .service-icon{color:#ff6673}
.service-card h3{font-size:19px;line-height:1.35;font-weight:700;letter-spacing:-.035em}
.service-card p{color:#747982;font-size:12px;line-height:1.85}
.featured p{color:#aeb2ba}
.diagnostic{background:#111315}
.diagnostic::before{background:radial-gradient(ellipse at 90% 50%,#d6263612,transparent 60%)}
.diagnostic-grid{min-height:590px}
.diagnostic-copy>p:not(.eyebrow){color:#9da3ad;font-size:14px}
.check-list li{font-size:12px;color:#c5c9cf;border-color:#ffffff15}
.check-list li::before{color:#ff6673}
.diagnostic-panel{background:linear-gradient(145deg,#292b30,#191b1f);border:1px solid #ffffff20;border-radius:16px;box-shadow:0 35px 70px #0005;color:white;min-height:360px;transform:none;overflow:hidden}
.diagnostic-panel:before{content:'';width:150px;height:150px;border:30px solid #d6263612;border-radius:50%;position:absolute;right:-50px;top:-50px}
.panel-label{color:#9fa5b0;font-weight:500;letter-spacing:.15em}
.panel-code{font:600 100px/1 Manrope,sans-serif;letter-spacing:-.07em;margin:52px 0 25px}
.panel-line span{background:#ffffff16;height:2px}
.panel-line span:first-child{background:var(--amber)}
.diagnostic-panel p{color:#969da8;font:400 12px/1.7 Inter,sans-serif;margin-top:24px;text-transform:none}
.diagnostic-panel p strong{color:#e0e2e6;font-weight:600}
.diagnostic-panel small{color:#b5bac2;font-size:9px}
.steps article{border-top:1px solid #d8dadd}
.steps h3{font-size:20px;line-height:1.35;font-weight:600;letter-spacing:-.035em;margin-top:27px}
.steps p{color:#777c83}
.about{background:#181a1e}
.about-grid{min-height:560px}
.about-number{color:#eeeff1;font-size:clamp(140px,22vw,285px);letter-spacing:-.08em;line-height:1;position:relative;padding-bottom:30px}
.about-number:after{content:'';position:absolute;bottom:0;left:0;width:70%;height:5px;background:var(--amber);transform:skewX(-20deg)}
.about-number span{-webkit-text-stroke:1px #9fa4ad}
.about-copy p:not(.eyebrow){color:#a6acb5;font-size:13px;line-height:1.9}
.contact-copy>p:not(.eyebrow){font-size:14px;color:#747982}
.dark-button{background:var(--amber)}
.dark-button:hover{background:#b81d2c}
.contact-details a,.contact-details p{font:600 15px/1.65 Manrope,sans-serif;letter-spacing:-.02em;text-transform:none}
footer{background:#0b0c0e;color:#818894}
footer>a{color:#c9cdd3;text-transform:none}
.floating-whatsapp{color:white;border:1px solid #ffffff21;box-shadow:0 6px 24px #0003}
.floating-whatsapp svg{height:27px;width:27px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.reveal{opacity:1;transform:none}

/* Zatria: purposeful movement and a guided path to contact. */
html{scroll-padding-top:112px}
.site-header{position:sticky;top:0;backdrop-filter:blur(18px);background:#111214ed;transition:box-shadow .3s}
.site-header.scrolled{box-shadow:0 12px 40px #0002}
nav a{position:relative;transition:color .25s}
nav a::after{content:'';position:absolute;left:0;right:0;bottom:-8px;height:2px;background:var(--amber);transform:scaleX(0);transform-origin:left;transition:transform .3s}
nav a:hover::after,nav a[aria-current="location"]::after{transform:scaleX(1)}
.hero-image{animation:hero-arrive 1.8s ease-out both}
@keyframes hero-arrive{from{transform:scale(1.065);opacity:.35}to{transform:scale(1.01);opacity:.74}}
.button span,.text-link span{display:inline-block;transition:transform .3s}
.button:hover span,.text-link:hover span{transform:translate(3px,-3px)}
.service-card{overflow:hidden;transition:background .3s,border-color .3s,box-shadow .3s,transform .3s}
.service-card::after{content:'';position:absolute;bottom:0;left:30px;right:30px;height:2px;background:var(--amber);transform:scaleX(0);transform-origin:left;transition:transform .4s}
.service-card:hover::after{transform:scaleX(1)}
.service-icon svg{transition:transform .4s}
.service-card:hover .service-icon svg{transform:translateY(-4px)}
.services{padding-bottom:64px}
.service-guide{padding-bottom:110px}
.guide-heading{max-width:680px;margin-bottom:38px}
.guide-heading>p:last-child{font-size:14px;color:#697079;margin-top:20px}
.guide-experience{display:grid;grid-template-columns:1fr 1.2fr;gap:52px;padding:42px;border:1px solid #dedfe2;background:#eeefef;border-radius:18px}
.guide-choices{display:flex;flex-direction:column;gap:12px;justify-content:center}
.guide-choices button{font:600 13px/1.5 Manrope,sans-serif;text-align:left;display:flex;justify-content:space-between;align-items:center;gap:16px;border:1px solid #d7dade;background:transparent;border-radius:8px;padding:19px 20px;min-height:60px;color:#484e57;cursor:pointer;transition:background .25s,color .25s,border-color .25s,transform .25s}
.guide-choices button:hover{border-color:#9fa4ad;transform:translateX(3px)}
.guide-choices button[aria-pressed="true"]{background:#191c21;color:white;border-color:#191c21;box-shadow:inset 3px 0 var(--amber)}
.guide-choices button span{color:var(--amber);font-size:20px}
.guide-result{padding:16px 0;display:flex;flex-direction:column;align-items:flex-start;justify-content:center}
.guide-label{font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:#991d2b}
.guide-result h3{font-size:27px;font-weight:600;line-height:1.3;letter-spacing:-.035em;margin:18px 0}
.guide-result p{font-size:13px;color:#636a74;line-height:1.9;min-height:75px;margin-bottom:24px}
.guide-result small{color:#727984;font-size:10px;line-height:1.7;margin-top:16px}
.guide-response.changing{animation:response-arrive .35s ease-out}
@keyframes response-arrive{from{opacity:.2;transform:translateY(8px)}to{opacity:1;transform:none}}
.step-symbol{display:grid;place-items:center;width:48px;height:48px;background:#e9eaeb;border-radius:50%}
.step-symbol svg{width:23px;height:23px;fill:none;stroke:var(--amber);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.steps article{position:relative;transition:border-color .3s}
.steps article:hover{border-color:var(--amber)}
.panel-line span:first-child{animation:signal 3s ease-in-out infinite;transform-origin:left}
@keyframes signal{50%{transform:scaleX(.55);opacity:.55}}
.footer-end{display:flex;flex-direction:column;gap:25px;min-width:165px}
.footer-end>a{color:#b7bcc4}
.zatria-signature{display:flex;flex-direction:column;gap:6px;border-top:1px solid #ffffff1a;padding-top:18px}
.zatria-signature>span{font-size:9px;color:#949ba6}
.zatria-signature strong{font:700 20px/1.4 Manrope,sans-serif;color:#f3f4f5;letter-spacing:.13em}
.zatria-signature i{font-style:normal;color:var(--amber);display:inline-block;margin-left:8px}
.zatria-signature small{font-size:9px;color:#8d95a0;letter-spacing:.025em}
.floating-whatsapp{transition:transform .25s,box-shadow .25s}
.floating-whatsapp:hover{transform:translateY(-4px);box-shadow:0 12px 30px #d6263633}
@media(prefers-reduced-motion:no-preference){.motion-ready .reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1);transition-delay:var(--reveal-delay,0ms)}.motion-ready .reveal.visible{opacity:1;transform:none}}
@media(max-width:900px){html{scroll-padding-top:94px}.guide-experience{gap:24px;padding:28px;grid-template-columns:1fr}.guide-result p{min-height:0}.service-guide{padding-bottom:75px}.guide-heading{margin-bottom:28px}.footer-end{align-items:center}.zatria-signature{min-width:180px}nav a::after{bottom:0;right:auto;width:24px}}
@media(max-width:580px){.guide-experience{padding:20px;gap:18px;border-radius:12px}.guide-choices button{font-size:12px;padding:16px}.guide-result h3{font-size:25px}.guide-result .button{width:100%;font-size:11px;padding:0 15px;gap:12px}.guide-result small{font-size:9px}.service-guide{padding-bottom:64px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.motion-ready .reveal{opacity:1;transform:none}}
@media(max-width:1000px){.intro{grid-template-columns:1.4fr .8fr}.intro .section-index{grid-column:1/-1;margin:0}.diagnostic-grid,.about-grid{gap:50px}}
@media(max-width:900px){.site-header{height:76px}nav{top:76px}.hero{min-height:750px}.hero-content{padding-top:82px;padding-bottom:195px}.hero-facts{grid-template-columns:repeat(3,1fr)}.hero-facts div{min-height:100px;padding:20px 10px 20px 0}.hero-facts div+div{display:flex;padding-left:16px}.hero-facts strong{font-size:15px}.hero-facts span{font-size:9px;line-height:1.5}.intro{grid-template-columns:1fr;gap:24px;padding-top:75px;padding-bottom:36px}.intro .section-index{grid-column:auto}.services{padding-bottom:75px}.diagnostic-grid,.about-grid,.contact{padding-top:75px;padding-bottom:75px;gap:50px}.process{padding-top:75px;padding-bottom:75px}.diagnostic-panel{max-width:420px;width:100%;min-height:340px}.about-number{font-size:180px;max-width:350px}}
@media(max-width:580px){.concept-bar{font-size:8px;letter-spacing:.02em}.brand-mark{font-size:32px}.brand-copy{font-size:11px}.hero{min-height:744px}.hero-content{padding-top:70px}.hero-overlay{background:linear-gradient(90deg,#0b0d10eb,#0b0d1070),linear-gradient(0deg,#0b0d10,transparent 80%)}h1{font-size:36px;line-height:1.18}.eyebrow{font-size:8px;letter-spacing:.08em}.hero-lead{font-size:13px;max-width:300px}.hero-facts strong{font-size:12px}.hero-facts span{font-size:8px}.hero-facts div+div{padding-left:10px}.service-card{min-height:255px}.service-icon{height:72px}.panel-code{font-size:90px}.about-number{font-size:145px}h2{font-size:31px}.contact-details a,.contact-details p{font-size:14px}.floating-whatsapp{height:48px;width:48px;right:16px;bottom:16px}}