/*
 * CASi / BLACK & GOLD · ATELIER FINISH
 * A restrained metallic-material pass layered over the existing corporate site.
 * No external resources. Motion is optional and respects reduced-motion.
 */
:root {
  --gold-ink: #f7e9bc;
  --gold-light: #fff3cd;
  --gold-flare: #ffe6a4;
  --gold-mid: #d5a64f;
  --gold-deep: #7d531c;
  --gold-edge: rgba(247, 210, 134, .35);
  --gold-warm-shadow: rgba(196, 131, 29, .16);
}

/* Jet black surfaces; warm metal is reserved for highlights. */
body {
  background:
    radial-gradient(ellipse 61% 25% at 76% 8%, rgba(108, 67, 17, .085), transparent 76%),
    radial-gradient(ellipse 42% 16% at 13% 58%, rgba(119, 80, 26, .055), transparent 79%),
    #060606;
}
.site-header:not(.is-scrolled) {
  background: linear-gradient(180deg, rgba(8, 7, 6, .72), rgba(8, 7, 6, .10));
}
.site-header.is-scrolled {
  background: rgba(6, 6, 6, .89);
  border-color: rgba(248, 212, 139, .19);
  box-shadow: 0 19px 45px rgba(0, 0, 0, .51), inset 0 -1px rgba(255, 233, 184, .028);
}
.logo-word { text-shadow: 0 1px 0 rgba(255, 255, 255, .06); }
.logo-i {
  background: linear-gradient(130deg,#fffaf0 1%,#fff1be 21%,#af7824 47%,#f7e4ab 59%,#a36d20 74%,#fbe5ad 94%);
  -webkit-background-clip: text; background-clip:text;
  -webkit-text-fill-color:transparent;
}
.nav-cta {
  position:relative;
  background:linear-gradient(140deg,rgba(27,22,13,.78),rgba(10,9,7,.92));
  box-shadow: inset 0 1px rgba(255, 233, 185, .14), 0 7px 18px rgba(0,0,0,.24);
  overflow:hidden;
}
.nav-cta::before {
  content:"";position:absolute;inset:0;
  background:linear-gradient(112deg,transparent 25%,rgba(255,241,195,.10) 47%,transparent 65%);
  transform:translateX(-125%);transition:transform .8s ease;pointer-events:none;
}
.nav-cta:hover::before {transform:translateX(125%)}

/* Hero / studio-lit, light follows the cursor only on hover devices. */
.hero {
  --light-x: 73%;--light-y: 48%;--drift-x: 0px;--drift-y: 0px;
  background:
    radial-gradient(ellipse at 72% 47%,rgba(100,64,17,.24),rgba(23,16,8,.45) 28%,transparent 66%),
    radial-gradient(ellipse at 75% 68%,rgba(101,61,14,.15),transparent 52%),
    #060606;
}
.hero::before {
  content:"";
  pointer-events:none;
  position:absolute;inset:0;z-index:0;
  background:radial-gradient(ellipse 34% 34% at var(--light-x) var(--light-y),rgba(222,160,60,.12),transparent 75%);
  opacity:.86;transition:opacity .4s;
}
.hero::after {
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 78%,rgba(0,0,0,.5));
}
.hero-grid {opacity:.33;background-size:95px 95px;}
.hero-fog {background:radial-gradient(circle at 62% 47%,rgba(183,123,29,.17),transparent 60%);}
.hero-copy {position:relative;z-index:3;}
.hero-art {z-index:2;}
.hero-eyebrow {text-shadow:0 0 24px rgba(198,153,64,.17)}
.hero h1 {text-shadow:0 11px 36px rgba(0,0,0,.37);}

