@charset "UTF-8";
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
  --gold:#C4A86A;--gold-l:#E0C992;--gold-pale:rgba(196,168,106,0.1);
  --dark:#0B0D13;--dark2:#12151E;--dark3:#181C28;
  --text:#F5F1EA;--prose:#DED5C8;--muted:#BBB2A3;--dim:#6B6458;
  --border:rgba(196,168,106,0.22);--border2:rgba(196,168,106,0.45);
  --nav-bar-min-h:clamp(5.65rem,13vw,8.35rem);
  --nav-pad-block:clamp(0.38rem,1vw,0.58rem);
}
html{font-size:clamp(17px,2.5vw,19px);scroll-behavior:smooth}
body{background:var(--dark);color:var(--text);font-family:'DM Sans',sans-serif;font-size:1rem;line-height:1.78;overflow-x:hidden}
::-webkit-scrollbar{width:4px}
::-webkit-scrollbar-track{background:var(--dark)}
::-webkit-scrollbar-thumb{background:var(--gold);border-radius:2px}

body.nav-overflow-lock{overflow:hidden;touch-action:none}

nav{position:fixed;top:0;left:0;right:0;z-index:200;display:flex;align-items:center;justify-content:flex-start;gap:1rem;min-height:var(--nav-bar-min-h);padding:var(--nav-pad-block) 3.5rem;background:rgba(11,13,19,0.88);backdrop-filter:blur(20px);border-bottom:1px solid var(--border);box-sizing:border-box}
.nav-brand{display:flex;align-items:center;min-width:0;flex-shrink:0;position:relative;z-index:3;height:calc(var(--nav-bar-min-h) - 2 * var(--nav-pad-block));max-height:100%}
.nav-logo-link{display:flex;align-items:center;height:100%;text-decoration:none;line-height:0;flex-shrink:0;transition:opacity .22s ease}
.nav-logo-link:hover{opacity:.92}
.nav-logo-link:focus-visible{outline:2px solid var(--gold-l);outline-offset:4px;border-radius:2px}
.nav-brand img{height:100%;width:auto;max-width:min(780px,82vw);object-fit:contain;object-position:left center;display:block;-webkit-user-drag:none;user-select:none}
.nav-menu{display:flex;align-items:center;gap:clamp(1.25rem,3vw,2.25rem);margin-left:auto;flex-wrap:nowrap}
.nav-links{display:flex;gap:clamp(1.25rem,3vw,2.25rem);list-style:none;align-items:center;margin:0;padding:0}
.nav-links li{margin:0}
.nav-links a{display:block;text-decoration:none;font-size:.9rem;font-weight:400;color:var(--muted);letter-spacing:.08em;text-transform:uppercase;transition:color .25s;padding:.35rem 0}
.nav-links a:hover{color:var(--gold-l)}
.nav-cta{padding:.55rem 1.4rem;border:1px solid var(--gold);color:var(--gold-l);text-decoration:none;font-size:.88rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;transition:all .25s;border-radius:2px;white-space:nowrap;flex-shrink:0}
.nav-cta:hover{background:var(--gold);color:var(--dark)}

.nav-toggle{display:none;position:relative;z-index:3;margin-left:auto;flex-shrink:0;width:44px;height:44px;padding:0;border:1px solid var(--border);border-radius:2px;background:rgba(18,21,30,0.6);cursor:pointer;color:var(--gold-l);align-items:center;justify-content:center;transition:border-color .2s,background .2s}
.nav-toggle:hover{border-color:var(--border2);background:var(--dark3)}
.nav-toggle:focus-visible{outline:2px solid var(--gold-l);outline-offset:3px}
.nav-toggle-lines{position:relative;width:22px;height:16px;display:block}
.nav-toggle-lines span{position:absolute;left:0;width:22px;height:2px;background:var(--gold-l);border-radius:1px;transition:transform .32s cubic-bezier(.23,1,.32,1),opacity .2s,top .32s cubic-bezier(.23,1,.32,1)}
.nav-toggle-lines span:nth-child(1){top:0}
.nav-toggle-lines span:nth-child(2){top:7px}
.nav-toggle-lines span:nth-child(3){top:14px}
.site-header.nav-menu-open .nav-toggle-lines span:nth-child(1){top:7px;transform:rotate(45deg)}
.site-header.nav-menu-open .nav-toggle-lines span:nth-child(2){opacity:0;transform:scaleX(0)}
.site-header.nav-menu-open .nav-toggle-lines span:nth-child(3){top:7px;transform:rotate(-45deg)}

.nav-backdrop{display:none}

#hero{min-height:100vh;display:flex;align-items:center;position:relative;padding:0 clamp(1.25rem, 4vw, 3.75rem);overflow:hidden}
.hero-bg{position:absolute;inset:0;z-index:0}
.hero-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(196,168,106,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(196,168,106,.05) 1px,transparent 1px);background-size:60px 60px}
.hero-glow{position:absolute;top:-10%;right:-5%;width:55vw;height:55vw;background:radial-gradient(ellipse,rgba(196,168,106,.08) 0%,transparent 65%);pointer-events:none}
.hero-glow2{position:absolute;bottom:-15%;left:-5%;width:40vw;height:40vw;background:radial-gradient(ellipse,rgba(196,168,106,.06) 0%,transparent 65%);pointer-events:none}
.hero-content{
  position:relative;z-index:3;width:100%;max-width:none;
  padding-top:max(5rem,calc(var(--nav-bar-min-h) + 1.35rem));
}
.hero-eyebrow{display:flex;align-items:center;gap:.85rem;margin-bottom:clamp(1.25rem, 3vw, 1.85rem)}
.hero-line{width:44px;height:1px;background:linear-gradient(90deg,var(--gold-l),rgba(196,168,106,.35));flex-shrink:0;opacity:.92}
.hero-eyebrow span{
  font-size:clamp(.74rem, 1.35vw, .82rem);font-weight:500;
  letter-spacing:.26em;text-transform:uppercase;color:var(--gold-l);line-height:1.35;
}
.hero-title{
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(2.85rem, 7vw, 6rem);font-weight:300;line-height:1.05;
  letter-spacing:-.03em;color:var(--text);margin-bottom:clamp(.85rem, 2vw, 1.35rem);
  max-width:none;text-wrap:balance;
  text-shadow:0 4px 48px rgba(0,0,0,.55),0 2px 14px rgba(0,0,0,.35);
}
.hero-title em{font-style:italic;color:var(--gold-l);font-weight:400}
.hero-subtitle{
  font-size:clamp(1.02rem, 1.85vw, 1.22rem);font-weight:400;line-height:1.75;
  color:rgba(245,241,234,.88);max-width:none;margin-bottom:clamp(1.75rem, 4vw, 2.65rem);
  letter-spacing:.01em;
  text-shadow:0 3px 36px rgba(0,0,0,.5),0 1px 10px rgba(0,0,0,.28);
}
.hero-actions{display:flex;gap:clamp(.75rem, 2vw, 1.15rem);align-items:center;flex-wrap:wrap}
.btn-primary{padding:.8rem 2rem;background:var(--gold);color:var(--dark);font-size:.88rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;border-radius:2px;transition:all .25s}
.btn-primary:hover{background:var(--gold-l);transform:translateY(-1px)}
.btn-ghost{padding:.8rem 2rem;border:1px solid var(--border2);color:var(--text);font-size:.88rem;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;border-radius:2px;transition:all .25s}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold-l)}
.hero-badges{display:flex;gap:clamp(.85rem, 2vw, 1.35rem);margin-top:clamp(2.35rem, 5vw, 3.65rem);flex-wrap:wrap}
.badge{display:flex;align-items:center;gap:.5rem;padding:.55rem 1rem;border:1px solid var(--border);border-radius:2px;background:var(--gold-pale)}
.badge-icon{width:22px;height:22px;background:var(--gold);border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.badge span{font-size:.82rem;color:var(--prose);letter-spacing:.04em}
.badge strong{color:var(--gold-l);font-weight:600}
.hero-stat{text-align:center}
.hero-stat-num{font-family:'Cormorant Garamond',serif;font-size:3rem;font-weight:300;color:var(--gold-l);line-height:1}
.hero-stat-lbl{font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:.25rem}

/* Hero banner — corner metric strips (replaces centered PV·CV block) */
.hero-metrics{pointer-events:none;position:absolute;inset:0;z-index:2}
.hero-data{
  position:absolute;
  inset-inline-start:auto;
  inset-inline-end:clamp(0.55rem, 1.85vw, 1.15rem);
  display:flex;align-items:stretch;gap:clamp(.72rem, 2vw, 1.05rem);
  max-width:min(280px, 46vw);
}
.hero-data::before{
  content:'';
  width:2px;flex-shrink:0;border-radius:1px;
  background:linear-gradient(180deg,var(--gold-l),rgba(196,168,106,.45));
  opacity:.92;
}
.hero-data-inner{display:flex;flex-direction:column;gap:.18rem;text-align:right;min-width:0}
.hero-data--tl{top:calc(var(--nav-bar-min-h) + 1rem)}
.hero-data--bl{bottom:clamp(1.6rem, 5.5vh, 3.25rem)}
.hero-data-kicker{
  font-family:'DM Sans',sans-serif;font-size:.66rem;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;line-height:1.35;
}
.hero-data-num{
  font-family:'Cormorant Garamond',serif;font-size:clamp(2rem, 4.6vw, 3.15rem);
  font-weight:300;color:var(--gold-l);line-height:1.05;letter-spacing:-.02em;
}
.hero-data-num .hero-data-unit{
  font-family:'Cormorant Garamond',serif;font-size:.52em;font-weight:400;
  letter-spacing:0;margin-inline-start:.06em;opacity:.92;
}
.hero-data-desc{
  font-family:'DM Sans',sans-serif;font-size:.66rem;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;line-height:1.35;
}
.hero-data--compare .hero-data-kicker,.hero-data--compare .hero-data-desc{color:var(--muted)}
.hero-data--formula .hero-data-kicker,.hero-data--formula .hero-data-desc{color:var(--gold-l)}

/* Tablet — hero metrics slightly tighter */
@media(max-width:1100px){
  .hero-data{max-width:min(260px, 44vw)}
}

/* Hide banner metric HUD on mobile / small tablet */
@media(max-width:960px){
  .hero-metrics{display:none}
}
.hero-divider{width:1px;height:50px;background:var(--border);align-self:center}

section{padding:6.5rem 3.5rem}
.section-tag{display:flex;align-items:center;gap:.75rem;margin-bottom:1.25rem}
.section-tag span{font-size:.76rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-l)}
.tag-line{width:28px;height:1px;background:var(--gold)}
.section-title{font-family:'Cormorant Garamond',serif;font-size:clamp(2.25rem,3.8vw,3.6rem);font-weight:300;line-height:1.15;margin-bottom:1rem;color:var(--text)}
.section-title em{font-style:italic;color:var(--gold-l)}
.section-lead{font-size:1.1rem;color:var(--prose);max-width:38rem;line-height:1.88;font-weight:400}
.divider{width:100%;height:1px;background:var(--border)}

