/* ==========================================================================
   Xafethy website — component styles.
   Every value comes from tokens.css. If you need a new colour or size,
   add a token first; never write a hex value or a magic number here.
   ========================================================================== */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{font-family:var(--font-sans);color:var(--text-primary);background:var(--surface-page);line-height:var(--leading-body);font-size:var(--text-base);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
h1,h2,h3{text-wrap:balance}
:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.on-dark :focus-visible{box-shadow:var(--focus-ring-on-dark)}

.skip-link{position:absolute;left:var(--space-4);top:-100px;z-index:100;background:var(--accent);color:var(--accent-ink);padding:var(--space-3) var(--space-4);font-size:var(--text-xs);font-weight:var(--weight-bold);letter-spacing:var(--tracking-button);text-transform:uppercase}
.skip-link:focus{top:var(--space-4)}

.container{width:min(var(--container-max),calc(100% - var(--gutter) * 2));margin-inline:auto}

/* ----- Buttons ----- */
.btn{display:inline-flex;align-items:center;gap:10px;padding:14px 21px;border:var(--border-w) solid var(--line-white-soft);font-size:var(--text-xs);font-weight:var(--weight-bold);letter-spacing:var(--tracking-button);text-transform:uppercase;line-height:1;white-space:nowrap;border-radius:var(--radius);transition:background var(--duration-base) var(--ease-standard),border-color var(--duration-base) var(--ease-standard),color var(--duration-base) var(--ease-standard)}
.btn--primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn--primary:hover{background:var(--accent-hover);border-color:var(--accent-hover)}
.btn--primary:active{background:var(--gold-600);border-color:var(--gold-600)}
.btn--outline-dark{border-color:var(--ink-500);color:var(--text-on-dark)}
.btn--outline-dark:hover{border-color:var(--text-on-dark)}
.text-link{font-size:var(--text-2xs);font-weight:var(--weight-black);letter-spacing:var(--tracking-link);color:var(--text-accent);text-transform:uppercase;display:inline-flex;gap:6px;align-items:center;border-bottom:1px solid transparent;transition:border-color var(--duration-base) var(--ease-standard)}
.text-link:hover{border-bottom-color:currentColor}

/* ----- Header ----- */
.nav{height:var(--nav-height);display:flex;align-items:center;justify-content:space-between;gap:var(--space-6);position:absolute;top:0;left:0;right:0;z-index:5;color:var(--text-on-dark)}
.nav::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,rgba(222,196,116,.8),rgba(148,158,173,.18),transparent 70%)}
.logo{display:block}
.logo img{height:68px;width:auto}
.navlinks{display:flex;gap:31px;font-size:var(--text-sm);color:var(--mist-300)}
.navlinks a{padding-bottom:2px;border-bottom:1px solid transparent;transition:color var(--duration-base) var(--ease-standard)}
.navlinks a:hover{color:var(--text-on-dark)}
.navlinks a[aria-current="true"]{color:var(--text-on-dark);border-bottom-color:var(--accent)}

/* Mobile menu (≤900px): a <details> element, no JavaScript needed */
.menu{display:none;position:relative}
.menu summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:8px;padding:12px 14px;border:var(--border-w) solid var(--ink-500);font-size:var(--text-xs);font-weight:var(--weight-bold);letter-spacing:var(--tracking-button);text-transform:uppercase;line-height:1}
.menu summary::-webkit-details-marker{display:none}
.menu[open] summary{border-color:var(--accent)}
.menu-panel{position:absolute;right:0;top:calc(100% + 10px);min-width:220px;background:var(--surface-dark-raised);border:var(--border-w) solid var(--line-on-dark);padding:var(--space-2) 0;display:grid}
.menu-panel a{padding:12px var(--space-5);font-size:var(--text-sm);color:var(--mist-300);border-left:2px solid transparent}
.menu-panel a:hover{color:var(--text-on-dark);border-left-color:var(--accent)}