/* Five highlight zones yield metal, not a flat yellow-to-orange gradient. */
.hero .gradient-type {
  background-image:
    repeating-linear-gradient(0deg,transparent 0,rgba(44,29,9,.058) .7px,transparent 1.35px,transparent 3.3px),
    linear-gradient(104deg,
      #fff9e9 0%,#fff1c3 12%,#b9842c 23%,#f9e3a5 33%,
      #fff9e2 43%,#9b641a 52%,#e2b665 62%,#fff2c6 71%,
      #b27d29 82%,#ffecc0 92%,#f1d58e 100%);
  background-size:100% 100%,220% 100%;
  background-position:0 0,13% 0;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  animation:gold-foil-sweep 11s ease-in-out infinite;
  filter:drop-shadow(0 2px 2px rgba(101,61,8,.18));
}
.gradient-type-alt {
  background-image:linear-gradient(112deg,#fff2d0 4%,#bd8d39 31%,#fbe8b5 49%,#a97728 68%,#f7df9f 98%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.hero-description {color:#c8c4bb;max-width:615px;}
.hero-description::selection {color:#100b05;background:#edc979;}

/* CTA / hand-polished gold with a highly controlled specular pass. */
.button-main {
  position:relative;isolation:isolate;overflow:hidden;
  border:1px solid rgba(255,243,202,.83);
  background:linear-gradient(112deg,#fff4d5 0%,#d5a64d 24%,#f6d88b 39%,#a57124 56%,#f8e5b6 70%,#c08b39 87%,#f6d994 100%);
  box-shadow:inset 0 1px 0 rgba(255,253,232,.85),inset 0 -1px 0 rgba(78,48,8,.48),0 12px 32px rgba(162,107,25,.20),0 1px 22px rgba(255,221,147,.08);
}
.button-main::before {
  content:"";z-index:0;position:absolute;inset:-80% auto -80% -50%;width:27%;
  background:linear-gradient(90deg,transparent,rgba(255,255,237,.52),transparent);
  transform:skewX(-19deg) translateX(-340%);
  animation:button-polish 8.5s ease-in-out infinite;
  pointer-events:none;
}
.button-main > * {position:relative;z-index:1}
.button-symbol {box-shadow:inset 0 1px rgba(255,225,150,.11);}
.button-main:hover {
  box-shadow:inset 0 1px #fff9e0,0 17px 54px rgba(214,157,50,.40),0 0 20px rgba(240,203,110,.15);
}
.button-text:hover {color:#ffe7ab}
.hero-meta {border-top:1px solid rgba(230,186,98,.10);padding-top:23px;max-width:536px;}

/* Kinetic assembly / jewelled, layered and softly illuminated. */
.hero-art {translate:var(--drift-x) var(--drift-y);transition:translate .65s cubic-bezier(.22,1,.36,1);}
.art-aura {
  background:radial-gradient(circle,rgba(237,174,68,.31) 0%,rgba(174,111,27,.13) 25%,rgba(130,86,26,.08) 47%,transparent 72%);
  filter:blur(23px);
}
.orbit-outer {
  border:1px solid rgba(234,195,110,.45);
  background:
    repeating-conic-gradient(from -7deg,rgba(255,234,176,.12) 0deg,transparent .7deg,transparent 10deg),
    conic-gradient(from 11deg,
       rgba(252,228,170,.35),transparent 9%,rgba(179,115,27,.12) 16%,
       transparent 26%,rgba(254,237,192,.25) 34%,transparent 46%,
       rgba(231,170,69,.16) 56%,transparent 65%,rgba(255,234,185,.27) 75%,
       transparent 87%,rgba(211,145,49,.16) 96%,rgba(252,228,170,.35));
  box-shadow:inset 0 0 0 1px rgba(250,224,170,.10),inset 0 0 51px rgba(226,166,61,.06),0 0 0 1px rgba(136,90,25,.13),0 0 36px rgba(229,166,56,.11);
}
.orbit-outer::before {inset:8px;border:1px dashed rgba(252,220,151,.23);}
.orbit-outer::after {inset:32px;border:1px solid rgba(252,217,146,.19);box-shadow:inset 0 0 18px rgba(233,170,60,.10);}
.orbit-mid {border-width:2px;border-left-color:rgba(255,239,194,.89);border-bottom-color:rgba(175,119,38,.74);filter:drop-shadow(0 0 9px rgba(250,213,131,.22));}
.orbit-inner {border-color:rgba(250,219,159,.38);box-shadow:inset 0 0 70px rgba(200,142,53,.06),0 0 60px rgba(215,161,66,.11)}
.art-core {
  background:
    radial-gradient(ellipse 55% 48% at 30% 12%,rgba(252,211,118,.23),transparent 81%),
    radial-gradient(circle at 50% 75%,#1a140b 0%,#0a0907 60%,#040404 92%);
  border:1px solid #bb8c47;
  box-shadow:
    inset 0 2px 3px rgba(255,246,209,.41),
    inset 0 0 2px rgba(0,0,0,.75),
    inset 0 -21px 40px rgba(0,0,0,.7),
    0 0 0 1px rgba(255,236,175,.23),
    0 0 0 7px rgba(105,71,23,.22),
    0 0 0 11px rgba(242,187,86,.075),
    0 22px 66px rgba(0,0,0,.83),
    0 0 88px rgba(208,141,34,.23);
}
.art-core::before {
  content:"";position:absolute;inset:-1px;border-radius:50%;
  background:conic-gradient(from 21deg,
    #fff1c7 0%,#7e541f 7%,#daa84d 18%,#ffecb8 27%,#74501d 37%,
    #e4ba70 49%,#8d5d19 62%,#fff6da 74%,#a16b25 83%,#f5d890 95%,#fff1c7 100%);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 5px),#000 calc(100% - 3px));
  mask:radial-gradient(farthest-side,transparent calc(100% - 5px),#000 calc(100% - 3px));
  animation:metal-rim 21s linear infinite;
  opacity:.84;
}
.art-core::after {
  content:"";position:absolute;pointer-events:none;border-radius:50%;inset:5px;
  background:linear-gradient(127deg,rgba(255,246,199,.13),transparent 29%,transparent 69%,rgba(215,159,63,.055)),
  radial-gradient(circle at 32% 17%,rgba(255,230,162,.20),transparent 43%);
  mix-blend-mode:screen;
}
.core-word {
  position:relative;z-index:2;
  background-image:linear-gradient(160deg,#fffdf0 0%,#f8e4b4 19%,#9e6d27 37%,#ffebae 50%,#b17b32 62%,#fff1c9 80%,#ba893c 94%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 2px 0 rgba(255,240,181,.16)) drop-shadow(0 12px 12px rgba(0,0,0,.78));
}
.core-caption {position:relative;z-index:2;}
.core-shine {animation:core-pulse 7s ease-in-out infinite;}
.art-data {
  background:linear-gradient(136deg,rgba(35,27,16,.92),rgba(12,11,9,.84) 48%,rgba(23,18,12,.96));
  border-color:rgba(231,192,112,.32);
  box-shadow:inset 0 1px rgba(255,230,162,.20),inset 0 -1px rgba(128,84,26,.20),0 19px 43px rgba(0,0,0,.56),0 0 18px rgba(220,162,54,.045);
}
.art-data::before {
  content:"";position:absolute;inset:1px;border-radius:inherit;pointer-events:none;
  background:linear-gradient(119deg,rgba(253,236,177,.10),transparent 33%,transparent 71%,rgba(241,200,132,.035));
}
.art-data b {color:#f0d48e}

/* Portfolio / a little glint at edges, not a casino UI. */
.product-card {
  border-color:rgba(223,177,99,.22);
  box-shadow:inset 0 1px rgba(255,235,188,.075),0 19px 40px rgba(0,0,0,.17);
}
.product-card::before {
  content:"";position:absolute;pointer-events:none;inset:0;z-index:0;
  border-radius:inherit;
  background:radial-gradient(460px circle at var(--card-x,77%) var(--card-y,18%),rgba(246,197,97,.14),transparent 64%);
  opacity:.34;transition:opacity .4s ease;
}
.product-card::after {
  content:"";position:absolute;inset:1px;pointer-events:none;border-radius:inherit;z-index:0;
  box-shadow:inset 0 1px rgba(255,241,206,.09),inset 0 -1px rgba(204,154,75,.04);
}
.product-card:hover::before {opacity:1}
.product-card:hover {border-color:rgba(240,202,127,.55);box-shadow:inset 0 1px rgba(255,242,197,.12),0 24px 70px rgba(0,0,0,.52),0 0 35px rgba(188,129,44,.075);transform:translateY(-3px)}
.product-card > * {z-index:1}
.product-safety {background:radial-gradient(circle at 84% 73%,#342310 0%,#15110c 54%,#0c0b09 100%)}
.product-voice {background:radial-gradient(circle at 82% 73%,#392810 0%,#15110c 54%,#0c0b09 100%)}
.product-sentinel,.product-identity,.product-anticheat {background:linear-gradient(143deg,#18140e,#0c0c0b 83%)}
.section-header {border-bottom-color:rgba(229,185,104,.11)}
.metric-bar {border-top-color:rgba(238,195,106,.27);border-bottom-color:rgba(238,195,106,.27)}
.service-row {border-bottom-color:rgba(239,194,105,.16)}
.sector-solutions {border-color:rgba(239,194,105,.28);box-shadow:inset 0 1px rgba(255,234,188,.10)}
.person-art {filter:saturate(.88);}
.person-art::after {
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(135deg,rgba(255,229,158,.075),transparent 36%,transparent 72%,rgba(255,217,133,.055));
}
.person-card {border-color:rgba(221,177,89,.19)}
.contact-section {background:radial-gradient(ellipse at 66% 30%,#2d1e0c 0%,#100d09 37%,#070707 76%)}
.contact-panel {background:linear-gradient(133deg,rgba(62,46,21,.82),rgba(25,19,11,.83) 58%,rgba(33,26,15,.86));border-color:rgba(240,207,132,.35);box-shadow:inset 0 1px rgba(255,236,181,.2),0 29px 90px rgba(0,0,0,.39),0 0 42px rgba(175,108,26,.05)}
.contact-big-link {text-shadow:0 1px 9px rgba(243,210,143,.12)}

@keyframes gold-foil-sweep {
  0%,14%,88%,100%{background-position:0 0,13% 0}
  47%{background-position:0 0,94% 0}
}
@keyframes button-polish {
  0%,19% {transform:skewX(-19deg) translateX(-340%)}
  34%,100% {transform:skewX(-19deg) translateX(770%)}
}
@keyframes metal-rim { to {transform:rotate(360deg)} }
@keyframes core-pulse {0%,100%{opacity:.73}50%{opacity:1}}

/* Mobile: the product message remains legible and the golden atmosphere stays restrained. */
@media(max-width:980px){
  .hero-art{translate:none}
  .hero::before{opacity:.45}
}
@media(max-width:680px){
  .hero{background:radial-gradient(ellipse at 115% 58%,#2f1e0c 0%,#0f0c08 29%,#060606 72%)}
  .hero .gradient-type{animation:none;background-position:0 0,45% 0}
  .hero-art{opacity:.21;filter:blur(.1px)}
  .hero-meta{padding-top:17px;margin-top:55px}
  .product-card:hover{transform:none}
  .contact-section{background:radial-gradient(ellipse at 72% 55%,#23180a,#080808 67%)}
}
@media(prefers-reduced-motion:reduce){
  .hero .gradient-type,.button-main::before,.art-core::before,.core-shine{animation:none!important}
  .hero-art{translate:none!important;transition:none!important}
  .nav-cta::before{transition:none!important}
}

/* Preserve comfortable button sizing on narrow phones. */
@media(max-width:385px){
  .hero-actions{flex-wrap:wrap;gap:18px}
  .button-main,.button-text{flex-shrink:0}
  .button-main .button-symbol{flex-shrink:0}
  .hero-meta{margin-top:41px}
  .hero-layout{min-height:770px}
}