#about{background:var(--dark2)}
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:5rem;align-items:start;margin-top:4rem}
.about-text p{color:var(--prose);font-size:1.05rem;line-height:1.92;margin-bottom:1.25rem;font-weight:400}
.about-text p strong{color:var(--text);font-weight:600}
.about-pills{display:flex;flex-wrap:wrap;gap:.65rem;margin-top:2rem}
.pill{padding:.4rem 1rem;border:1px solid var(--border);border-radius:30px;font-size:.8rem;color:var(--muted);letter-spacing:.06em}
.about-cards{display:flex;flex-direction:column;gap:1.25rem}
.about-card{padding:1.5rem 1.75rem;border:1px solid var(--border);border-radius:4px;background:var(--dark3);position:relative;overflow:hidden;transition:border-color .3s}
.about-card::before{content:'';position:absolute;top:0;left:0;width:3px;height:100%;background:var(--gold)}
.about-card:hover{border-color:var(--border2)}
.about-card h4{font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-l);margin-bottom:.4rem}
.about-card p{font-size:.95rem;color:var(--prose);font-weight:400;line-height:1.78}
.cert-strip{display:flex;gap:1.5rem;margin-top:1.5rem;flex-wrap:wrap}
.cert{display:flex;flex-direction:column;align-items:center;gap:.4rem;padding:1rem 1.4rem;border:1px solid var(--border);border-radius:4px;background:var(--gold-pale);min-width:100px;text-align:center}
.cert-icon{width:32px;height:32px;background:var(--gold);border-radius:50%;display:flex;align-items:center;justify-content:center}
.cert strong{font-size:.8rem;color:var(--gold-l);letter-spacing:.06em}
.cert span{font-size:.72rem;color:var(--muted)}

#products{background:var(--dark)}
.products-intro{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:end;margin-bottom:4rem}
.product-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-bottom:3rem}
.product-card{border:1px solid var(--border);border-radius:4px;background:var(--dark2);overflow:hidden;transition:all .35s;cursor:default}
.product-card:hover{border-color:var(--border2);transform:translateY(-4px)}
.product-card-top{padding:2rem 2rem 1.5rem;border-bottom:1px solid var(--border)}
.product-number{font-family:'Cormorant Garamond',serif;font-size:3.25rem;font-weight:300;color:var(--dim);line-height:1;margin-bottom:.75rem}
.product-card h3{font-family:'Cormorant Garamond',serif;font-size:1.45rem;font-weight:400;color:var(--text);margin-bottom:.5rem}
.product-card p{font-size:.95rem;color:var(--prose);font-weight:400;line-height:1.8}
.product-card-bot{padding:1.25rem 2rem;display:flex;flex-direction:column;gap:.4rem}
.product-feat{display:flex;align-items:center;gap:.6rem;font-size:.85rem;color:var(--muted)}
.feat-dot{width:5px;height:5px;background:var(--gold);border-radius:50%;flex-shrink:0}
.highlight-stat{margin-top:3rem;padding:2rem 2.5rem;border:1px solid var(--border2);border-radius:4px;background:var(--gold-pale);display:flex;align-items:center;gap:3rem;flex-wrap:wrap}
.hs-num{font-family:'Cormorant Garamond',serif;font-size:3.5rem;font-weight:300;color:var(--gold-l);line-height:1;flex-shrink:0}
.hs-text h4{font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-l);margin-bottom:.4rem}
.hs-text p{font-size:1rem;color:var(--prose);font-weight:400;max-width:520px}
.hs-text strong{color:var(--text);font-weight:600}
.apps-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem;margin-top:4rem}
.app-tile{padding:2rem 1.5rem;border:1px solid var(--border);border-radius:4px;background:var(--dark2);text-align:center;transition:all .3s}
.app-tile:hover{border-color:var(--gold);background:var(--gold-pale)}
.app-icon{width:52px;height:52px;margin:0 auto 1rem;border:1px solid var(--border);border-radius:50%;display:flex;align-items:center;justify-content:center}
.app-tile:hover .app-icon{border-color:var(--gold)}
.app-tile h4{font-family:'Cormorant Garamond',serif;font-size:1.2rem;font-weight:400;color:var(--text);margin-bottom:.35rem}
.app-tile p{font-size:.88rem;color:var(--prose);font-weight:400}

#rnd{background:var(--dark2)}
.rnd-layout{display:grid;grid-template-columns:1fr 1.4fr;gap:5rem;margin-top:4rem;align-items:start}
.rnd-pillars{display:flex;flex-direction:column;gap:1.25rem;margin-top:2rem}
.rnd-pillar{display:flex;align-items:center;gap:1.2rem;padding:1.25rem 1.5rem;border:1px solid var(--border);border-radius:4px;background:var(--dark3)}
.pillar-num{font-family:'Cormorant Garamond',serif;font-size:2rem;color:var(--gold);font-weight:300;min-width:2.5rem;line-height:1}
.pillar-info h4{font-size:.88rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text);margin-bottom:.25rem}
.pillar-info p{font-size:.92rem;color:var(--prose);font-weight:400}
.rnd-features{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem}
.rnd-feat{padding:1.5rem;border:1px solid var(--border);border-radius:4px;background:var(--dark3);transition:border-color .3s}
.rnd-feat:hover{border-color:var(--border2)}
.rnd-feat-icon{width:36px;height:36px;background:var(--gold-pale);border:1px solid var(--border);border-radius:4px;display:flex;align-items:center;justify-content:center;margin-bottom:1rem}
.rnd-feat h4{font-size:.88rem;letter-spacing:.08em;text-transform:uppercase;color:var(--gold-l);margin-bottom:.5rem}
.rnd-feat p{font-size:.92rem;color:var(--prose);font-weight:400;line-height:1.78}
.rnd-quote{margin-top:2rem;padding:1.75rem 2rem;border-left:2px solid var(--gold);background:var(--gold-pale)}
.rnd-quote p{font-family:'Cormorant Garamond',serif;font-size:1.42rem;font-style:italic;color:var(--text);line-height:1.58;font-weight:300}