/* ----- Hero ----- */
.hero{min-height:760px;position:relative;overflow:hidden;color:var(--text-on-dark);display:flex;align-items:center;background:
 linear-gradient(90deg,rgba(5,5,5,.99) 0%,rgba(8,8,8,.94) 47%,rgba(8,8,8,.68) 100%),
 radial-gradient(circle at 76% 30%,#59616b 0,#24282d 30%,var(--ink-900) 72%)}
.hero::after{content:"";position:absolute;right:-10%;bottom:-30%;width:70%;height:90%;transform:skewX(-8deg);opacity:.8;background:
 linear-gradient(120deg,transparent 0 35%,rgba(255,255,255,.06) 35.2% 35.8%,transparent 36%),
 linear-gradient(90deg,transparent 0 24%,rgba(255,255,255,.04) 24.2% 24.8%,transparent 25%),
 linear-gradient(165deg,transparent 0 48%,rgba(222,196,116,.16) 48.2% 48.6%,transparent 49%)}
.hero-content{position:relative;z-index:2;padding-top:70px;max-width:760px}
.eyebrow{font-size:var(--text-2xs);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-on-dark-muted);font-weight:var(--weight-bold);margin-bottom:var(--space-5)}
.hero h1{font-size:var(--text-h1);line-height:var(--leading-tight);letter-spacing:var(--tracking-display);max-width:850px}
.hero h1 .accent{color:var(--text-on-dark-accent)}
.hero p{font-size:var(--text-lg);color:var(--text-on-dark-lede);max-width:690px;margin:28px 0 var(--space-8)}
.hero-actions{display:flex;gap:10px;flex-wrap:wrap}
.hero-meta{display:flex;gap:28px;margin-top:var(--space-14);padding-top:22px;border-top:1px solid var(--line-gold-soft);font-size:var(--text-xs);color:var(--text-on-dark-muted)}
.hero-meta strong{display:block;color:var(--text-on-dark);font-size:var(--text-md);margin-bottom:3px}

/* ----- Sections ----- */
.section{padding-block:var(--section-y)}
.section--alt{background:var(--surface-alt)}
.section--quiet{background:var(--surface-quiet)}
.section--dark{background:var(--surface-dark);color:var(--text-on-dark)}
.section-head{display:grid;grid-template-columns:1fr 1.1fr;gap:var(--space-18);margin-bottom:var(--space-14)}
.kicker{font-size:var(--text-2xs);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-accent);font-weight:var(--weight-black);margin-bottom:13px}
.section--dark .kicker{color:var(--text-on-dark-accent)}
h2{font-size:var(--text-h2);line-height:var(--leading-snug);letter-spacing:var(--tracking-heading)}
h2 .accent{color:var(--text-accent-lg)}
.section--dark h2 .accent{color:var(--text-on-dark-accent)}
.section-head p{color:var(--text-muted);font-size:var(--text-base);max-width:590px}
.section--dark .section-head p{color:var(--text-on-dark-muted)}

/* ----- Service cards ----- */
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-4)}
.card{background:var(--surface-card);border:var(--border-w) solid var(--line);border-top:var(--border-w-accent) solid transparent;padding:var(--card-pad);min-height:290px;display:flex;flex-direction:column;transition:transform var(--duration-base) var(--ease-standard),box-shadow var(--duration-base) var(--ease-standard),border-color var(--duration-base) var(--ease-standard)}
.card:hover{transform:translateY(var(--lift));box-shadow:var(--shadow-hover);border-top-color:var(--accent)}
.card:focus-within{border-top-color:var(--accent)}
.card .index{font-size:var(--text-xs);color:var(--text-accent);font-weight:var(--weight-black);margin-bottom:50px;font-variant-numeric:tabular-nums}
.card h3{font-size:var(--text-xl);line-height:var(--leading-title);margin-bottom:13px}
.card p{font-size:var(--text-sm);color:var(--text-muted);margin-bottom:22px}
.card .text-link{margin-top:auto}

/* ----- ISO list ----- */
.iso-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start}
.iso-grid .section-head{display:block;margin:0}
.iso-grid .section-head p{margin-top:var(--space-6)}
.list{border-top:1px solid var(--line-on-dark)}
.list-item{display:grid;grid-template-columns:90px 1fr;gap:var(--space-5);padding:var(--space-6) 0;border-bottom:1px solid var(--line-on-dark)}
.list-item .code{font-size:var(--text-md);font-weight:var(--weight-black);color:var(--text-on-dark-accent)}
.list-item h3{font-size:var(--text-lg);margin-bottom:4px}
.list-item p{font-size:var(--text-sm);color:var(--text-on-dark-muted)}