#contact{background:var(--dark);position:relative;overflow:hidden}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:5rem;margin-top:4rem;align-items:start}
.contact-info{display:flex;flex-direction:column;gap:1.5rem}
.contact-item{display:flex;align-items:flex-start;gap:1.25rem;padding:1.5rem;border:1px solid var(--border);border-radius:4px;background:var(--dark2)}
.ci-icon{width:42px;height:42px;border:1px solid var(--border2);border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ci-icon svg{width:18px;height:18px;stroke:var(--gold);fill:none;stroke-width:1.5}
.ci-label{font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-l);margin-bottom:.25rem}
.ci-val{font-size:1.05rem;color:var(--text);font-weight:400}
.ci-val a{color:var(--gold-l);text-decoration:none;transition:color .2s}
.ci-val a:hover{color:var(--text)}
.contact-form-wrap{padding:2.5rem;border:1px solid var(--border);border-radius:4px;background:var(--dark2)}
.form-title{font-family:'Cormorant Garamond',serif;font-size:1.85rem;font-weight:300;margin-bottom:.5rem;color:var(--text)}
.form-sub{font-size:.95rem;color:var(--prose);margin-bottom:2rem}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1rem}
.form-group{display:flex;flex-direction:column;gap:.4rem;margin-bottom:1rem}
.form-group label{font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:500}
.form-group input,.form-group select,.form-group textarea{background:var(--dark3);border:1px solid var(--dim);border-radius:2px;padding:.85rem 1.05rem;color:var(--text);font-family:'DM Sans',sans-serif;font-size:1rem;outline:none;transition:border-color .25s;width:100%}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{border-color:var(--gold)}
.form-group textarea{resize:vertical;min-height:110px}
.form-group select option{background:var(--dark3)}
.form-group.has-field-error label{color:#e88787!important}
.form-group.has-field-error input,.form-group.has-field-error select,.form-group.has-field-error textarea{border-color:rgba(220,100,100,.75)!important;box-shadow:0 0 0 1px rgba(220,100,100,.2)}
.field-error-msg{display:none;margin-top:.2rem;font-size:.82rem;font-weight:500;color:#e88787;line-height:1.45}
.field-error-msg.is-visible{display:block}
.form-captcha{margin-bottom:1rem}
.captcha-row{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap;margin:.5rem 0 .75rem}
.captcha-code{font-family:ui-monospace,'Cascadia Code',monospace;font-size:1.45rem;font-weight:500;letter-spacing:.28em;color:var(--gold-l);padding:.55rem 1rem;background:var(--dark3);border:1px solid var(--border2);border-radius:2px;user-select:none}
.captcha-refresh{padding:.45rem .65rem;background:transparent;border:1px solid var(--dim);border-radius:2px;color:var(--muted);cursor:pointer;font-size:1rem;line-height:1;transition:border-color .2s,color .2s}
.captcha-refresh:hover{border-color:var(--gold);color:var(--gold-l)}
.captcha-error{font-size:.88rem;color:#e8b8b8;margin-top:.5rem}
#captcha-load-err{font-size:.8rem;color:#c9a0a0;margin-top:.35rem;line-height:1.45;display:none}
#captcha-load-err.is-visible{display:block}
.form-feedback{display:none;margin-bottom:1.25rem;padding:1rem 1.15rem;border-radius:4px;font-size:.95rem;font-weight:400;line-height:1.55}
.form-quote-success{display:none;border:1px solid rgba(74,124,89,0.55);background:rgba(74,124,89,0.14);color:var(--text)}
.form-quote-error{display:none;border:1px solid rgba(200,120,120,0.5);background:rgba(200,120,120,0.1);color:#f0ddd9}
.form-quote-success.is-visible,.form-quote-error.is-visible{display:block}
.form-honeypot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;opacity:0;pointer-events:none}

/* Thank-you popup (contact form success) */
.thanks-modal{position:fixed;inset:0;z-index:400;display:flex;align-items:center;justify-content:center;padding:1.35rem;padding-bottom:calc(1.35rem + env(safe-area-inset-bottom));opacity:0;visibility:hidden;transition:opacity .32s ease,visibility .32s ease;pointer-events:none}
.thanks-modal.is-open{opacity:1;visibility:visible;pointer-events:auto}
.thanks-modal-backdrop{position:absolute;inset:0;background:rgba(5,6,12,.82);backdrop-filter:blur(10px)}
.thanks-modal-panel{position:relative;z-index:1;width:100%;max-width:420px;padding:2.25rem 1.85rem 1.85rem;border:1px solid var(--border2);border-radius:4px;background:var(--dark2);box-shadow:0 28px 72px rgba(0,0,0,.6),0 0 42px rgba(196,168,106,.08);transform:translateY(18px) scale(.96);transition:transform .38s cubic-bezier(.23,1,.32,1)}
.thanks-modal.is-open .thanks-modal-panel{transform:translateY(0) scale(1)}
.thanks-modal-x{position:absolute;top:.65rem;right:.65rem;width:38px;height:38px;display:flex;align-items:center;justify-content:center;padding:0;border:1px solid transparent;border-radius:2px;background:transparent;color:var(--muted);font-size:1.5rem;line-height:1;cursor:pointer;transition:color .2s,border-color .2s,color .2s}
.thanks-modal-x:hover{color:var(--gold-l);border-color:var(--border)}
.thanks-modal-icon{width:56px;height:56px;margin:0 auto .9rem;display:flex;align-items:center;justify-content:center;background:var(--gold);border-radius:50%}
.thanks-modal-title{font-family:'Cormorant Garamond',serif;font-size:1.95rem;font-weight:400;color:var(--text);margin-bottom:.65rem;line-height:1.2}
.thanks-modal-text{font-size:1rem;color:var(--prose);font-weight:400;line-height:1.75;margin:0 auto 1.35rem;max-width:340px}

@media(prefers-reduced-motion:reduce){
  .thanks-modal,.thanks-modal-panel{transition-duration:.01ms !important}
}
.submit-btn{width:100%;padding:1rem;background:var(--gold);color:var(--dark);font-size:.9rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;border:none;border-radius:2px;cursor:pointer;transition:all .25s;margin-top:.5rem}
.submit-btn:hover{background:var(--gold-l)}

footer{padding:2.5rem 3.5rem;border-top:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem;background:var(--dark2)}
.footer-logo{font-family:'Cormorant Garamond',serif;font-size:1.1rem;font-weight:600;color:var(--gold-l);letter-spacing:.06em}
.footer-logo span{display:block;font-size:.74rem;color:var(--muted);letter-spacing:.14em;font-weight:400}
.footer-copy{font-size:.82rem;color:var(--muted);letter-spacing:.06em}

.fade-up{opacity:0;animation:fadeUp .8s ease forwards}
.d1{animation-delay:.1s}.d2{animation-delay:.25s}.d3{animation-delay:.4s}.d4{animation-delay:.55s}.d5{animation-delay:.7s}

@media(max-width:960px){
  body.nav-overflow-lock .nav-brand,
  body.nav-overflow-lock .nav-toggle{z-index:262}
  nav{--nav-bar-min-h:clamp(5rem,20vw,7rem);--nav-pad-block:clamp(0.32rem,2vw,0.5rem);padding:var(--nav-pad-block) 1.5rem;flex-wrap:nowrap}
  .nav-toggle{display:flex}
  .nav-backdrop{display:block;position:fixed;inset:0;z-index:198;background:rgba(5,6,10,.75);backdrop-filter:blur(4px);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .32s ease,visibility .32s ease}
  .site-header.nav-menu-open .nav-backdrop{opacity:1;visibility:visible;pointer-events:auto}
  .nav-menu{
    margin-left:0;
    position:fixed;top:0;left:0;right:0;bottom:0;
    width:100%;
    max-width:none;
    z-index:255;
    flex-direction:column;align-items:stretch;
    justify-content:flex-start;
    gap:0;
    padding-top:calc(env(safe-area-inset-top,0px) + var(--nav-bar-min-h) + 1.35rem);
    padding-bottom:calc(env(safe-area-inset-bottom,0px) + 1.75rem);
    padding-left:max(1.5rem,env(safe-area-inset-left,0px));
    padding-right:max(1.5rem,env(safe-area-inset-right,0px));
    min-height:100vh;
    min-height:100svh;
    min-height:100dvh;
    box-sizing:border-box;
    background:rgba(11,13,19,0.98);
    backdrop-filter:blur(22px);
    border-left:none;
    border-top:1px solid var(--border);
    box-shadow:none;
    transform:translateX(100%);
    transition:transform .38s cubic-bezier(.23,1,.32,1),visibility .38s ease;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    visibility:hidden;
  }
  .site-header.nav-menu-open .nav-menu{transform:translateX(0);visibility:visible}
  .nav-menu .nav-links{flex-direction:column;align-items:stretch;gap:0;width:100%}
  .nav-menu .nav-links a{font-size:.92rem;padding:.95rem .25rem;border-bottom:1px solid var(--border);letter-spacing:.12em;color:var(--prose)}
  .nav-menu .nav-links li:first-child a{padding-top:.5rem;border-top:none}
  .nav-menu .nav-links a:hover,.nav-menu .nav-links a.nav-active{color:var(--gold-l)}
  .nav-menu .nav-cta{margin-top:1.5rem;text-align:center;padding:.75rem 1.25rem;width:100%}
  section{padding:4.5rem 1.5rem}
  #hero{padding:0 1.5rem}
  .about-grid,.products-intro,.rnd-layout,.contact-grid{grid-template-columns:1fr;gap:2.5rem}
  .product-grid{grid-template-columns:1fr 1fr}
  .apps-strip{grid-template-columns:1fr 1fr}
  .rnd-features{grid-template-columns:1fr}
  .form-row{grid-template-columns:1fr}
}
@media (prefers-reduced-motion: reduce) {
  .nav-menu,.nav-backdrop,.nav-toggle-lines span{transition-duration:0.01ms !important}
}

@media(max-width:600px){.product-grid,.apps-strip{grid-template-columns:1fr}}

/* =====================================================================
   3D ANIMATION SYSTEM — AL-KHAIR ENGINEERING
   ===================================================================== */

/* --- Core Keyframes --- */
@keyframes fadeUp{
  from{opacity:0;transform:perspective(800px) rotateX(-10deg) translateY(30px)}
  to{opacity:1;transform:perspective(800px) rotateX(0deg) translateY(0)}
}

@keyframes spinDisc{
  from{transform:rotateX(68deg) rotateZ(0deg)}
  to  {transform:rotateX(68deg) rotateZ(360deg)}
}

@keyframes discFloat{
  0%,100%{transform:translateY(0px)}
  50%    {transform:translateY(-18px)}
}

@keyframes glowPulse{
  0%,100%{opacity:.35;transform:scale(1) rotateX(68deg)}
  50%    {opacity:.85;transform:scale(1.06) rotateX(68deg)}
}

@keyframes particleRise{
  0%  {transform:translateY(0) translateX(0) scale(1);opacity:0}
  10% {opacity:1}
  90% {opacity:.6}
  100%{transform:translateY(-100px) translateX(var(--dx,20px)) scale(.2);opacity:0}
}

@keyframes gridDrift{
  from{background-position:0 0}
  to  {background-position:60px 60px}
}

@keyframes shimmerSlide{
  0%  {background-position:-200% 0}
  100%{background-position:200% 0}
}

@keyframes hudBlink{
  0%,100%{opacity:.7}
  50%    {opacity:.2}
}

@keyframes borderGlow{
  0%,100%{box-shadow:0 0 8px rgba(196,168,106,.12),0 0 0 1px rgba(196,168,106,.22)}
  50%    {box-shadow:0 0 22px rgba(196,168,106,.32),0 0 0 1px rgba(196,168,106,.45)}
}

@keyframes rotateRingCW{
  to{transform:rotate(360deg)}
}
@keyframes rotateRingCCW{
  to{transform:rotate(-360deg)}
}

/* --- Animated hero grid --- */
.hero-grid{animation:gridDrift 22s linear infinite}

/* ---- 3D Disc Hero Visual ---- */
.hero-3d{
  position:absolute;
  right:0;top:0;bottom:0;
  width:50vw;max-width:640px;
  display:flex;align-items:center;justify-content:center;
  pointer-events:none;z-index:1;
}

.disc-scene{
  position:relative;
  width:min(360px,38vw);
  height:min(360px,38vw);
  perspective:920px;
  perspective-origin:50% 45%;
  animation:discFloat 7s ease-in-out infinite;
}

/* Spinning disc body */
.disc-body{
  position:absolute;inset:0;
  animation:spinDisc 18s linear infinite;
}

/* Outer rotor with repeating-conic vent slots */
.disc-outer-ring{
  position:absolute;inset:0;border-radius:50%;
  background:
    repeating-conic-gradient(
      rgba(196,168,106,.045) 0deg 26deg,
      rgba(3,4,9,.88) 26deg 30deg
    ),
    radial-gradient(circle at 38% 32%,rgba(196,168,106,.08) 0%,rgba(11,13,19,.97) 55%);
  border:13px solid #C4A86A;
  box-shadow:
    0 0 28px rgba(196,168,106,.65),
    0 0 58px rgba(196,168,106,.32),
    0 0 110px rgba(196,168,106,.12),
    inset 0 0 35px rgba(196,168,106,.14);
}

/* Friction track ring */
.disc-track{
  position:absolute;inset:10%;border-radius:50%;
  border:1px solid rgba(196,168,106,.18);
  background:transparent;
}

/* Hat/inner area */
.disc-inner-ring{
  position:absolute;inset:28%;border-radius:50%;
  border:2.5px solid rgba(196,168,106,.48);
  background:radial-gradient(circle,rgba(18,21,30,1) 38%,rgba(11,13,19,.95) 100%);
  box-shadow:inset 0 0 20px rgba(196,168,106,.1);
}

/* Center hub */
.disc-hub{
  position:absolute;inset:44%;border-radius:50%;
  background:radial-gradient(circle at 35% 35%,#E0C992 0%,#C4A86A 55%,#5c4010 100%);
  box-shadow:0 0 16px rgba(196,168,106,.85),0 0 32px rgba(196,168,106,.4);
}

/* Drilled holes — 8 positions on a ~38% radius ring */
.disc-hole{
  position:absolute;width:5.5%;height:5.5%;border-radius:50%;
  background:rgba(2,3,7,.98);
  box-shadow:inset 0 0 5px rgba(0,0,0,.9),0 0 4px rgba(0,0,0,.6);
}
.dh1{top:9.2%; left:47.1%}
.dh2{top:20.3%;left:73.9%}
.dh3{top:47.1%;left:85%}
.dh4{top:73.9%;left:73.9%}
.dh5{top:85%;  left:47.1%}
.dh6{top:73.9%;left:20.3%}
.dh7{top:47.1%;left:9.2%}
.dh8{top:20.3%;left:20.3%}

/* Tilted ambient glow rings (outside spinning disc) */
.disc-glow-ring{
  position:absolute;border-radius:50%;
  top:50%;left:50%;
}
.dgr1{
  width:114%;height:114%;
  margin-top:-57%;margin-left:-57%;
  border:1px solid rgba(196,168,106,.14);
  transform:rotateX(68deg);
  animation:glowPulse 3.5s ease-in-out infinite;
}
.dgr2{
  width:138%;height:138%;
  margin-top:-69%;margin-left:-69%;
  border:1px solid rgba(196,168,106,.07);
  transform:rotateX(68deg);
  animation:glowPulse 3.5s ease-in-out infinite .9s;
}
.dgr3{
  width:165%;height:165%;
  margin-top:-82.5%;margin-left:-82.5%;
  border:1px solid rgba(196,168,106,.035);
  transform:rotateX(68deg);
  animation:glowPulse 3.5s ease-in-out infinite 1.8s;
}

/* Ground glow shadow */
.disc-shadow{
  position:absolute;
  bottom:-22px;left:50%;
  transform:translateX(-50%);
  width:65%;height:22px;
  background:radial-gradient(ellipse,rgba(196,168,106,.22) 0%,transparent 70%);
  filter:blur(10px);
}

/* --- Floating Particles --- */
.disc-particles{
  position:absolute;inset:-50px;
  overflow:visible;pointer-events:none;
}
.dp{
  position:absolute;border-radius:50%;
  background:var(--gold);opacity:0;
  animation:particleRise linear infinite;
}
.dp1{width:3px;height:3px;bottom:32%;left:55%;animation-duration:3.5s;animation-delay:0s;   --dx:38px}
.dp2{width:2px;height:2px;bottom:42%;left:66%;animation-duration:4.5s;animation-delay:.8s;  --dx:-22px}
.dp3{width:4px;height:4px;bottom:26%;left:44%;animation-duration:3.1s;animation-delay:1.5s; --dx:28px}
.dp4{width:2px;height:2px;bottom:52%;left:34%;animation-duration:5.1s;animation-delay:2.2s; --dx:-34px}
.dp5{width:3px;height:3px;bottom:36%;left:71%;animation-duration:4.1s;animation-delay:.4s;  --dx:16px}
.dp6{width:2px;height:2px;bottom:20%;left:51%;animation-duration:5.6s;animation-delay:1.9s; --dx:-18px}
.dp7{width:3px;height:3px;bottom:47%;left:41%;animation-duration:3.9s;animation-delay:3s;   --dx:24px}
.dp8{width:2px;height:2px;bottom:39%;left:61%;animation-duration:4.3s;animation-delay:2.6s; --dx:-26px}

/* --- HUD Data Overlays --- */
.hud-data{position:absolute;pointer-events:none}

.hud-tr{
  top:8%;right:5%;text-align:right;
  border-right:1px solid rgba(196,168,106,.28);
  padding-right:1rem;
}
.hud-bl{
  bottom:10%;left:5%;
  border-left:1px solid rgba(196,168,106,.28);
  padding-left:1rem;
}
.hud-tag{
  font-size:.63rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--gold);opacity:.65;
  animation:hudBlink 3.5s ease-in-out infinite;
  margin-bottom:.2rem;
}
.hud-value{
  font-family:'Cormorant Garamond',serif;
  font-size:2.4rem;font-weight:300;
  color:var(--gold-l);line-height:1;
  filter:drop-shadow(0 0 10px rgba(196,168,106,.48));
}
.hud-unit-inline{font-size:1.1rem;color:var(--gold);margin-left:2px}
.hud-unit{
  font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);margin-top:.3rem;
}

/* --- Enhanced hover transitions (override earlier rules) --- */
.product-card{transition:all .42s cubic-bezier(.23,1,.32,1)}
.product-card:hover{
  border-color:var(--border2);
  transform:translateY(-10px) perspective(800px) rotateX(4deg);
  box-shadow:0 24px 56px rgba(0,0,0,.55),0 0 26px rgba(196,168,106,.12);
}

.about-card{transition:all .4s cubic-bezier(.23,1,.32,1)}
.about-card:hover{
  border-color:var(--border2);
  transform:translateX(6px);
  box-shadow:-4px 0 28px rgba(196,168,106,.07),8px 14px 36px rgba(0,0,0,.42);
}

.rnd-feat{transition:all .42s cubic-bezier(.23,1,.32,1)}
.rnd-feat:hover{
  border-color:var(--border2);
  transform:translateY(-6px) perspective(600px) rotateX(5deg);
  box-shadow:0 18px 40px rgba(0,0,0,.48),0 0 16px rgba(196,168,106,.1);
}

.app-tile{transition:all .42s cubic-bezier(.23,1,.32,1)}
.app-tile:hover{
  border-color:var(--gold);background:var(--gold-pale);
  transform:translateY(-9px) perspective(600px) rotateX(6deg);
  box-shadow:0 20px 44px rgba(0,0,0,.48),0 0 20px rgba(196,168,106,.14);
}

.rnd-pillar{transition:all .38s cubic-bezier(.23,1,.32,1)}
.rnd-pillar:hover{
  border-color:var(--border2);
  transform:translateX(7px);
  box-shadow:-3px 0 18px rgba(196,168,106,.07),8px 8px 28px rgba(0,0,0,.38);
}

.cert{transition:all .32s ease}
.cert:hover{
  border-color:var(--border2);
  transform:translateY(-3px);
  box-shadow:0 8px 22px rgba(0,0,0,.38),0 0 12px rgba(196,168,106,.1);
}

.contact-item{transition:all .38s cubic-bezier(.23,1,.32,1)}
.contact-item:hover{
  border-color:var(--border2);
  transform:translateX(5px);
  box-shadow:0 8px 28px rgba(0,0,0,.32),0 0 12px rgba(196,168,106,.08);
}

/* --- Highlight stat shimmer --- */
.highlight-stat{
  position:relative;overflow:hidden;
  animation:borderGlow 4s ease-in-out infinite;
}
.highlight-stat::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(110deg,transparent 25%,rgba(196,168,106,.09) 50%,transparent 75%);
  background-size:200% 100%;
  animation:shimmerSlide 5s ease-in-out infinite;
  pointer-events:none;
}

/* --- Section title animated underline --- */
.section-title em{position:relative;display:inline}
.section-title em::after{
  content:'';
  position:absolute;bottom:-2px;left:0;
  width:0;height:1px;
  background:linear-gradient(90deg,var(--gold),transparent);
  transition:width 1.3s ease .3s;
}
section.in-view .section-title em::after{width:100%}

/* --- Button shine effect --- */
.btn-primary{position:relative;overflow:hidden}
.btn-primary::before{
  content:'';
  position:absolute;top:0;left:-100%;
  width:100%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.13),transparent);
  transition:left .45s ease;
}
.btn-primary:hover::before{left:100%}
.btn-primary:hover{
  background:var(--gold-l);
  transform:translateY(-2px);
  box-shadow:0 8px 26px rgba(196,168,106,.28);
}
.btn-ghost:hover{
  border-color:var(--gold);color:var(--gold-l);
  box-shadow:0 8px 26px rgba(196,168,106,.12),inset 0 0 16px rgba(196,168,106,.05);
}