/* ----- Approach (split feature) ----- */
.split{display:grid;grid-template-columns:1.05fr .95fr;min-height:520px}
.split-copy{background:var(--surface-page);padding:100px max(var(--gutter),calc((100vw - var(--container-max)) / 2))}
.split-copy p{color:var(--text-muted);max-width:560px;margin:25px 0}
.split-image{position:relative;overflow:hidden;background:
 linear-gradient(135deg,rgba(11,23,36,.7),rgba(11,23,36,.1)),
 linear-gradient(30deg,var(--ink-900) 0%,#737b84 45%,#2d3136 46%,#0d0e0f 100%)}
.split-image::before{content:"";position:absolute;inset:12% 12%;border:1px solid rgba(255,255,255,.2);transform:skewY(-9deg)}
.split-image .ghost{position:absolute;right:8%;bottom:8%;font-size:92px;font-weight:900;color:rgba(255,255,255,.08);letter-spacing:-.08em;line-height:1;user-select:none}
.checks{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:35px}
.check{font-size:var(--text-sm);font-weight:var(--weight-semibold);padding-left:23px;position:relative}
.check::before{content:"";position:absolute;left:0;top:8px;width:8px;height:2px;background:var(--accent)}

/* ----- Industries ----- */
.tiles{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--line);border:var(--border-w) solid var(--line)}
.tile{background:var(--surface-card);padding:var(--card-pad) var(--space-6);min-height:150px}
.tile strong{display:block;font-size:var(--text-md);margin-bottom:var(--space-2)}
.tile span{font-size:var(--text-xs);color:var(--text-muted)}

/* ----- Process ----- */
.steps{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line)}
.step{padding:var(--space-8) 28px 10px 0;border-right:1px solid var(--line);margin-right:28px}
.step:last-child{border-right:0;margin-right:0}
.step b{font-size:var(--text-2xs);color:var(--text-accent);letter-spacing:.12em;text-transform:uppercase;font-variant-numeric:tabular-nums}
.step h3{font-size:var(--text-xl);margin:15px 0 var(--space-2)}
.step p{font-size:var(--text-sm);color:var(--text-muted)}

/* ----- CTA ----- */
.cta{background:var(--surface-dark-raised);color:var(--text-on-dark);padding-block:var(--space-18);border-top:1px solid var(--line-on-dark)}
.cta-inner{display:flex;align-items:center;justify-content:space-between;gap:var(--space-8);flex-wrap:wrap}
.cta h2{font-size:clamp(32px,3.5vw,42px);max-width:650px}
.cta p{margin-top:10px;color:var(--text-on-dark-muted)}

/* ----- Footer ----- */
.footer{background:var(--surface-footer);color:var(--text-on-dark);padding:var(--space-14) 0 28px}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:var(--space-10)}
.footer p,.footer a,.footer span{font-size:var(--text-xs);color:var(--text-on-dark-faint)}
.footer a{display:block;padding:2px 0}
.footer a:hover{color:var(--text-on-dark)}
.footer h4{font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.12em;margin-bottom:17px;color:var(--text-on-dark)}
.footer-brand .logo img{height:auto;width:var(--logo-width-footer)}
.footer-brand p{margin-top:15px;max-width:280px}
.copyright{border-top:1px solid var(--line-on-dark);margin-top:45px;padding-top:22px;display:flex;justify-content:space-between;gap:var(--space-4);flex-wrap:wrap;font-size:var(--text-2xs);color:var(--text-on-dark-faint)}
.copyright a{display:inline;font-size:inherit;padding:0}

/* ----- Simple page (privacy) ----- */
.page-header{background:var(--surface-dark);color:var(--text-on-dark);padding:calc(var(--nav-height) + var(--space-14)) 0 var(--space-14)}
.page-header h1{font-size:var(--text-h2);line-height:var(--leading-snug);letter-spacing:var(--tracking-heading)}
.page-header p{color:var(--text-on-dark-lede);max-width:var(--measure);margin-top:var(--space-4)}
.prose{max-width:var(--measure);padding-block:var(--space-18)}
.prose h2{font-size:var(--text-2xl);letter-spacing:-.02em;margin:var(--space-10) 0 var(--space-3)}
.prose h2:first-child{margin-top:0}
.prose p{color:var(--text-primary);margin-bottom:var(--space-4)}
.prose .updated{font-size:var(--text-xs);color:var(--text-muted);margin-top:var(--space-8)}

/* ----- Responsive ----- */
@media (max-width:900px){
  .navlinks{display:none}
  .menu{display:block}
  .nav .btn--primary{display:none}
  .cards{grid-template-columns:1fr 1fr}
  .section-head,.iso-grid,.split{grid-template-columns:1fr;gap:35px}
  .split-image{min-height:360px}
  .tiles{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:1fr 1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  :root{--gutter:var(--gutter-mobile);--section-y:var(--section-y-mobile)}
  .logo img{height:56px}
  .hero{min-height:700px}
  .hero-meta{display:none}
  .cards,.tiles,.steps,.footer-grid,.checks{grid-template-columns:1fr}
  .step{border-right:0;margin-right:0}
  .cta-inner{display:block}
  .cta .btn{margin-top:25px}
}