/* --- Nav scroll state --- */
nav.nav-scrolled{
  --nav-pad-block:clamp(0.28rem,0.85vw,0.46rem);
  padding-block:var(--nav-pad-block);
  padding-inline:3.5rem;
  background:rgba(11,13,19,.98);
  box-shadow:0 2px 28px rgba(196,168,106,.1);
}
@media(max-width:900px){nav.nav-scrolled{padding-inline:1.5rem}}

/* Inner pages — professional header banner (same palette) */
.site-header{border-bottom-color:var(--border)}
.nav-links a.nav-active{color:var(--gold-l);font-weight:500}
.page-banner{position:relative;padding:clamp(6.75rem,14vw,8.75rem) 3.5rem clamp(3rem,5vw,4.25rem);background:linear-gradient(180deg,var(--dark2) 0%,var(--dark) 100%);border-bottom:1px solid var(--border);overflow:hidden}
.page-banner .page-banner-bg{position:absolute;inset:0;z-index:0;pointer-events:none}
.page-banner .page-banner-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(196,168,106,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(196,168,106,.045) 1px,transparent 1px);background-size:52px 52px;opacity:.75}
.page-banner .page-banner-glow{position:absolute;top:-40%;right:-15%;width:min(72vw,900px);height:min(72vw,900px);background:radial-gradient(ellipse,rgba(196,168,106,.1) 0%,transparent 68%)}
.page-banner-inner{position:relative;z-index:1;max-width:920px}
.page-crumb{font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);margin-bottom:1.15rem;display:flex;align-items:center;gap:.65rem;flex-wrap:wrap}
.page-crumb a{color:var(--gold-l);text-decoration:none;font-weight:500;transition:opacity .22s ease}
.page-crumb a:hover{opacity:.85}
.page-crumb span.page-crumb-sep{opacity:.45;color:var(--dim)}
.page-crumb span.page-crumb-current{color:var(--text);letter-spacing:.16em;font-weight:500}
.page-banner-title{font-family:'Cormorant Garamond',serif;font-size:clamp(2.35rem,4.6vw,3.85rem);font-weight:300;line-height:1.12;color:var(--text);margin-bottom:.65rem}
.page-banner-title em{font-style:italic;color:var(--gold-l)}
.page-banner-lead{font-size:1.08rem;color:var(--prose);max-width:40rem;line-height:1.82;font-weight:400}
.page-banner-meta{display:flex;flex-wrap:wrap;gap:1rem;margin-top:1.75rem}
.page-banner-pill{padding:.42rem .95rem;border:1px solid var(--border);border-radius:2px;background:rgba(196,168,106,.06);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-l)}
.page-main{padding-bottom:2rem}

/* Home (Index) — section backgrounds match inner pages */
#home-about{background:var(--dark2)}
#home-products{background:var(--dark)}
#home-tech{background:var(--dark)}
#home-cta{background:var(--dark2);position:relative;overflow:hidden}
.home-cta-glow{position:absolute;top:-20%;right:-10%;width:50vw;height:50vw;background:radial-gradient(ellipse,rgba(184,151,90,.07) 0%,transparent 65%);pointer-events:none}
.home-actions{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;margin-top:2rem}
.home-actions .btn-ghost,.home-actions .btn-primary{margin:0}
.home-section-foot{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;margin-top:2.75rem;padding-top:2rem;border-top:1px solid var(--border)}
.home-section-foot a{text-decoration:none}
.home-foot-note{flex-basis:100%;margin:.15rem 0 0;font-size:.87rem;color:var(--muted);font-weight:400;line-height:1.65}

/* --- Hide 3D disc on small screens --- */
@media(max-width:960px){.hero-3d{display:none}}
@media(max-width:960px){.page-banner{padding:6rem 1.5rem 2.75rem}}

/* =====================================================================
   SPATIAL 3D TRANSFORMATION — AL-KHAIR ENGINEERING
   ===================================================================== */

/* ── Three.js Canvas ───────────────────────────────────────────────── */
#three-canvas{
  position:fixed;
  top:0;left:0;
  width:100%;height:100%;
  z-index:0;
  pointer-events:none;
  display:block;
}

/* ── Cursor Aura ───────────────────────────────────────────────────── */
#cursor-glow{
  position:fixed;
  width:520px;height:520px;
  border-radius:50%;
  background:radial-gradient(circle at center,
    rgba(196,168,106,0.075) 0%,
    rgba(196,168,106,0.03) 38%,
    transparent 68%);
  pointer-events:none;
  z-index:1;
  transform:translate(-50%,-50%);
  mix-blend-mode:screen;
  transition:opacity .55s ease;
  will-change:left,top;
}

/* ── Z-index hierarchy ─────────────────────────────────────────────── */
nav.site-header{z-index:200}
section{position:relative;z-index:2}
.divider{position:relative;z-index:2}
footer{position:relative;z-index:2}

/* ── Section backgrounds: let canvas breathe through ──────────────── */
section{background:transparent !important}
#home-about,#home-products,#home-tech,#home-cta{background:transparent !important}

/* ── Divider becomes a glowing gap ────────────────────────────────── */
.divider{
  height:48px !important;
  background:transparent !important;
  border:none !important;
  position:relative;
}
.divider::after{
  content:'';
  position:absolute;
  top:50%;left:10%;right:10%;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(196,168,106,0.18),transparent);
  transform:translateY(-50%);
}

/* ── Spatial Panel (floating glass module) ─────────────────────────── */
.spatial-panel{
  position:relative;
  background:rgba(11,13,19,0.70);
  backdrop-filter:blur(36px);
  -webkit-backdrop-filter:blur(36px);
  border-top:1px solid rgba(196,168,106,0.12);
  border-bottom:1px solid rgba(196,168,106,0.10);
  box-shadow:
    0 0 0 1px rgba(196,168,106,0.04),
    0 28px 80px rgba(0,0,0,0.68),
    0 8px 28px rgba(0,0,0,0.42),
    inset 0 0 60px rgba(196,168,106,0.018);
  overflow:hidden;
}

/* Glass top-edge highlight */
.spatial-panel-line.sp-top{
  position:absolute;
  top:0;left:12%;right:12%;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(196,168,106,0.42),transparent);
  pointer-events:none;
}

/* Corner brackets */
.spatial-panel-corner{
  position:absolute;
  width:18px;height:18px;
  pointer-events:none;
  opacity:.45;
}
.spatial-panel-corner.sp-tl{top:14px;left:14px;border-top:1px solid var(--gold);border-left:1px solid var(--gold)}
.spatial-panel-corner.sp-tr{top:14px;right:14px;border-top:1px solid var(--gold);border-right:1px solid var(--gold)}
.spatial-panel-corner.sp-bl{bottom:14px;left:14px;border-bottom:1px solid var(--gold);border-left:1px solid var(--gold)}
.spatial-panel-corner.sp-br{bottom:14px;right:14px;border-bottom:1px solid var(--gold);border-right:1px solid var(--gold)}

/* ── CTA panel: tighter glass ──────────────────────────────────────── */
.cta-panel{
  background:rgba(14,17,26,0.78);
  border:1px solid rgba(196,168,106,0.16);
  border-radius:6px;
  margin:0 1.5rem;
  padding:5rem 3.5rem;
}
@media(max-width:960px){.cta-panel{margin:0;border-radius:0;padding:4rem 1.5rem}}

/* ── Product cards: glassmorphism ──────────────────────────────────── */
.product-card{
  background:rgba(18,21,30,0.75) !important;
  backdrop-filter:blur(22px);
  -webkit-backdrop-filter:blur(22px);
}
.product-card:hover{
  background:rgba(22,26,38,0.82) !important;
}

/* ── App tiles: glass ──────────────────────────────────────────────── */
.app-tile{
  background:rgba(18,21,30,0.72) !important;
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}
.app-tile:hover{
  background:rgba(196,168,106,0.10) !important;
}

/* ── RND pillars & features: glass ────────────────────────────────── */
.rnd-pillar,.rnd-feat{
  background:rgba(24,28,40,0.72) !important;
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}

/* ── About cards: glass ────────────────────────────────────────────── */
.about-card{
  background:rgba(24,28,40,0.72) !important;
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}

/* ── Highlight stat: glass ─────────────────────────────────────────── */
.highlight-stat{
  background:rgba(196,168,106,0.07) !important;
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}

/* ── Hero: transparent bg so canvas shows ─────────────────────────── */
#hero{background:transparent !important}
.hero-bg{mix-blend-mode:screen}
.hero-grid{opacity:.45;animation:gridDrift 22s linear infinite}

/* ── Footer: glass ─────────────────────────────────────────────────── */
footer{
  background:rgba(11,13,19,0.88) !important;
  backdrop-filter:blur(24px);
  -webkit-backdrop-filter:blur(24px);
  border-top:1px solid rgba(196,168,106,0.18) !important;
}

/* ── Nav: enhanced glass ───────────────────────────────────────────── */
nav.site-header{
  background:rgba(11,13,19,0.72) !important;
  backdrop-filter:blur(28px) !important;
  -webkit-backdrop-filter:blur(28px) !important;
}
nav.nav-scrolled{
  background:rgba(11,13,19,0.92) !important;
  box-shadow:0 2px 32px rgba(196,168,106,0.12),0 0 0 1px rgba(196,168,106,0.06) !important;
}

/* ── Cert items: subtle glass ──────────────────────────────────────── */
.cert{
  background:rgba(196,168,106,0.07) !important;
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}

/* ── RND quote: glass ──────────────────────────────────────────────── */
.rnd-quote{
  background:rgba(196,168,106,0.06) !important;
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}

/* ── Badge: glass ──────────────────────────────────────────────────── */
.badge{
  background:rgba(196,168,106,0.08) !important;
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}

/* ── Card magnetic tilt: ensure transform-style ────────────────────── */
.product-card,.about-card,.app-tile,.rnd-feat{
  transform-style:preserve-3d;
  will-change:transform;
  transition:all .38s cubic-bezier(.23,1,.32,1);
}

/* ── Scroll-reveal initial state (GSAP handles animation) ─────────── */
.spatial-panel{
  will-change:opacity,transform,filter;
}

/* ── Reduced motion: disable heavy effects ─────────────────────────── */
@media(prefers-reduced-motion:reduce){
  #three-canvas{display:none}
  #cursor-glow{display:none}
  section{background:var(--dark) !important}
  #home-about{background:var(--dark2) !important}
  #home-cta{background:var(--dark2) !important}
  .spatial-panel{
    background:var(--dark2) !important;
    backdrop-filter:none !important;
  }
  .product-card{background:var(--dark2) !important;backdrop-filter:none !important}
  .app-tile,.rnd-pillar,.rnd-feat,.about-card{background:var(--dark3) !important;backdrop-filter:none !important}
  .divider{height:1px !important;background:var(--border) !important}
  .divider::after{display:none}
}

/* ── Inner-page banner: glass ──────────────────────────────────────── */
.page-banner{
  position:relative;
  z-index:2;
  background:rgba(11,13,19,0.72) !important;
  backdrop-filter:blur(30px);
  -webkit-backdrop-filter:blur(30px);
  border-bottom:1px solid rgba(196,168,106,0.12) !important;
}
.page-banner-bg{opacity:.55;mix-blend-mode:screen}

/* ── Contact-specific glass ────────────────────────────────────────── */
.contact-form-wrap{
  background:rgba(18,21,30,0.76) !important;
  backdrop-filter:blur(22px);
  -webkit-backdrop-filter:blur(22px);
}
.contact-item{
  background:rgba(18,21,30,0.72) !important;
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
}
.serve-box{
  background:rgba(18,21,30,0.72) !important;
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border:1px solid var(--border) !important;
}

/* ── form inputs: glass tint ───────────────────────────────────────── */
.form-group input,
.form-group select,
.form-group textarea{
  background:rgba(24,28,40,0.80) !important;
}

/* ── Mobile optimizations ──────────────────────────────────────────── */
@media(max-width:768px){
  #three-canvas{opacity:.65}
  #cursor-glow{display:none}
  .spatial-panel,
  .product-card,.app-tile,.rnd-pillar,.rnd-feat,.about-card,.cert{
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
  }
  .cta-panel{
    margin:0;
    border-left:none;
    border-right:none;
    border-radius:0;
  }
}

/* ── Language switcher ─────────────────────────────────────────────── */
.lang-switch{display:flex;align-items:center;flex-shrink:0;margin-inline:0 .25rem}
.lang-switch-link{
  display:inline-block;text-decoration:none;font-size:.78rem;font-weight:500;color:var(--gold-l);
  letter-spacing:.06em;padding:.42rem .75rem;border:1px solid var(--border);border-radius:2px;
  transition:border-color .22s,color .22s,background .22s;white-space:nowrap
}
.lang-switch-link:hover{border-color:var(--border2);color:var(--text);background:rgba(196,168,106,.06)}
.lang-switch-link:focus-visible{outline:2px solid var(--gold-l);outline-offset:3px}
@media(max-width:960px){
  .lang-switch{margin:.5rem 0 0;padding-top:.75rem;border-top:1px solid var(--border);width:100%;justify-content:center}
  .lang-switch-link{width:100%;text-align:center;padding:.72rem 1rem}
}

/* ── RTL (Arabic) layout ──────────────────────────────────────────── */
html[dir="rtl"] body{font-family:'Tajawal','DM Sans',sans-serif}
html[dir="rtl"] .hero-title,
html[dir="rtl"] .section-title,
html[dir="rtl"] .page-banner-title,
html[dir="rtl"] .product-card h3,
html[dir="rtl"] .product-number,
html[dir="rtl"] .hs-num,
html[dir="rtl"] .hero-stat-num,
html[dir="rtl"] .hero-data-num,
html[dir="rtl"] .form-title,
html[dir="rtl"] .thanks-modal-title,
html[dir="rtl"] .footer-logo,
html[dir="rtl"] .app-tile h4,
html[dir="rtl"] .hud-value{font-family:'Tajawal','Cormorant Garamond',serif}
html[dir="rtl"] .hero-data{
  flex-direction:row;
}
html[dir="rtl"] .hero-data-inner{text-align:left}
html[dir="rtl"] .hero-title em,
html[dir="rtl"] .section-title em,
html[dir="rtl"] .page-banner-title em{font-style:normal;color:var(--gold-l)}
html[dir="rtl"] .nav-brand img{object-position:right center}
html[dir="rtl"] .nav-menu{margin-left:0;margin-inline-start:auto}
html[dir="rtl"] .nav-toggle{margin-left:0;margin-inline-start:auto}
html[dir="rtl"] .hero-3d{right:auto;left:0}
html[dir="rtl"] .hero-glow{right:auto;left:-5%}
html[dir="rtl"] .hero-glow2{left:auto;right:-5%}
html[dir="rtl"] .home-cta-glow{right:auto;left:-10%}
html[dir="rtl"] .page-banner .page-banner-glow{right:auto;left:-15%}
html[dir="rtl"] .hud-tr{top:8%;right:auto;left:5%;text-align:left;border-right:none;border-left:1px solid rgba(196,168,106,.28);padding-right:0;padding-left:1rem}
html[dir="rtl"] .hud-bl{bottom:10%;left:auto;right:5%;border-left:none;border-right:1px solid rgba(196,168,106,.28);padding-left:0;padding-right:1rem}
html[dir="rtl"] .hud-unit-inline{margin-left:0;margin-inline-end:2px}
html[dir="rtl"] .about-card::before{left:auto;right:0}
html[dir="rtl"] .rnd-quote{border-left:none;border-right:2px solid var(--gold);padding-right:2rem;padding-left:0}
html[dir="rtl"] .thanks-modal-x{right:auto;left:.65rem}
html[dir="rtl"] .section-title em::after{left:auto;right:0;background:linear-gradient(270deg,var(--gold),transparent)}
html[dir="rtl"] .btn-primary::before{left:auto;right:-100%;background:linear-gradient(270deg,transparent,rgba(255,255,255,.13),transparent)}
html[dir="rtl"] .btn-primary:hover::before{right:100%;left:auto}
html[dir="rtl"] .about-card:hover{transform:translateX(-6px);box-shadow:4px 0 28px rgba(196,168,106,.07),-8px 14px 36px rgba(0,0,0,.42)}
html[dir="rtl"] .rnd-pillar:hover{transform:translateX(-7px);box-shadow:3px 0 18px rgba(196,168,106,.07),-8px 8px 28px rgba(0,0,0,.38)}
html[dir="rtl"] .contact-item:hover{transform:translateX(-5px)}
@media(max-width:960px){
  html[dir="rtl"] .nav-menu{transform:translateX(-100%)}
  html[dir="rtl"] .site-header.nav-menu-open .nav-menu{transform:translateX(0)}
}
/* =====================================================================
   PREMIUM UPGRADE — AL-KHAIR ENGINEERING
   ===================================================================== */

/* ── Scroll Progress Bar ───────────────────────────────────────────────*/
#scroll-progress{
  position:fixed;top:0;left:0;
  height:2px;width:0%;
  background:linear-gradient(90deg,var(--gold),var(--gold-l),var(--gold));
  z-index:9999;pointer-events:none;
  box-shadow:0 0 10px rgba(196,168,106,.6),0 0 20px rgba(196,168,106,.22);
}

/* ── Preloader ─────────────────────────────────────────────────────────*/
#preloader{
  position:fixed;inset:0;z-index:9500;
  background:var(--dark);
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  transition:opacity .7s ease .05s,visibility .7s ease .05s;
}
#preloader.loaded{opacity:0;visibility:hidden;pointer-events:none}
.preloader-inner{text-align:center}
.preloader-brand{
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(1.15rem,2.5vw,1.6rem);
  font-weight:300;color:var(--text);
  letter-spacing:.4em;text-transform:uppercase;
  opacity:0;transform:translateY(14px);
  animation:pl-up .85s ease forwards .2s;
}
.preloader-divider{
  width:0;height:1px;margin:.9rem auto;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
  animation:pl-line 1.1s cubic-bezier(.23,1,.32,1) forwards .6s;
}
.preloader-sub{
  font-size:.66rem;letter-spacing:.34em;
  text-transform:uppercase;color:var(--gold-l);
  opacity:0;animation:pl-up .65s ease forwards 1.05s;
}
/* Arabic/Rtl: Latin display fonts + wide tracking + uppercase break shaping ("مكسر"). */
html[dir="rtl"] #preloader .preloader-brand{
  font-family:'Tajawal',sans-serif;
  font-weight:500;
  letter-spacing:normal;
  text-transform:none;
  font-size:clamp(1.35rem,3.4vw,1.95rem);
  line-height:1.35;
}
html[dir="rtl"] #preloader .preloader-sub{
  font-family:'Tajawal',sans-serif;
  letter-spacing:.04em;
  text-transform:none;
  font-size:clamp(.72rem,1.85vw,.82rem);
  font-weight:400;
  line-height:1.6;
}
.preloader-dots{display:flex;gap:.5rem;justify-content:center;margin-top:2.2rem}
.preloader-dot{
  width:4px;height:4px;border-radius:50%;background:var(--gold);
  opacity:.22;animation:pl-dot 1.5s ease-in-out infinite;
}
.preloader-dot:nth-child(2){animation-delay:.22s}
.preloader-dot:nth-child(3){animation-delay:.44s}
@keyframes pl-up{to{opacity:1;transform:translateY(0)}}
@keyframes pl-line{to{width:min(240px,38vw)}}
@keyframes pl-dot{0%,100%{opacity:.18}50%{opacity:1;transform:scaleY(1.9)}}

/* ── Page Transition Overlay ───────────────────────────────────────────*/
#page-transition{
  position:fixed;inset:0;z-index:9000;
  background:var(--dark);
  transform:translateX(100%);
  pointer-events:none;
  will-change:transform;
}
#page-transition.pt-enter{
  pointer-events:auto;
  transition:transform .5s cubic-bezier(.86,0,.07,1);
  transform:translateX(0);
}
#page-transition.pt-leave{
  transition:transform .52s cubic-bezier(.86,0,.07,1);
  transform:translateX(-100%);
}

/* ── Scroll to Top ─────────────────────────────────────────────────────*/
#scroll-top{
  position:fixed;bottom:2rem;right:2rem;z-index:300;
  width:44px;height:44px;
  border:1px solid var(--border2);border-radius:2px;
  background:rgba(11,13,19,.9);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  color:var(--gold-l);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  opacity:0;transform:translateY(12px);
  transition:opacity .32s,transform .32s,border-color .25s,background .25s,box-shadow .25s;
  border:none;outline:none;
  border:1px solid var(--border2);
}
#scroll-top.stt-visible{opacity:1;transform:translateY(0)}
#scroll-top:hover{
  border-color:var(--gold);background:rgba(196,168,106,.11);
  box-shadow:0 8px 24px rgba(0,0,0,.35),0 0 14px rgba(196,168,106,.14);
}
#scroll-top:focus-visible{outline:2px solid var(--gold-l);outline-offset:3px}
@media(max-width:600px){#scroll-top{bottom:1.25rem;right:1rem}}

/* ── Enhanced Footer ───────────────────────────────────────────────────*/
footer.site-footer{
  padding:5rem 3.5rem 0;
  background:rgba(6,8,14,0.98) !important;
  backdrop-filter:blur(28px);-webkit-backdrop-filter:blur(28px);
  border-top:1px solid rgba(196,168,106,.14) !important;
  position:relative;z-index:2;overflow:hidden;
}
footer.site-footer::before{
  content:'';position:absolute;top:0;left:8%;right:8%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(196,168,106,.5),transparent);
}
.footer-grid{
  display:grid;
  grid-template-columns:1.55fr 1fr 1fr 1.35fr;
  gap:3rem 4rem;padding-bottom:3.5rem;
}
.footer-brand-logo{
  font-family:'Cormorant Garamond',serif;
  font-size:1.25rem;font-weight:600;
  color:var(--gold-l);letter-spacing:.08em;
  display:block;margin-bottom:.38rem;text-decoration:none;
}
.footer-brand-logo:hover{opacity:.85}
.footer-tagline{
  font-size:.88rem;color:var(--muted);
  line-height:1.72;max-width:230px;margin-bottom:1.5rem;
}
.footer-cert-badges{display:flex;gap:.5rem;flex-wrap:wrap}
.footer-cert-badge{
  padding:.3rem .8rem;
  border:1px solid rgba(196,168,106,.2);border-radius:2px;
  font-size:.65rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);
}
.footer-col-label{
  font-size:.7rem;letter-spacing:.25em;text-transform:uppercase;
  color:var(--gold-l);font-weight:500;margin-bottom:1.25rem;display:block;
}
.footer-links-list{list-style:none;display:flex;flex-direction:column;gap:.68rem}
.footer-links-list a{
  font-size:.9rem;color:var(--muted);text-decoration:none;
  display:flex;align-items:center;gap:.5rem;
  transition:color .22s,gap .22s;
}
.footer-links-list a::before{
  content:'';width:0;height:1px;background:var(--gold);
  flex-shrink:0;transition:width .22s;
}
.footer-links-list a:hover{color:var(--gold-l);gap:.8rem}
.footer-links-list a:hover::before{width:12px}
.footer-contact-list{display:flex;flex-direction:column;gap:.95rem}
.footer-ci{display:flex;align-items:flex-start;gap:.75rem}
.footer-ci-icon{
  width:28px;height:28px;border:1px solid var(--border);border-radius:50%;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px;
}
.footer-ci-icon svg{width:11px;height:11px;stroke:var(--gold);fill:none;stroke-width:1.5}
.footer-ci-text{font-size:.9rem;color:var(--muted);line-height:1.55}
.footer-ci-text a{color:var(--gold-l);text-decoration:none;transition:opacity .22s}
.footer-ci-text a:hover{opacity:.8}
.footer-bottom{
  border-top:1px solid var(--border);padding:1.65rem 0;
  display:flex;justify-content:space-between;align-items:center;
  flex-wrap:wrap;gap:1rem;
}
.footer-copy-txt{font-size:.78rem;color:var(--dim);letter-spacing:.06em}
.footer-bottom-right{display:flex;gap:1.5rem;align-items:center}
.footer-bottom-right a{
  font-size:.78rem;color:var(--dim);text-decoration:none;
  letter-spacing:.08em;transition:color .22s;
}
.footer-bottom-right a:hover{color:var(--gold-l)}
@media(max-width:1080px){
  .footer-grid{grid-template-columns:1fr 1fr;gap:2.5rem 3rem}
}
@media(max-width:640px){
  footer.site-footer{padding:3rem 1.5rem 0}
  .footer-grid{grid-template-columns:1fr;gap:2rem}
  .footer-bottom{flex-direction:column;align-items:flex-start}
}
html[dir="rtl"] .footer-links-list a{flex-direction:row-reverse}
html[dir="rtl"] .footer-links-list a::before{order:2}

/* ── Performance Bars (Technology page) ───────────────────────────────*/
.perf-section{margin-top:3rem}
.perf-section-label{
  font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--gold-l);margin-bottom:1.5rem;display:block;
}
.perf-bars{display:flex;flex-direction:column;gap:1.3rem}
.perf-bar-row{display:flex;flex-direction:column;gap:.48rem}
.perf-bar-meta{display:flex;justify-content:space-between;align-items:baseline}
.perf-bar-name{font-size:.84rem;color:var(--prose)}
.perf-bar-pct{font-family:'Cormorant Garamond',serif;font-size:1.1rem;color:var(--gold-l)}
.perf-bar-track{
  height:2px;background:rgba(196,168,106,.1);
  border-radius:2px;overflow:hidden;
}
.perf-bar-fill{
  height:100%;
  background:linear-gradient(90deg,var(--gold),var(--gold-l));
  box-shadow:0 0 8px rgba(196,168,106,.45);
  border-radius:2px;width:0%;
  transition:width 1.4s cubic-bezier(.23,1,.32,1);
}

/* ── Product Filter Tabs ───────────────────────────────────────────────*/
.products-filter{display:flex;gap:.6rem;flex-wrap:wrap;margin-bottom:2.5rem}
.filter-tab{
  padding:.45rem 1.15rem;
  border:1px solid var(--border);border-radius:2px;
  background:transparent;color:var(--muted);
  font-size:.78rem;font-family:'DM Sans',sans-serif;
  letter-spacing:.1em;text-transform:uppercase;
  cursor:pointer;transition:all .25s;white-space:nowrap;
}
.filter-tab:hover,.filter-tab.active{border-color:var(--gold);color:var(--gold-l);background:rgba(196,168,106,.07)}
.filter-tab.active{background:rgba(196,168,106,.11)}
.product-card.filter-hidden{display:none}

/* ── Nav active indicator line ─────────────────────────────────────────*/
.nav-links a.nav-active{position:relative}
.nav-links a.nav-active::after{
  content:'';
  position:absolute;bottom:-1px;left:0;right:0;height:1px;
  background:var(--gold);
}

/* ── Reduced motion guards ─────────────────────────────────────────────*/
@media(prefers-reduced-motion:reduce){
  #preloader{display:none !important}
  #page-transition{display:none !important}
  #scroll-progress{transition:none}
  .perf-bar-fill{transition-duration:.01ms}
  .preloader-brand,.preloader-sub{animation:none;opacity:1;transform:none}
  .preloader-divider{animation:none;width:min(240px,38vw)}
}