@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Outfit:wght@500;600;700&display=swap');

:root{
  --bg:#050914;
  --bg2:#07101f;
  --panel:#0a1425;
  --line:rgba(255,255,255,.09);
  --text:#f7f9ff;
  --muted:#8e9bb0;
  --blue:#159cff;
  --cyan:#20e0ff;
  --gold:#f4ba50;
  --radius:24px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:
    radial-gradient(circle at 72% 12%,rgba(16,105,208,.13),transparent 29%),
    var(--bg);
  color:var(--text);
  font-family:Manrope,Arial,sans-serif;
  overflow-x:hidden;
}
a{text-decoration:none;color:inherit}
button,input,select,textarea{font:inherit}
.shell{width:min(1180px,calc(100% - 48px));margin:auto}
.ambient{position:fixed;border-radius:50%;filter:blur(120px);pointer-events:none;opacity:.16;z-index:-1}
.ambient-one{width:450px;height:450px;background:#087cff;right:-180px;top:150px}
.ambient-two{width:340px;height:340px;background:#df9a24;left:-230px;top:650px}

.header{
  position:fixed;top:0;left:0;right:0;z-index:50;
  background:rgba(5,9,20,.72);
  border-bottom:1px solid transparent;
  backdrop-filter:blur(18px);
  transition:.3s;
}
.header.scrolled{border-color:var(--line);background:rgba(5,9,20,.93)}
.nav{height:82px;display:flex;align-items:center;gap:38px}
.brand{display:flex;align-items:center;gap:11px;font-family:Outfit;font-weight:700;font-size:19px;white-space:nowrap}
.brand b{color:var(--gold)}
.brand-mark{position:relative;width:29px;height:33px;display:block;transform:rotate(-7deg)}
.brand-mark i{position:absolute;width:12px;height:27px;border-radius:5px;transform:rotate(42deg)}
.brand-mark i:first-child{left:4px;top:0;background:linear-gradient(#20e0ff,#148cff)}
.brand-mark i:last-child{right:3px;bottom:0;background:linear-gradient(#159cff,#1260e9)}
nav{display:flex;align-items:center;gap:30px;margin-left:auto}
nav a{font-size:13px;font-weight:600;color:#aab5c6;position:relative;transition:.25s}
nav a:hover,nav a.active{color:#fff}
nav a:after{content:"";position:absolute;height:2px;left:0;right:100%;bottom:-10px;background:var(--cyan);transition:.25s}
nav a.active:after{right:0}
.nav-cta,.button.primary{
  background:linear-gradient(110deg,#176dff,#1ad9f5);
  color:white;border-radius:10px;font-weight:800;
  box-shadow:0 12px 35px rgba(20,143,255,.22);
}
.nav-cta{padding:12px 17px;font-size:12px}
.nav-cta span,.button span,.service-card a span{margin-left:8px}
.menu{display:none;background:none;border:0;padding:5px}
.menu span{display:block;width:24px;height:2px;background:white;margin:5px}

.hero{
  min-height:790px;padding-top:150px;
  display:grid;grid-template-columns:.9fr 1.1fr;
  align-items:center;gap:50px;
}
.eyebrow{
  color:#5cc8ff;font-size:11px;font-weight:800;
  letter-spacing:2px;display:flex;align-items:center;gap:9px;
}
.eyebrow span{width:23px;height:1px;background:var(--cyan)}
.hero h1,.section-heading h2,.contact-copy h2{
  font-family:Outfit,sans-serif;
  letter-spacing:-2.4px;line-height:.99;margin:21px 0;
}
.hero h1{font-size:clamp(54px,5.4vw,79px);max-width:650px}
.hero h1 span,.section-heading em,.contact-copy em{
  font-style:normal;
  background:linear-gradient(100deg,#159cff,#2ce3f5);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero-text{color:var(--muted);line-height:1.8;max-width:560px;font-size:15px}
.hero-actions{display:flex;gap:12px;margin-top:31px}
.button{padding:15px 22px;border-radius:11px;font-size:13px;font-weight:800}
.button.secondary{border:1px solid var(--line);background:rgba(255,255,255,.025)}
.trust-row{display:flex;gap:35px;margin-top:50px}
.trust-row div{display:flex;flex-direction:column}
.trust-row strong{font-family:Outfit;font-size:15px}
.trust-row small{color:#65748a;font-size:10px;margin-top:4px}

.hero-visual{position:relative;min-height:520px;display:flex;align-items:center}
.visual-glow{
  position:absolute;width:420px;height:420px;border-radius:50%;
  background:#087fff;filter:blur(110px);opacity:.18;left:20%;top:10%;
}
.dashboard{
  width:100%;aspect-ratio:1.18;border-radius:22px;
  border:1px solid rgba(90,190,255,.22);
  background:linear-gradient(145deg,#0b172b,#07101d 70%);
  box-shadow:0 50px 100px rgba(0,0,0,.48),inset 0 1px rgba(255,255,255,.08);
  transform:perspective(1100px) rotateY(-5deg) rotateX(2deg);
  overflow:hidden;position:relative;
}
.dash-top{height:13%;display:flex;align-items:center;padding:0 6%;border-bottom:1px solid var(--line)}
.dash-logo{width:55px;height:7px;background:linear-gradient(90deg,#1acaff,#166fff);border-radius:5px}
.dash-nav{display:flex;gap:13px;margin:auto}
.dash-nav i{width:30px;height:3px;background:#2a3548;border-radius:5px}
.dash-button{width:52px;height:18px;border-radius:8px;background:linear-gradient(90deg,#1679ff,#21dcf3)}
.dash-content{height:66%;display:grid;grid-template-columns:1fr 1fr;padding:8%}
.dash-copy{display:flex;flex-direction:column;gap:13px;justify-content:center}
.mini-label{width:70px;height:7px;border-radius:5px;background:#0c8fd8}
.line{height:12px;border-radius:4px;background:#e8f5ff}
.line-lg{width:92%}.line-md{width:73%}.line-sm{width:55%;height:5px;background:#536278}
.mini-buttons{display:flex;gap:8px;margin-top:10px}
.mini-buttons i{width:70px;height:25px;border-radius:8px;background:#1489ff}
.mini-buttons i:last-child{background:transparent;border:1px solid #31445f}
.dash-art{position:relative}
.orb{position:absolute;width:170px;height:170px;border-radius:50%;right:8%;top:14%;background:radial-gradient(circle at 35% 30%,#5fe8ff,#1164db 40%,#07142d 72%);box-shadow:0 0 60px #126bff55}
.glass-card{position:absolute;border:1px solid #ffffff1f;background:#0a1832cc;backdrop-filter:blur(10px);border-radius:12px;padding:12px;box-shadow:0 20px 35px #0008}
.glass-one{width:115px;height:70px;left:0;bottom:15%}
.glass-two{width:100px;height:65px;right:-2%;bottom:2%}
.glass-card span,.glass-card b,.glass-card i{display:block;background:#31435e;border-radius:4px;margin-bottom:7px}
.glass-card span{width:30px;height:7px;background:#20cce7}
.glass-card b{width:80%;height:5px}.glass-card i{width:55%;height:4px}
.dash-stats{height:21%;border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(3,1fr);padding:3% 7%;gap:20px}
.dash-stats div{border-right:1px solid var(--line);display:flex;flex-direction:column;gap:8px;justify-content:center}
.dash-stats div:last-child{border:0}
.dash-stats b{width:35%;height:9px;background:#f1f7ff;border-radius:5px}
.dash-stats span{width:60%;height:4px;background:#344157;border-radius:5px}
.float-card{
  position:absolute;background:#09172bdb;border:1px solid #ffffff16;
  box-shadow:0 20px 50px #0009;backdrop-filter:blur(12px);
  padding:12px 15px;border-radius:12px;display:flex;gap:10px;align-items:center;
}
.float-card small,.float-card strong{display:block}.float-card small{font-size:8px;color:#8090a8}.float-card strong{font-size:11px;margin-top:3px}
.float-icon{width:27px;height:27px;border-radius:8px;background:#0e7df2;display:grid;place-items:center}
.fc-one{left:-25px;top:18%}.fc-two{right:-15px;bottom:12%}
.fc-two .float-icon{background:#a16a16}

.logo-strip{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#060c17}
.logo-inner{min-height:95px;display:flex;align-items:center;justify-content:space-between;gap:25px}
.logo-inner span{font-size:9px;color:#58657a;letter-spacing:2px}
.logo-inner b{font-family:Outfit;font-size:13px;letter-spacing:1px;color:#69778c}

.section{padding-top:125px;padding-bottom:125px}
.section-heading h2,.contact-copy h2{font-size:clamp(43px,4.5vw,64px)}
.section-heading p{max-width:570px;color:var(--muted);line-height:1.8}
.section-heading.centered{text-align:center;max-width:720px;margin:0 auto 60px}
.section-heading.centered .eyebrow{justify-content:center}
.section-heading.centered p{margin-left:auto;margin-right:auto}

.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;margin-top:65px}
.office-stage{
  min-height:470px;border:1px solid var(--line);border-radius:var(--radius);
  position:relative;overflow:hidden;
  background:linear-gradient(145deg,#0c1b30,#07101e);
}
.office-window{position:absolute;inset:0;background:linear-gradient(125deg,transparent 35%,#1264c51d 35%,#1264c51d 50%,transparent 50%)}
.screen-card{
  position:absolute;width:70%;height:58%;left:15%;top:20%;
  background:#08101e;border:1px solid #ffffff19;border-radius:15px;
  padding:8%;box-shadow:0 35px 60px #000a;transform:rotate(-3deg);
}
.screen-head{width:40%;height:9px;background:#178af5;border-radius:5px}
.screen-chart{height:55%;display:flex;align-items:end;gap:7%;margin-top:10%}
.screen-chart i{width:11%;height:40%;background:#15314e;border-radius:5px 5px 0 0}
.screen-chart i:nth-child(2){height:65%}.screen-chart i:nth-child(3){height:48%;background:#157df0}.screen-chart i:nth-child(4){height:82%;background:#20cce7}.screen-chart i:nth-child(5){height:68%}
.screen-lines{display:flex;gap:8px}.screen-lines span{height:5px;background:#2a3b50;width:30%;border-radius:4px}
.gold-ring{position:absolute;width:180px;height:180px;border:1px solid #e4a63566;border-radius:50%;right:-55px;bottom:-60px;box-shadow:0 0 60px #d9951b1f}
.about-copy h3{font-family:Outfit;font-size:31px;margin-top:0}
.about-copy>p{color:var(--muted);line-height:1.8}
.feature-list{margin:32px 0}
.feature-list>div{display:flex;gap:17px;padding:16px 0;border-bottom:1px solid var(--line)}
.feature-list span{color:var(--gold);font-size:10px;font-weight:800;padding-top:3px}
.feature-list p{margin:0;color:#79889d;font-size:12px;line-height:1.55}
.feature-list b{display:block;color:#f2f6fd;font-size:13px;margin-bottom:3px}
.text-link{font-size:12px;font-weight:800;color:#56c8ff}.text-link span{margin-left:8px}

.services-section{background:linear-gradient(180deg,#07101d,#050914);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}
.service-card{
  min-height:275px;border:1px solid var(--line);border-radius:18px;padding:30px;
  background:linear-gradient(145deg,#0a1423,#07101c);position:relative;
  transition:.35s;
}
.service-card:hover{transform:translateY(-7px);border-color:#1e9fff55;box-shadow:0 25px 50px #0005}
.service-card.featured{background:linear-gradient(145deg,#0b1c35,#081326);border-color:#1888ed55}
.service-icon{width:43px;height:43px;border-radius:12px;background:#0d2542;border:1px solid #167ed855;color:#52caff;display:grid;place-items:center;font-size:19px}
.service-num{position:absolute;right:26px;top:28px;font-size:9px;color:#506079}
.service-card h3{font-family:Outfit;font-size:20px;margin-top:31px}
.service-card p{color:#8190a5;font-size:12px;line-height:1.7;min-height:61px}
.service-card a{font-size:11px;font-weight:800;color:#56c8ff}

.portfolio-head{display:flex;align-items:end;justify-content:space-between;gap:60px;margin-bottom:55px}
.portfolio-head>p{max-width:390px;color:var(--muted);font-size:13px;line-height:1.8}
.projects{display:grid;grid-template-columns:1fr 1fr;gap:25px}
.project-large{grid-column:1/-1}
.project-preview{border-radius:20px;min-height:340px;padding:6%;overflow:hidden;position:relative}
.project-large .project-preview{min-height:500px}
.preview-blue{background:radial-gradient(circle at 70% 30%,#1373d6,#091b32 50%,#07101c)}
.preview-gold{background:radial-gradient(circle at 70% 20%,#93611e,#24180d 45%,#0c0c0c)}
.preview-purple{background:radial-gradient(circle at 70% 20%,#7136a4,#21132e 45%,#0c0b14)}
.browser{width:90%;height:90%;position:absolute;left:5%;top:10%;background:#f7f8fb;border-radius:12px 12px 0 0;box-shadow:0 30px 70px #0009;overflow:hidden}
.project:not(.project-large) .browser{width:86%;left:7%;top:15%}
.browser-top{height:8%;background:#0a1220;display:flex;align-items:center;gap:5px;padding-left:12px}
.browser-top i{width:5px;height:5px;border-radius:50%;background:#526072}
.browser-body{height:92%;background:#071527;padding:5%}
.mock-nav{display:block;width:100%;height:6%;border-bottom:1px solid #ffffff18}
.mock-hero{height:58%;display:grid;grid-template-columns:1fr 1fr;align-items:center}
.mock-hero div{display:flex;flex-direction:column;gap:7px}
.mock-hero b{display:block;width:80%;height:9px;background:#e8f4ff;border-radius:3px}
.mock-hero b:nth-child(2){width:60%;background:#1ba8ff}
.mock-hero b:nth-child(3){width:45%;height:4px;background:#43546c}
.mock-hero i{width:60px;height:18px;background:#1689fa;border-radius:5px;margin-top:7px}
.mock-shape{width:80%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 35% 30%,#54e3ff,#126bd5 50%,#071c3d)}
.mock-boxes{height:28%;display:grid;grid-template-columns:repeat(3,1fr);gap:4%}
.mock-boxes i{background:#0b213b;border:1px solid #ffffff0e;border-radius:6px}
.alt{background:#15100b}.alt .mock-shape{background:radial-gradient(circle at 35% 30%,#f6c467,#9b5f16 55%,#261406)}
.alt .mock-hero b:nth-child(2){background:#dda53e}
.alt-two{background:#130d1d}.alt-two .mock-shape{background:radial-gradient(circle at 35% 30%,#d78aff,#7b35bd 55%,#251037)}
.alt-two .mock-hero b:nth-child(2){background:#a854e7}
.project-info{display:flex;align-items:center;justify-content:space-between;padding:18px 3px 15px}
.project-info span{font-size:8px;letter-spacing:1.5px;color:#6f8097}
.project-info h3{font-family:Outfit;margin:5px 0;font-size:20px}
.project-info>a{width:39px;height:39px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;color:#5dcfff}

.process{padding:115px 0;background:#07101d;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.process-grid{display:grid;grid-template-columns:repeat(4,1fr);margin-top:55px}
.process-grid>div{padding:28px;border-left:1px solid var(--line)}
.process-grid>div:last-child{border-right:1px solid var(--line)}
.process-grid span{font-size:10px;color:var(--gold);font-weight:800}
.process-grid h3{font-family:Outfit;font-size:19px;margin-top:35px}
.process-grid p{color:#77879d;font-size:11px;line-height:1.7}

.contact-wrap{
  border:1px solid var(--line);border-radius:28px;padding:65px;
  background:radial-gradient(circle at 0 100%,#0b3760 0,transparent 35%),#08111f;
  display:grid;grid-template-columns:.9fr 1.1fr;gap:70px;
}
.contact-copy p{color:var(--muted);line-height:1.8;font-size:13px;max-width:450px}
.contact-details{display:grid;gap:10px;margin-top:35px}
.contact-details a{display:flex;align-items:center;gap:12px}
.contact-details>a>span{width:36px;height:36px;border:1px solid var(--line);border-radius:9px;display:grid;place-items:center;color:#56caff;font-size:9px;font-weight:800}
.contact-details small,.contact-details b{display:block}
.contact-details small{color:#617188;font-size:8px}.contact-details b{font-size:11px;margin-top:3px}
.contact-form{background:#060d18;border:1px solid var(--line);border-radius:20px;padding:28px}
.contact-form label{display:block;margin-bottom:17px}
.contact-form label>span{display:block;font-size:9px;color:#a6b3c4;font-weight:700;margin-bottom:7px}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
input,select,textarea{
  width:100%;border:1px solid #ffffff12;background:#0a1422;
  color:#f3f7fd;border-radius:9px;outline:none;padding:13px;
  font-size:11px;transition:.2s;
}
input:focus,select:focus,textarea:focus{border-color:#178cff88;box-shadow:0 0 0 3px #168cff10}
textarea{height:115px;resize:vertical}
.contact-form button{
  width:100%;border:0;border-radius:10px;padding:15px;
  color:white;font-weight:800;font-size:11px;cursor:pointer;
  background:linear-gradient(100deg,#176dff,#20d8ed);
  box-shadow:0 15px 35px #127ee72b;
}
.contact-form button span{margin-left:7px}
.form-note{display:block;text-align:center;color:#4f6076;font-size:8px;margin-top:12px}

footer{border-top:1px solid var(--line);background:#040812}
.footer-main{min-height:180px;display:flex;align-items:center;gap:50px}
.footer-main p{color:#65758a;font-size:10px;max-width:300px;line-height:1.6}
.footer-links{display:flex;gap:25px;margin-left:auto}
.footer-links a{font-size:10px;color:#8a99ac}
.footer-bottom{border-top:1px solid var(--line);min-height:60px;display:flex;align-items:center;justify-content:space-between;color:#4e5d71;font-size:8px}

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

@media(max-width:900px){
  .shell{width:min(100% - 34px,700px)}
  .nav{height:72px}
  nav{
    display:none;position:absolute;top:72px;left:17px;right:17px;
    margin:0;padding:20px;background:#07101ff5;border:1px solid var(--line);
    border-radius:14px;flex-direction:column;align-items:stretch;
  }
  nav.open{display:flex}
  nav a{padding:8px}
  nav a:after{display:none}
  .nav-cta{margin-left:auto}
  .menu{display:block}
  .hero{grid-template-columns:1fr;padding-top:130px;padding-bottom:80px;gap:65px}
  .hero-copy{text-align:center}
  .hero-copy .eyebrow{justify-content:center}
  .hero-text{margin-left:auto;margin-right:auto}
  .hero-actions,.trust-row{justify-content:center}
  .hero-visual{width:min(650px,100%);margin:auto}
  .logo-inner{flex-wrap:wrap;justify-content:center;padding:25px 0}
  .about-grid,.contact-wrap{grid-template-columns:1fr}
  .services-grid{grid-template-columns:1fr 1fr}
  .portfolio-head{display:block}
  .portfolio-head>p{margin-top:20px}
  .project-large .project-preview{min-height:400px}
  .process-grid{grid-template-columns:1fr 1fr}
  .process-grid>div:nth-child(3){border-top:1px solid var(--line)}
  .process-grid>div:nth-child(4){border-top:1px solid var(--line)}
}

@media(max-width:600px){
  .shell{width:calc(100% - 28px)}
  .nav-cta{display:none}
  .hero{min-height:auto;padding-top:120px}
  .hero h1{font-size:48px;letter-spacing:-1.7px}
  .hero-actions{flex-direction:column}
  .button{text-align:center}
  .trust-row{gap:14px;justify-content:space-between}
  .trust-row strong{font-size:12px}
  .dashboard{transform:none}
  .hero-visual{min-height:360px}
  .fc-one{left:-4px}.fc-two{right:-4px}
  .logo-inner b{font-size:10px}
  .section{padding-top:90px;padding-bottom:90px}
  .section-heading h2,.contact-copy h2{font-size:40px;letter-spacing:-1.6px}
  .about-grid{gap:45px}
  .office-stage{min-height:340px}
  .services-grid,.projects,.process-grid{grid-template-columns:1fr}
  .project-large{grid-column:auto}
  .project-preview,.project-large .project-preview{min-height:300px}
  .process-grid>div{border-right:1px solid var(--line);border-top:1px solid var(--line)}
  .process-grid>div:first-child{border-top:0}
  .contact-wrap{padding:28px 20px;gap:45px}
  .field-row{grid-template-columns:1fr}
  .footer-main{padding:45px 0;display:block}
  .footer-main p{margin:20px 0}
  .footer-links{margin:0;flex-wrap:wrap}
  .footer-bottom{gap:15px}
}


/* ==========================================================
   CORPORATE PRO V38
   PREMIUM CTA ARROW ASSET — SINGLE OWNER
   ========================================================== */

.cp-arrow{
    display:inline-block !important;

    width:15px !important;
    height:15px !important;

    margin-left:8px !important;
    flex:0 0 15px !important;

    background-image:
        url("./assets/cta-right-arrow.png") !important;

    background-repeat:no-repeat !important;
    background-position:center !important;
    background-size:contain !important;

    vertical-align:-3px !important;

    transition:
        transform .28s cubic-bezier(.2,.8,.2,1),
        filter .28s ease !important;

    filter:
        brightness(0)
        invert(1)
        drop-shadow(0 0 5px rgba(83,214,255,.24)) !important;
}


/* Main premium CTA */
.nav-cta,
.button.primary{
    display:inline-flex;
    align-items:center;
    justify-content:center;
}

.nav-cta:hover .cp-arrow,
.button.primary:hover .cp-arrow{
    transform:translateX(4px);
    filter:
        brightness(0)
        invert(1)
        drop-shadow(0 0 7px rgba(102,226,255,.5)) !important;
}


/* Text links */
.text-link,
.service-card a{
    display:inline-flex;
    align-items:center;
}

.text-link .cp-arrow,
.service-card a .cp-arrow{
    width:13px !important;
    height:13px !important;
    flex-basis:13px !important;

    filter:
        brightness(0)
        saturate(100%)
        invert(75%)
        sepia(69%)
        saturate(1366%)
        hue-rotate(161deg)
        brightness(103%)
        contrast(103%)
        drop-shadow(0 0 4px rgba(32,224,255,.2)) !important;
}

.text-link:hover .cp-arrow,
.service-card a:hover .cp-arrow{
    transform:translateX(4px);
}


/* WhatsApp CTA */
#contactForm button{
    display:flex;
    align-items:center;
    justify-content:center;
}

#contactForm button .cp-arrow{
    width:16px !important;
    height:16px !important;
    flex-basis:16px !important;
}

#contactForm button:hover .cp-arrow{
    transform:translateX(5px);
}


/*
 * Old generic span margins must not become the visual owner
 * for our new arrow.
 */
.nav-cta .cp-arrow,
.button .cp-arrow,
.service-card a .cp-arrow{
    margin-left:8px !important;
}


/* Mobile */
@media(max-width:600px){

    .cp-arrow{
        width:14px !important;
        height:14px !important;
        flex-basis:14px !important;
    }

}


/* Reduced motion */
@media(prefers-reduced-motion:reduce){

    .cp-arrow{
        transition:none !important;
    }

    .nav-cta:hover .cp-arrow,
    .button:hover .cp-arrow,
    .text-link:hover .cp-arrow,
    .service-card a:hover .cp-arrow,
    #contactForm button:hover .cp-arrow{
        transform:none !important;
    }

}

/* ===== END CORPORATE PRO V38 ===== */


/* ==========================================================
   CORPORATE PRO V39
   CORPORATE BUSINESS IDENTITY + CINEMATIC PAGE BACKGROUND
   ========================================================== */

:root{
    --cp-bg-deep:#030814;
    --cp-bg-navy:#06101f;
    --cp-bg-blue:#071a31;

    --cp-blue:#168cff;
    --cp-cyan:#31d6f4;
    --cp-gold:#d7a84c;
}


/* ----------------------------------------------------------
   FULL WEBSITE BACKGROUND
   ---------------------------------------------------------- */

html{
    background:#030814;
}

body{
    position:relative;

    background:
        radial-gradient(
            900px 650px at 88% 7%,
            rgba(20,116,221,.18),
            transparent 65%
        ),

        radial-gradient(
            760px 580px at 5% 34%,
            rgba(20,74,145,.13),
            transparent 68%
        ),

        radial-gradient(
            720px 560px at 93% 66%,
            rgba(211,159,66,.075),
            transparent 70%
        ),

        linear-gradient(
            180deg,
            #030814 0%,
            #06101f 24%,
            #040b17 49%,
            #071221 72%,
            #030814 100%
        ) !important;

    background-attachment:fixed !important;
}


/*
 * Fine premium grid — intentionally extremely subtle.
 */
body::before{
    content:"";

    position:fixed;
    inset:0;
    z-index:-2;

    pointer-events:none;

    background-image:
        linear-gradient(
            rgba(255,255,255,.018) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.018) 1px,
            transparent 1px
        );

    background-size:72px 72px;

    mask-image:
        linear-gradient(
            to bottom,
            rgba(0,0,0,.48),
            transparent 82%
        );

    -webkit-mask-image:
        linear-gradient(
            to bottom,
            rgba(0,0,0,.48),
            transparent 82%
        );
}


/*
 * Global atmospheric light.
 */
body::after{
    content:"";

    position:fixed;

    width:620px;
    height:620px;

    right:-290px;
    top:25%;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(20,137,255,.13),
            rgba(20,137,255,.035) 42%,
            transparent 70%
        );

    filter:blur(25px);

    pointer-events:none;
    z-index:-1;
}


/* Existing ambient becomes more restrained. */

.ambient{
    opacity:.1 !important;
}

.ambient-one{
    background:#168cff !important;
}

.ambient-two{
    background:#c9973e !important;
}


/* ----------------------------------------------------------
   HEADER
   ---------------------------------------------------------- */

.header{
    background:
        linear-gradient(
            180deg,
            rgba(3,8,20,.94),
            rgba(3,8,20,.82)
        ) !important;

    border-bottom:
        1px solid rgba(105,171,233,.09) !important;

    box-shadow:
        0 15px 50px rgba(0,0,0,.14);
}

.header.scrolled{
    background:
        rgba(3,8,20,.96) !important;

    border-color:
        rgba(73,159,237,.15) !important;
}


/* ----------------------------------------------------------
   HERO
   ---------------------------------------------------------- */

.hero{
    position:relative;
}

.hero::before{
    content:"";

    position:absolute;

    width:580px;
    height:580px;

    left:-340px;
    top:80px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(23,119,222,.13),
            transparent 68%
        );

    pointer-events:none;
    z-index:-1;
}


/* ----------------------------------------------------------
   LOGO / INDUSTRY STRIP
   ---------------------------------------------------------- */

.logo-strip{
    background:
        linear-gradient(
            90deg,
            rgba(5,14,29,.92),
            rgba(8,25,45,.92),
            rgba(5,14,29,.92)
        ) !important;

    border-top:
        1px solid rgba(72,156,226,.12) !important;

    border-bottom:
        1px solid rgba(72,156,226,.12) !important;
}


/* ----------------------------------------------------------
   ABOUT
   ---------------------------------------------------------- */

#about{
    position:relative;
}

#about::after{
    content:"";

    position:absolute;

    width:500px;
    height:500px;

    right:-340px;
    top:15%;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(208,157,65,.08),
            transparent 68%
        );

    pointer-events:none;
}


/* ----------------------------------------------------------
   BUSINESS CAPABILITIES
   ---------------------------------------------------------- */

.services-section{
    position:relative;
    isolation:isolate;

    background:
        radial-gradient(
            650px 400px at 50% 0%,
            rgba(21,121,220,.095),
            transparent 70%
        ),

        linear-gradient(
            180deg,
            rgba(5,15,29,.82),
            rgba(4,11,23,.7)
        ) !important;

    border-top:
        1px solid rgba(71,153,224,.12) !important;

    border-bottom:
        1px solid rgba(71,153,224,.12) !important;
}


.service-card{
    overflow:hidden;

    background:
        linear-gradient(
            145deg,
            rgba(11,28,50,.82),
            rgba(6,15,29,.88)
        ) !important;

    border:
        1px solid rgba(104,164,215,.15) !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.025),
        0 22px 55px rgba(0,0,0,.14);

    backdrop-filter:blur(12px);
}


.service-card::before{
    content:"";

    position:absolute;

    width:180px;
    height:180px;

    right:-105px;
    top:-115px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(27,150,255,.13),
            transparent 68%
        );

    transition:
        transform .4s ease,
        opacity .4s ease;

    pointer-events:none;
}


.service-card:nth-child(2)::before,
.service-card:nth-child(5)::before{
    background:
        radial-gradient(
            circle,
            rgba(211,161,70,.105),
            transparent 68%
        );
}


.service-card:hover{
    transform:translateY(-6px) !important;

    border-color:
        rgba(46,174,255,.32) !important;

    box-shadow:
        0 30px 65px rgba(0,0,0,.24),
        inset 0 1px 0 rgba(255,255,255,.04) !important;
}


.service-card:hover::before{
    transform:scale(1.2);
}


.service-card.featured{
    background:
        linear-gradient(
            145deg,
            rgba(11,38,69,.9),
            rgba(7,20,38,.92)
        ) !important;

    border-color:
        rgba(42,151,239,.28) !important;
}


.service-icon{
    background:
        linear-gradient(
            145deg,
            rgba(15,60,101,.9),
            rgba(7,31,57,.92)
        ) !important;

    border-color:
        rgba(35,153,239,.38) !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.05),
        0 8px 22px rgba(0,0,0,.16);
}


.service-num{
    color:
        rgba(136,166,196,.42) !important;
}


/* ----------------------------------------------------------
   PORTFOLIO
   ---------------------------------------------------------- */

#portfolio{
    position:relative;
}

#portfolio::before{
    content:"";

    position:absolute;

    width:650px;
    height:500px;

    left:-430px;
    top:28%;

    background:
        radial-gradient(
            circle,
            rgba(19,115,214,.095),
            transparent 70%
        );

    pointer-events:none;
}


/* ----------------------------------------------------------
   PROCESS
   ---------------------------------------------------------- */

.process{
    background:
        radial-gradient(
            600px 350px at 80% 20%,
            rgba(201,151,61,.055),
            transparent 70%
        ),

        linear-gradient(
            180deg,
            rgba(7,19,35,.88),
            rgba(4,11,22,.9)
        ) !important;

    border-color:
        rgba(83,153,213,.12) !important;
}


/* ----------------------------------------------------------
   CONTACT
   ---------------------------------------------------------- */

.contact-wrap{
    background:
        radial-gradient(
            520px 420px at 0% 100%,
            rgba(15,101,177,.24),
            transparent 68%
        ),

        radial-gradient(
            440px 320px at 100% 0%,
            rgba(202,151,59,.06),
            transparent 70%
        ),

        linear-gradient(
            145deg,
            rgba(8,25,45,.94),
            rgba(5,13,25,.96)
        ) !important;

    border:
        1px solid rgba(84,157,219,.17) !important;

    box-shadow:
        0 40px 100px rgba(0,0,0,.23),
        inset 0 1px 0 rgba(255,255,255,.03);
}


/* ----------------------------------------------------------
   FOOTER
   ---------------------------------------------------------- */

footer{
    background:
        linear-gradient(
            180deg,
            rgba(3,9,18,.96),
            #020610
        ) !important;

    border-top:
        1px solid rgba(72,144,205,.12) !important;
}


/* ----------------------------------------------------------
   MOBILE PERFORMANCE
   ---------------------------------------------------------- */

@media(max-width:900px){

    body{
        background-attachment:scroll !important;
    }

}


@media(max-width:600px){

    body::before{
        background-size:52px 52px;
        opacity:.7;
    }

    .service-card{
        min-height:255px;
    }

}


/* ===== END CORPORATE PRO V39 ===== */


/* ==========================================================
   CORPORATE PRO V40
   EXECUTIVE CORPORATE BACKGROUND — FINAL VISUAL OWNER
   ========================================================== */

:root{
    --cp40-ink:#020711;
    --cp40-navy:#06111f;
    --cp40-slate:#0a1b2d;
    --cp40-steel:#10283d;

    --cp40-blue:#238ac9;
    --cp40-ice:#76c9e8;
    --cp40-gold:#cba55b;

    --cp40-line:rgba(137,184,213,.13);
}


/* ==========================================================
   PAGE CANVAS
   ========================================================== */

html{
    background:var(--cp40-ink) !important;
}

body{
    background:
        radial-gradient(
            ellipse 900px 620px at 92% 5%,
            rgba(38,126,178,.16),
            transparent 67%
        ),

        radial-gradient(
            ellipse 850px 700px at -5% 35%,
            rgba(32,84,128,.13),
            transparent 70%
        ),

        radial-gradient(
            ellipse 760px 620px at 100% 69%,
            rgba(190,147,73,.065),
            transparent 72%
        ),

        radial-gradient(
            ellipse 850px 600px at 20% 92%,
            rgba(26,91,133,.10),
            transparent 70%
        ),

        linear-gradient(
            145deg,
            #020711 0%,
            #06111f 27%,
            #081727 50%,
            #050d18 73%,
            #020711 100%
        ) !important;

    background-attachment:fixed !important;
}


/* Fine executive texture */
body::before{
    background-image:
        linear-gradient(
            rgba(157,199,225,.018) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(157,199,225,.018) 1px,
            transparent 1px
        ) !important;

    background-size:88px 88px !important;

    opacity:.72;
}


/* Remove strong blue ball-like global glow */
body::after{
    width:850px !important;
    height:850px !important;

    right:-520px !important;
    top:18% !important;

    background:
        radial-gradient(
            circle,
            rgba(72,137,173,.09),
            rgba(36,87,120,.025) 45%,
            transparent 72%
        ) !important;

    filter:blur(45px) !important;
}


/* ==========================================================
   TYPOGRAPHIC ACCENT
   Less "software cyan", more executive blue/steel.
   ========================================================== */

.hero h1 span,
.section-heading em,
.contact-copy em{
    background:
        linear-gradient(
            105deg,
            #2f9bd7 0%,
            #69c3e4 52%,
            #b6ddea 100%
        ) !important;

    -webkit-background-clip:text !important;
    background-clip:text !important;

    color:transparent !important;
}


.eyebrow{
    color:#79c5e4 !important;
}

.eyebrow span{
    background:
        linear-gradient(
            90deg,
            #398fb9,
            #c39c55
        ) !important;
}


/* ==========================================================
   HEADER
   ========================================================== */

.header,
.header.scrolled{
    background:
        linear-gradient(
            180deg,
            rgba(2,7,17,.97),
            rgba(4,12,23,.94)
        ) !important;

    border-bottom:
        1px solid rgba(127,177,207,.13) !important;

    box-shadow:
        0 18px 55px rgba(0,0,0,.2) !important;
}


/* ==========================================================
   HERO
   ========================================================== */

.hero::before{
    width:900px !important;
    height:680px !important;

    left:-620px !important;
    top:20px !important;

    background:
        radial-gradient(
            ellipse,
            rgba(44,119,164,.12),
            transparent 70%
        ) !important;
}


/* Dashboard becomes corporate presentation rather than neon tech */
.dashboard{
    background:
        linear-gradient(
            145deg,
            rgba(10,27,45,.96),
            rgba(5,15,27,.98)
        ) !important;

    border:
        1px solid rgba(105,164,199,.22) !important;

    box-shadow:
        0 55px 110px rgba(0,0,0,.42),
        inset 0 1px rgba(255,255,255,.045) !important;
}


.orb{
    background:
        radial-gradient(
            circle at 35% 30%,
            #d6bd83,
            #a77a32 40%,
            #34220c 73%
        ) !important;

    box-shadow:
        0 0 70px rgba(186,139,59,.18) !important;
}


.float-icon{
    background:
        linear-gradient(
            145deg,
            #237eac,
            #17567c
        ) !important;
}


.fc-two .float-icon{
    background:
        linear-gradient(
            145deg,
            #c49a4c,
            #8c6424
        ) !important;
}


/* ==========================================================
   INDUSTRY STRIP
   ========================================================== */

.logo-strip{
    background:
        linear-gradient(
            90deg,
            rgba(4,12,23,.94),
            rgba(11,29,46,.92),
            rgba(4,12,23,.94)
        ) !important;

    border-color:
        rgba(129,177,205,.12) !important;
}


.logo-inner b{
    color:#8599a9 !important;
}


/* ==========================================================
   ABOUT
   ========================================================== */

#about{
    background:
        radial-gradient(
            700px 480px at 85% 48%,
            rgba(181,140,70,.055),
            transparent 70%
        ) !important;
}


#about::after{
    width:720px !important;
    height:620px !important;

    right:-500px !important;

    background:
        radial-gradient(
            circle,
            rgba(185,143,71,.07),
            transparent 70%
        ) !important;
}


.office-stage{
    background:
        linear-gradient(
            145deg,
            rgba(13,35,56,.95),
            rgba(6,17,30,.97)
        ) !important;

    border-color:
        rgba(123,171,201,.16) !important;
}


.gold-ring{
    border-color:
        rgba(203,165,91,.42) !important;

    box-shadow:
        0 0 70px rgba(184,137,56,.10) !important;
}


/* ==========================================================
   BUSINESS CAPABILITIES
   ========================================================== */

.services-section{
    background:
        radial-gradient(
            750px 500px at 12% 10%,
            rgba(44,111,153,.09),
            transparent 70%
        ),

        radial-gradient(
            620px 420px at 90% 85%,
            rgba(188,143,70,.045),
            transparent 72%
        ),

        linear-gradient(
            180deg,
            rgba(7,20,34,.88),
            rgba(4,12,23,.91)
        ) !important;
}


.service-card{
    background:
        linear-gradient(
            145deg,
            rgba(12,31,49,.86),
            rgba(6,17,29,.9)
        ) !important;

    border-color:
        rgba(119,166,195,.15) !important;
}


.service-card.featured{
    background:
        linear-gradient(
            145deg,
            rgba(15,40,61,.93),
            rgba(7,20,34,.94)
        ) !important;

    border-color:
        rgba(103,165,198,.25) !important;
}


.service-card::before{
    background:
        radial-gradient(
            circle,
            rgba(71,150,190,.11),
            transparent 70%
        ) !important;
}


.service-card:nth-child(2)::before,
.service-card:nth-child(5)::before{
    background:
        radial-gradient(
            circle,
            rgba(196,153,79,.09),
            transparent 70%
        ) !important;
}


.service-icon{
    background:
        linear-gradient(
            145deg,
            rgba(22,61,86,.92),
            rgba(9,30,48,.95)
        ) !important;

    border-color:
        rgba(83,156,194,.32) !important;

    color:#79c8e6 !important;
}


/* ==========================================================
   PORTFOLIO / ENGAGEMENTS
   ========================================================== */

#portfolio{
    background:
        radial-gradient(
            800px 580px at 50% 42%,
            rgba(29,78,111,.07),
            transparent 72%
        ) !important;
}


.preview-blue{
    background:
        radial-gradient(
            circle at 72% 28%,
            #315d72,
            #102a3d 45%,
            #07131f 78%
        ) !important;
}


.preview-gold{
    background:
        radial-gradient(
            circle at 70% 22%,
            #7b5b2d,
            #2b2114 48%,
            #0d0f12 82%
        ) !important;
}


.preview-purple{
    background:
        radial-gradient(
            circle at 72% 22%,
            #4f4967,
            #222033 48%,
            #0c1018 82%
        ) !important;
}


.alt .mock-shape{
    background:
        radial-gradient(
            circle at 35% 30%,
            #e0c183,
            #9d7535 55%,
            #2d210d
        ) !important;
}


.alt-two .mock-shape{
    background:
        radial-gradient(
            circle at 35% 30%,
            #9ba3b8,
            #545d78 55%,
            #1a2030
        ) !important;
}


.alt .mock-hero b:nth-child(2){
    background:#c89f55 !important;
}


.alt-two .mock-hero b:nth-child(2){
    background:#8191b1 !important;
}


/* ==========================================================
   PROCESS
   ========================================================== */

.process{
    background:
        radial-gradient(
            720px 420px at 82% 15%,
            rgba(188,145,74,.055),
            transparent 70%
        ),

        radial-gradient(
            680px 450px at 10% 85%,
            rgba(40,105,145,.075),
            transparent 72%
        ),

        linear-gradient(
            180deg,
            rgba(7,19,32,.94),
            rgba(4,12,22,.96)
        ) !important;

    border-color:
        rgba(123,170,198,.12) !important;
}


.process-grid span{
    color:#d0a757 !important;
}


/* ==========================================================
   CONTACT
   ========================================================== */

#contact{
    position:relative;
}


#contact::before{
    content:"";

    position:absolute;

    width:760px;
    height:620px;

    left:-500px;
    bottom:-220px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(44,113,153,.09),
            transparent 70%
        );

    pointer-events:none;
}


.contact-wrap{
    background:
        radial-gradient(
            650px 480px at 0% 100%,
            rgba(36,98,137,.17),
            transparent 70%
        ),

        radial-gradient(
            500px 400px at 100% 0%,
            rgba(190,147,74,.055),
            transparent 72%
        ),

        linear-gradient(
            145deg,
            rgba(10,29,47,.96),
            rgba(5,15,27,.98)
        ) !important;

    border-color:
        rgba(120,169,198,.18) !important;
}


.contact-form{
    background:
        linear-gradient(
            150deg,
            rgba(4,13,24,.96),
            rgba(7,20,33,.98)
        ) !important;

    border-color:
        rgba(124,170,198,.15) !important;
}


input,
select,
textarea{
    background:
        rgba(9,25,40,.92) !important;

    border-color:
        rgba(122,168,196,.15) !important;
}


input:focus,
select:focus,
textarea:focus{
    border-color:
        rgba(72,154,195,.65) !important;

    box-shadow:
        0 0 0 3px rgba(54,133,177,.09) !important;
}


/* Corporate CTA: blue -> steel, restrained */
.contact-form button,
.nav-cta,
.button.primary{
    background:
        linear-gradient(
            110deg,
            #246fa6,
            #318fbb
        ) !important;

    box-shadow:
        0 14px 34px rgba(31,107,153,.18) !important;
}


/* Gold micro-accent */
.feature-list span,
.service-num{
    color:#c8a15a !important;
}


/* ==========================================================
   FOOTER
   ========================================================== */

footer{
    background:
        linear-gradient(
            180deg,
            rgba(3,9,17,.98),
            #01050c
        ) !important;

    border-color:
        rgba(120,166,194,.11) !important;
}


/* ==========================================================
   MOBILE
   ========================================================== */

@media(max-width:900px){

    body{
        background-attachment:scroll !important;
    }

}


@media(max-width:600px){

    body::before{
        background-size:58px 58px !important;
    }

    .contact-wrap{
        background:
            radial-gradient(
                500px 380px at 0% 100%,
                rgba(36,98,137,.14),
                transparent 70%
            ),
            linear-gradient(
                145deg,
                rgba(10,29,47,.97),
                rgba(5,15,27,.99)
            ) !important;
    }

}

/* ===== END CORPORATE PRO V40 ===== */


/* ==========================================================
   CORPORATE PRO V41
   LUXURY GRAPHITE GOLD — FINAL VISUAL OWNER
   ========================================================== */

:root{
  --lux-black:#050505;
  --lux-graphite:#0b0b0c;
  --lux-panel:#101011;
  --lux-panel-2:#151310;
  --lux-gold:#d6a84f;
  --lux-gold-light:#f0cf83;
  --lux-gold-deep:#8d6425;
  --lux-ivory:#f7f2e8;
  --lux-muted:#a29b90;
  --lux-line:rgba(224,183,101,.17);
}


/* ---------- ENTIRE PAGE ---------- */

html{
  background:#050505 !important;
}

body{
  background:
    radial-gradient(
      ellipse 1050px 700px at 105% 3%,
      rgba(197,145,54,.16),
      transparent 62%
    ),
    radial-gradient(
      ellipse 900px 700px at -12% 42%,
      rgba(145,99,31,.09),
      transparent 67%
    ),
    radial-gradient(
      ellipse 950px 650px at 100% 78%,
      rgba(200,153,69,.085),
      transparent 68%
    ),
    linear-gradient(
      145deg,
      #040404 0%,
      #0a0908 28%,
      #0e0c09 48%,
      #080706 70%,
      #030303 100%
    ) !important;

  background-attachment:fixed !important;
}


/* Brushed graphite texture */
body::before{
  content:"" !important;
  position:fixed !important;
  inset:0 !important;
  z-index:-2 !important;
  pointer-events:none !important;

  background:
    repeating-linear-gradient(
      118deg,
      rgba(255,255,255,.016) 0px,
      rgba(255,255,255,.016) 1px,
      transparent 1px,
      transparent 9px
    ),
    linear-gradient(
      115deg,
      transparent 0%,
      transparent 38%,
      rgba(213,164,76,.035) 38.2%,
      transparent 38.7%,
      transparent 67%,
      rgba(213,164,76,.025) 67.2%,
      transparent 67.7%
    ) !important;

  background-size:auto !important;
  opacity:1 !important;

  mask-image:none !important;
  -webkit-mask-image:none !important;
}


/* Large champagne light beam */
body::after{
  content:"" !important;
  position:fixed !important;

  width:1100px !important;
  height:900px !important;

  right:-580px !important;
  top:-310px !important;

  border-radius:0 !important;

  background:
    linear-gradient(
      125deg,
      transparent 35%,
      rgba(226,181,93,.03) 43%,
      rgba(226,181,93,.13) 48%,
      rgba(255,221,150,.045) 51%,
      transparent 59%
    ) !important;

  filter:blur(20px) !important;
  transform:rotate(-5deg);

  pointer-events:none !important;
  z-index:-1 !important;
}


/* Old blue ambient lights disabled */
.ambient{
  display:none !important;
}


/* ---------- HEADER ---------- */

.header,
.header.scrolled{
  background:
    linear-gradient(
      180deg,
      rgba(5,5,5,.98),
      rgba(8,7,6,.96)
    ) !important;

  border-bottom:
    1px solid rgba(218,173,87,.15) !important;

  box-shadow:
    0 18px 60px rgba(0,0,0,.35) !important;
}

nav a{
  color:#aaa59d !important;
}

nav a:hover,
nav a.active{
  color:#fff9ed !important;
}

nav a::after{
  background:
    linear-gradient(
      90deg,
      #9b6d28,
      #e5ba67
    ) !important;
}


/* ---------- GOLD TYPOGRAPHY IDENTITY ---------- */

.eyebrow{
  color:#d5ad63 !important;
}

.eyebrow span{
  background:
    linear-gradient(
      90deg,
      #7f5923,
      #efc974
    ) !important;
}

.hero h1 span,
.section-heading em,
.contact-copy em{
  background:
    linear-gradient(
      105deg,
      #b77d28 0%,
      #f1ca75 46%,
      #fff0c1 67%,
      #c18b36 100%
    ) !important;

  -webkit-background-clip:text !important;
  background-clip:text !important;
  color:transparent !important;
}


/* ---------- HERO ---------- */

.hero{
  position:relative;
}

.hero::before{
  content:"" !important;

  position:absolute !important;

  width:850px !important;
  height:650px !important;

  left:-520px !important;
  top:80px !important;

  background:
    radial-gradient(
      ellipse,
      rgba(187,132,42,.105),
      transparent 69%
    ) !important;

  pointer-events:none !important;
  z-index:-1 !important;
}


.dashboard{
  background:
    linear-gradient(
      145deg,
      rgba(22,19,14,.98),
      rgba(8,8,8,.99)
    ) !important;

  border:
    1px solid rgba(218,174,89,.25) !important;

  box-shadow:
    0 55px 120px rgba(0,0,0,.58),
    0 0 55px rgba(174,118,32,.055),
    inset 0 1px rgba(255,232,185,.07) !important;
}


.dash-top,
.dash-stats{
  border-color:
    rgba(220,179,98,.12) !important;
}


.dash-logo,
.dash-button,
.mini-buttons i:first-child{
  background:
    linear-gradient(
      90deg,
      #9e6c25,
      #e6b75b
    ) !important;
}


.line-sm,
.dash-nav i,
.dash-stats span,
.glass-card b,
.glass-card i{
  background:#514a40 !important;
}


.orb{
  background:
    radial-gradient(
      circle at 34% 28%,
      #ffe0a0 0%,
      #d49a3c 30%,
      #95601c 58%,
      #271806 100%
    ) !important;

  box-shadow:
    0 0 75px rgba(214,158,61,.20) !important;
}


.glass-card{
  background:
    rgba(24,20,14,.88) !important;

  border-color:
    rgba(226,184,101,.19) !important;
}


.glass-card span{
  background:#d7a447 !important;
}


.float-card{
  background:
    rgba(20,17,12,.94) !important;

  border-color:
    rgba(222,178,92,.19) !important;
}


.float-icon,
.fc-two .float-icon{
  background:
    linear-gradient(
      145deg,
      #d1a14a,
      #8a5c1d
    ) !important;

  color:#fff7e7 !important;
}


/* ---------- BUTTONS ---------- */

.nav-cta,
.button.primary,
.contact-form button{
  background:
    linear-gradient(
      110deg,
      #9d6b25 0%,
      #d8a84f 48%,
      #efc66f 100%
    ) !important;

  color:#130d05 !important;

  box-shadow:
    0 15px 38px rgba(192,139,48,.22),
    inset 0 1px rgba(255,245,216,.30) !important;
}


.button.secondary{
  background:
    rgba(255,245,220,.025) !important;

  border-color:
    rgba(221,177,91,.20) !important;

  color:#f7f0e3 !important;
}


/* Existing PNG arrows become dark on gold CTAs */
.nav-cta .cp-arrow,
.button.primary .cp-arrow,
#contactForm button .cp-arrow{
  filter:
    brightness(0)
    saturate(100%) !important;
}


/* Text arrows stay gold */
.text-link,
.service-card a{
  color:#d9ad59 !important;
}

.text-link .cp-arrow,
.service-card a .cp-arrow{
  filter:
    brightness(0)
    saturate(100%)
    invert(72%)
    sepia(59%)
    saturate(655%)
    hue-rotate(359deg)
    brightness(94%)
    contrast(89%) !important;
}


/* ---------- INDUSTRY STRIP ---------- */

.logo-strip{
  background:
    linear-gradient(
      90deg,
      rgba(7,7,7,.98),
      rgba(19,16,11,.97),
      rgba(7,7,7,.98)
    ) !important;

  border-color:
    rgba(217,173,88,.14) !important;
}

.logo-inner b{
  color:#a79d8b !important;
}


/* ---------- ABOUT ---------- */

#about{
  background:
    radial-gradient(
      750px 520px at 87% 45%,
      rgba(191,139,49,.075),
      transparent 70%
    ) !important;
}


#about::after{
  background:
    radial-gradient(
      circle,
      rgba(211,158,62,.075),
      transparent 70%
    ) !important;
}


.office-stage{
  background:
    linear-gradient(
      145deg,
      rgba(25,21,15,.96),
      rgba(8,8,8,.98)
    ) !important;

  border-color:
    rgba(219,175,90,.20) !important;

  box-shadow:
    0 35px 80px rgba(0,0,0,.30) !important;
}


.screen-card{
  background:#0d0c0a !important;

  border-color:
    rgba(221,179,96,.16) !important;
}


.screen-head,
.screen-chart i:nth-child(3),
.screen-chart i:nth-child(4){
  background:
    linear-gradient(
      #e1b45d,
      #9b6b25
    ) !important;
}


.gold-ring{
  border-color:
    rgba(235,194,111,.48) !important;

  box-shadow:
    0 0 80px rgba(207,151,54,.13) !important;
}


/* ---------- SERVICES ---------- */

.services-section{
  background:
    radial-gradient(
      850px 540px at 8% 5%,
      rgba(181,126,39,.065),
      transparent 70%
    ),
    radial-gradient(
      720px 500px at 94% 90%,
      rgba(218,167,74,.055),
      transparent 72%
    ),
    linear-gradient(
      180deg,
      rgba(12,11,9,.93),
      rgba(5,5,5,.96)
    ) !important;

  border-color:
    rgba(219,175,91,.14) !important;
}


.service-card,
.service-card.featured{
  background:
    linear-gradient(
      145deg,
      rgba(25,21,15,.90),
      rgba(10,9,8,.95)
    ) !important;

  border-color:
    rgba(220,177,94,.16) !important;

  box-shadow:
    inset 0 1px rgba(255,232,184,.025),
    0 25px 60px rgba(0,0,0,.19) !important;
}


.service-card:hover{
  border-color:
    rgba(229,185,98,.37) !important;

  box-shadow:
    0 32px 75px rgba(0,0,0,.32),
    0 0 35px rgba(192,137,45,.045) !important;
}


.service-card::before,
.service-card:nth-child(2)::before,
.service-card:nth-child(5)::before{
  background:
    radial-gradient(
      circle,
      rgba(215,163,70,.105),
      transparent 70%
    ) !important;
}


.service-icon{
  background:
    linear-gradient(
      145deg,
      rgba(74,54,25,.85),
      rgba(28,22,13,.95)
    ) !important;

  border-color:
    rgba(221,174,84,.31) !important;

  color:#efc36c !important;
}


.service-num,
.feature-list span{
  color:#d0a354 !important;
}


/* ---------- PORTFOLIO ---------- */

#portfolio{
  background:
    radial-gradient(
      850px 600px at 50% 45%,
      rgba(171,119,35,.055),
      transparent 72%
    ) !important;
}


.preview-blue,
.preview-gold,
.preview-purple{
  background:
    radial-gradient(
      circle at 72% 25%,
      #73501f,
      #251a0d 45%,
      #090807 80%
    ) !important;
}


.browser-body,
.alt,
.alt-two{
  background:#100d09 !important;
}


.mock-hero b:nth-child(2),
.alt .mock-hero b:nth-child(2),
.alt-two .mock-hero b:nth-child(2){
  background:#d2a24b !important;
}


.mock-shape,
.alt .mock-shape,
.alt-two .mock-shape{
  background:
    radial-gradient(
      circle at 35% 30%,
      #ffe0a0,
      #c68c34 50%,
      #3a250a 100%
    ) !important;
}


.project-info>a{
  border-color:
    rgba(219,174,88,.21) !important;

  color:#e5b65d !important;
}


/* ---------- PROCESS ---------- */

.process{
  background:
    radial-gradient(
      780px 460px at 85% 15%,
      rgba(207,154,61,.07),
      transparent 70%
    ),
    linear-gradient(
      180deg,
      rgba(14,12,9,.95),
      rgba(5,5,5,.97)
    ) !important;

  border-color:
    rgba(219,174,89,.14) !important;
}


.process-grid>div{
  border-color:
    rgba(216,172,89,.13) !important;
}


.process-grid span{
  color:#e0b159 !important;
}


/* ---------- CONTACT ---------- */

#contact::before{
  background:
    radial-gradient(
      circle,
      rgba(195,139,45,.075),
      transparent 70%
    ) !important;
}


.contact-wrap{
  background:
    radial-gradient(
      680px 500px at 0% 100%,
      rgba(168,114,31,.11),
      transparent 70%
    ),
    radial-gradient(
      560px 430px at 100% 0%,
      rgba(218,167,74,.07),
      transparent 72%
    ),
    linear-gradient(
      145deg,
      rgba(21,18,13,.97),
      rgba(7,7,7,.99)
    ) !important;

  border-color:
    rgba(222,178,92,.20) !important;

  box-shadow:
    0 45px 110px rgba(0,0,0,.40),
    inset 0 1px rgba(255,233,190,.035) !important;
}


.contact-form{
  background:
    linear-gradient(
      150deg,
      rgba(12,11,9,.98),
      rgba(6,6,6,.99)
    ) !important;

  border-color:
    rgba(219,176,93,.17) !important;
}


input,
select,
textarea{
  background:
    rgba(18,16,12,.95) !important;

  border-color:
    rgba(219,176,93,.16) !important;

  color:#f8f1e4 !important;
}


input:focus,
select:focus,
textarea:focus{
  border-color:
    rgba(222,175,82,.66) !important;

  box-shadow:
    0 0 0 3px rgba(204,150,55,.09) !important;
}


/* ---------- FOOTER ---------- */

footer{
  background:
    linear-gradient(
      180deg,
      rgba(6,6,6,.99),
      #020202
    ) !important;

  border-color:
    rgba(217,171,83,.13) !important;
}


/* ---------- MOBILE ---------- */

@media(max-width:900px){
  body{
    background-attachment:scroll !important;
  }
}

@media(max-width:600px){

  body::before{
    background:
      repeating-linear-gradient(
        118deg,
        rgba(255,255,255,.012) 0,
        rgba(255,255,255,.012) 1px,
        transparent 1px,
        transparent 11px
      ) !important;
  }

  .contact-wrap{
    background:
      radial-gradient(
        500px 400px at 0% 100%,
        rgba(168,114,31,.09),
        transparent 70%
      ),
      linear-gradient(
        145deg,
        rgba(20,17,12,.98),
        rgba(6,6,6,.99)
      ) !important;
  }
}

/* ===== END CORPORATE PRO V41 ===== */


/* ==========================================================
   CORPORATE PRO V42
   VISIBLE GRAPHITE / BRONZE CANVAS — FINAL OWNER
   ========================================================== */


/* ----------------------------------------------------------
   REAL PAGE BACKGROUND
   Deliberately brighter than previous near-black canvas.
   ---------------------------------------------------------- */

html,
body{
    background-color:#17130e !important;
}

body{
    background-image:

        radial-gradient(
            ellipse 1100px 760px at 82% 8%,
            rgba(191,137,50,.25) 0%,
            rgba(120,82,30,.13) 35%,
            transparent 68%
        ),

        radial-gradient(
            ellipse 1000px 720px at -8% 48%,
            rgba(117,82,38,.20) 0%,
            rgba(70,49,27,.10) 40%,
            transparent 70%
        ),

        radial-gradient(
            ellipse 950px 700px at 92% 86%,
            rgba(172,119,42,.17) 0%,
            transparent 67%
        ),

        linear-gradient(
            135deg,
            #17130e 0%,
            #201910 22%,
            #292015 43%,
            #18130e 67%,
            #21180e 84%,
            #100d0a 100%
        ) !important;

    background-attachment:fixed !important;
}


/* ----------------------------------------------------------
   SUBTLE BRUSHED METAL TEXTURE
   ---------------------------------------------------------- */

body::before{
    content:"" !important;
    position:fixed !important;
    inset:0 !important;

    pointer-events:none !important;

    background-image:

        repeating-linear-gradient(
            115deg,
            rgba(255,230,180,.020) 0,
            rgba(255,230,180,.020) 1px,
            transparent 1px,
            transparent 12px
        ),

        linear-gradient(
            115deg,
            transparent 0%,
            transparent 30%,
            rgba(237,190,99,.045) 30.2%,
            transparent 30.7%,
            transparent 66%,
            rgba(237,190,99,.035) 66.2%,
            transparent 66.8%
        ) !important;

    background-size:auto !important;

    opacity:1 !important;

    mask-image:none !important;
    -webkit-mask-image:none !important;

    z-index:-1 !important;
}


/* ----------------------------------------------------------
   LARGE GOLD LIGHT — ACTUALLY VISIBLE
   ---------------------------------------------------------- */

body::after{
    content:"" !important;

    position:fixed !important;

    width:900px !important;
    height:900px !important;

    right:-360px !important;
    top:90px !important;

    border-radius:50% !important;

    background:
        radial-gradient(
            circle,
            rgba(218,162,66,.19) 0%,
            rgba(174,118,38,.10) 36%,
            rgba(100,67,26,.045) 54%,
            transparent 72%
        ) !important;

    filter:blur(18px) !important;
    transform:none !important;

    pointer-events:none !important;
    z-index:-1 !important;
}


/* ==========================================================
   IMPORTANT:
   REMOVE OLD SECTION BLACK BACKGROUND OWNERS
   So actual page canvas can be seen.
   ========================================================== */

.hero,
#about,
#portfolio,
#contact{
    background-color:transparent !important;
}


.hero{
    background-image:
        linear-gradient(
            180deg,
            rgba(24,18,11,.16),
            rgba(14,11,8,.04)
        ) !important;
}


#about{
    background-image:
        radial-gradient(
            800px 560px at 88% 42%,
            rgba(222,168,72,.10),
            transparent 70%
        ) !important;
}


#portfolio{
    background-image:
        radial-gradient(
            850px 600px at 8% 35%,
            rgba(185,128,42,.095),
            transparent 72%
        ) !important;
}


#contact{
    background-image:
        radial-gradient(
            850px 600px at 92% 30%,
            rgba(203,148,57,.09),
            transparent 70%
        ) !important;
}


/* ==========================================================
   SERVICES
   No more almost-black full-width block.
   ========================================================== */

.services-section{
    background:
        linear-gradient(
            180deg,
            rgba(45,34,20,.56),
            rgba(24,19,14,.48)
        ) !important;

    border-top:
        1px solid rgba(228,181,92,.16) !important;

    border-bottom:
        1px solid rgba(228,181,92,.14) !important;
}


/* ==========================================================
   PROCESS
   ========================================================== */

.process{
    background:
        radial-gradient(
            750px 460px at 82% 12%,
            rgba(221,166,70,.105),
            transparent 70%
        ),

        linear-gradient(
            180deg,
            rgba(42,32,20,.64),
            rgba(22,17,12,.58)
        ) !important;

    border-color:
        rgba(225,178,89,.15) !important;
}


/* ==========================================================
   HEADER — NEW DISTINCT IDENTITY
   Warm graphite glass instead of pure black.
   ========================================================== */

.header,
.header.scrolled{
    background:

        linear-gradient(
            105deg,
            rgba(34,26,17,.98) 0%,
            rgba(45,33,19,.98) 47%,
            rgba(28,22,16,.98) 100%
        ) !important;

    border-bottom:
        1px solid rgba(229,183,94,.27) !important;

    box-shadow:
        0 14px 45px rgba(0,0,0,.32),
        inset 0 -1px rgba(255,225,164,.025) !important;

    backdrop-filter:
        blur(18px) saturate(115%) !important;

    -webkit-backdrop-filter:
        blur(18px) saturate(115%) !important;
}


/* Header nav */
nav a{
    color:#c8bfae !important;
}

nav a:hover{
    color:#fff2d3 !important;
}

nav a.active{
    color:#f2c56e !important;
}

nav a::after{
    background:
        linear-gradient(
            90deg,
            #a66f23,
            #f1c76f
        ) !important;
}


/* Header CTA gets richer luxury finish */
.nav-cta{
    background:
        linear-gradient(
            110deg,
            #b47a26 0%,
            #e3ad4d 47%,
            #f4ce78 100%
        ) !important;

    color:#171006 !important;

    border:
        1px solid rgba(255,224,157,.24) !important;

    box-shadow:
        0 9px 28px rgba(171,112,29,.22),
        inset 0 1px rgba(255,244,212,.38) !important;
}


/* ==========================================================
   HERO SHOULD SIT ON THE NEW BACKGROUND
   ========================================================== */

.hero::before{
    width:950px !important;
    height:700px !important;

    left:-560px !important;
    top:40px !important;

    background:
        radial-gradient(
            ellipse,
            rgba(213,157,60,.15),
            transparent 69%
        ) !important;
}


/* Hero visual panel remains darker for contrast */
.dashboard{
    background:
        linear-gradient(
            145deg,
            rgba(28,22,14,.94),
            rgba(13,11,8,.96)
        ) !important;

    border-color:
        rgba(229,184,95,.29) !important;
}


/* ==========================================================
   CARDS — LIFT THEM FROM THE NEW CANVAS
   ========================================================== */

.service-card,
.service-card.featured{
    background:
        linear-gradient(
            145deg,
            rgba(39,30,19,.90),
            rgba(18,15,11,.94)
        ) !important;

    border-color:
        rgba(228,181,92,.20) !important;
}


.office-stage{
    background:
        linear-gradient(
            145deg,
            rgba(40,31,20,.92),
            rgba(17,14,10,.95)
        ) !important;

    border-color:
        rgba(228,181,93,.21) !important;
}


.contact-wrap{
    background:
        radial-gradient(
            650px 480px at 0% 100%,
            rgba(200,143,47,.15),
            transparent 70%
        ),

        linear-gradient(
            145deg,
            rgba(43,32,19,.94),
            rgba(17,14,10,.97)
        ) !important;

    border-color:
        rgba(231,184,94,.23) !important;
}


/* ==========================================================
   MOBILE
   ========================================================== */

@media(max-width:900px){

    body{
        background-attachment:scroll !important;
    }

}


@media(max-width:600px){

    body{
        background-image:

            radial-gradient(
                ellipse 600px 500px at 100% 5%,
                rgba(191,137,50,.20),
                transparent 68%
            ),

            linear-gradient(
                145deg,
                #17130e,
                #261d12 48%,
                #100d0a
            ) !important;
    }

    .header,
    .header.scrolled{
        background:
            rgba(35,27,18,.98) !important;
    }

}


/* ===== END CORPORATE PRO V42 ===== */


/* ==========================================================
   CORPORATE PRO V44
   CANONICAL RESPONSIVE OWNER
   Existing #menu + #nav only
   Desktop > 900px untouched
   ========================================================== */


/* ===================== TABLET + MOBILE ===================== */

@media (max-width:900px){

  html,
  body{
    width:100%;
    max-width:100%;
    overflow-x:hidden !important;
  }

  body{
    background-attachment:scroll !important;
  }

  .shell{
    width:min(100% - 34px,700px) !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }


  /* ---------- HEADER ---------- */

  .header,
  .header.scrolled{
    width:100%;
  }

  .nav{
    height:72px !important;
    gap:16px !important;
  }

  .brand{
    flex:0 1 auto;
    min-width:0;
  }

  #nav{
    display:none !important;
    position:absolute !important;

    top:72px !important;
    left:17px !important;
    right:17px !important;

    width:auto !important;
    max-width:none !important;

    margin:0 !important;
    padding:14px !important;

    flex-direction:column !important;
    align-items:stretch !important;
    gap:2px !important;

    border:1px solid rgba(218,166,75,.24) !important;
    border-radius:0 0 16px 16px !important;

    background:
      linear-gradient(
        150deg,
        rgba(42,32,20,.985),
        rgba(15,13,10,.99)
      ) !important;

    box-shadow:
      0 25px 55px rgba(0,0,0,.42) !important;

    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);

    z-index:100 !important;
  }

  #nav.open{
    display:flex !important;
  }

  #nav a{
    display:block !important;
    width:100% !important;

    padding:12px 13px !important;

    color:#ddd3c2 !important;
    font-size:13px !important;
    line-height:1.3 !important;

    border-bottom:
      1px solid rgba(221,173,83,.08);
  }

  #nav a:last-child{
    border-bottom:0;
  }

  #nav a::after{
    display:none !important;
  }

  #nav a:hover,
  #nav a.active{
    color:#f0c36b !important;
  }

  .menu{
    display:block !important;
    flex:0 0 auto !important;

    position:relative !important;
    z-index:101 !important;
  }


  /* ---------- HERO ---------- */

  .hero{
    grid-template-columns:minmax(0,1fr) !important;

    min-height:auto !important;

    padding-top:125px !important;
    padding-bottom:76px !important;

    gap:55px !important;
  }

  .hero-copy{
    width:100% !important;
    min-width:0 !important;
    text-align:center !important;
  }

  .hero-copy .eyebrow{
    justify-content:center !important;
  }

  .hero h1{
    max-width:680px !important;
    margin-left:auto !important;
    margin-right:auto !important;

    font-size:clamp(46px,8vw,66px) !important;
    line-height:.98 !important;
  }

  .hero-text{
    max-width:570px !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }

  .hero-actions,
  .trust-row{
    justify-content:center !important;
  }

  .hero-visual{
    width:min(100%,650px) !important;
    max-width:100% !important;

    min-width:0 !important;
    margin:0 auto !important;
  }

  .dashboard{
    max-width:100% !important;
  }

  .float-card{
    max-width:42% !important;
  }


  /* ---------- GENERAL GRIDS ---------- */

  .about-grid,
  .contact-wrap{
    grid-template-columns:minmax(0,1fr) !important;
  }

  .services-grid{
    grid-template-columns:
      repeat(2,minmax(0,1fr)) !important;
  }

  .projects{
    grid-template-columns:
      repeat(2,minmax(0,1fr)) !important;
  }

  .process-grid{
    grid-template-columns:
      repeat(2,minmax(0,1fr)) !important;
  }

  .service-card,
  .project,
  .contact-copy,
  .contact-form{
    min-width:0 !important;
  }

  .portfolio-head{
    display:block !important;
  }

  .portfolio-head > p{
    margin-top:20px !important;
  }

}


/* ======================== PHONES =========================== */

@media (max-width:600px){

  .shell{
    width:calc(100% - 28px) !important;
    max-width:none !important;
  }


  /* ---------- HEADER ---------- */

  .nav{
    height:66px !important;
    gap:10px !important;
  }

  .brand{
    font-size:16px !important;
    gap:8px !important;
  }

  .brand-mark{
    transform:rotate(-7deg) scale(.9) !important;
    transform-origin:left center !important;
  }

  .nav-cta{
    display:none !important;
  }

  .menu{
    margin-left:auto !important;
  }

  #nav{
    top:66px !important;
    left:14px !important;
    right:14px !important;
  }


  /* ---------- HERO ---------- */

  .hero{
    padding-top:104px !important;
    padding-bottom:64px !important;
    gap:38px !important;
  }

  .eyebrow{
    font-size:9px !important;
    letter-spacing:1.5px !important;
  }

  .hero h1{
    font-size:clamp(38px,11.2vw,48px) !important;
    letter-spacing:-1.5px !important;
    line-height:.98 !important;
  }

  .hero-text{
    font-size:13px !important;
    line-height:1.7 !important;
  }

  .hero-actions{
    width:100% !important;
    flex-direction:column !important;
    gap:10px !important;
  }

  .hero-actions .button{
    width:100% !important;
    max-width:100% !important;

    justify-content:center !important;
    text-align:center !important;
  }

  .trust-row{
    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;

    width:100% !important;
    gap:7px !important;

    margin-top:34px !important;
  }

  .trust-row div{
    min-width:0 !important;
    text-align:center !important;
  }

  .trust-row strong{
    font-size:11px !important;
  }

  .trust-row span{
    font-size:7px !important;
  }


  /* ---------- HERO VISUAL ---------- */

  .hero-visual{
    width:100% !important;
    min-height:310px !important;
  }

  .dashboard{
    width:100% !important;
    max-width:100% !important;

    transform:none !important;

    margin:0 auto !important;
  }

  .fc-one{
    left:0 !important;
  }

  .fc-two{
    right:0 !important;
  }

  .float-card{
    max-width:46% !important;
    padding:9px 10px !important;
  }


  /* ---------- LOGO STRIP ---------- */

  .logo-inner{
    flex-wrap:wrap !important;
    justify-content:center !important;

    min-height:auto !important;

    padding:22px 0 !important;
    gap:16px 24px !important;
  }

  .logo-inner b{
    font-size:9px !important;
  }


  /* ---------- SECTIONS ---------- */

  .section{
    padding-top:76px !important;
    padding-bottom:76px !important;
  }

  .section-heading.centered{
    margin-bottom:38px !important;
  }

  .section-heading h2,
  .contact-copy h2{
    font-size:clamp(32px,9.5vw,40px) !important;
    line-height:1.04 !important;
    letter-spacing:-1.3px !important;
  }

  .section-heading p,
  .contact-copy p{
    font-size:12px !important;
    line-height:1.75 !important;
  }


  /* ---------- ABOUT ---------- */

  .about-grid{
    grid-template-columns:minmax(0,1fr) !important;
    gap:36px !important;
    margin-top:42px !important;
  }

  .office-stage{
    width:100% !important;
    min-height:310px !important;
  }


  /* ---------- SERVICES ---------- */

  .services-grid{
    grid-template-columns:minmax(0,1fr) !important;
    gap:14px !important;
  }

  .service-card,
  .service-card.featured{
    width:100% !important;
    min-height:0 !important;
  }


  /* ---------- PORTFOLIO ---------- */

  .projects{
    grid-template-columns:minmax(0,1fr) !important;
    gap:20px !important;
  }

  .project-large{
    grid-column:auto !important;
  }

  .project-preview,
  .project-large .project-preview{
    width:100% !important;
    min-height:280px !important;
  }

  .browser{
    max-width:100% !important;
  }


  /* ---------- PROCESS ---------- */

  .process-grid{
    grid-template-columns:minmax(0,1fr) !important;
    margin-top:38px !important;
  }

  .process-grid > div{
    width:100% !important;

    padding:24px 20px !important;

    border-right:1px solid var(--line) !important;
    border-top:1px solid var(--line) !important;
  }

  .process-grid > div:first-child{
    border-top:0 !important;
  }


  /* ---------- CONTACT ---------- */

  .contact-wrap{
    grid-template-columns:minmax(0,1fr) !important;

    width:100% !important;

    padding:24px 16px !important;
    gap:34px !important;
  }

  .contact-form{
    width:100% !important;
    max-width:100% !important;

    padding:20px 16px !important;
  }

  .field-row{
    grid-template-columns:minmax(0,1fr) !important;
  }

  input,
  select,
  textarea{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
  }


  /* ---------- FOOTER ---------- */

  .footer-main{
    min-height:auto !important;

    display:block !important;

    padding:40px 0 !important;
  }

  .footer-main p{
    margin:18px 0 !important;
  }

  .footer-links{
    margin:0 !important;

    flex-wrap:wrap !important;
    gap:14px 20px !important;
  }

  .footer-bottom{
    min-height:auto !important;

    padding:18px 0 !important;

    flex-direction:column !important;
    align-items:flex-start !important;

    gap:9px !important;
  }

}


/* ====================== SMALL PHONE ======================== */

@media (max-width:390px){

  .shell{
    width:calc(100% - 24px) !important;
  }

  .brand{
    font-size:15px !important;
  }

  .hero{
    padding-top:96px !important;
  }

  .hero h1{
    font-size:clamp(35px,10.8vw,42px) !important;
  }

  .hero-visual{
    min-height:285px !important;
  }

  .float-card{
    transform:scale(.9) !important;
  }

  .section{
    padding-top:68px !important;
    padding-bottom:68px !important;
  }

  .contact-wrap{
    padding:20px 12px !important;
  }

}


/* ======================= 320px SAFE ======================== */

@media (max-width:340px){

  .shell{
    width:calc(100% - 20px) !important;
  }

  .brand{
    font-size:14px !important;
  }

  .hero h1{
    font-size:34px !important;
  }

  .trust-row{
    grid-template-columns:1fr !important;
    gap:12px !important;
  }

  .float-card{
    display:none !important;
  }

  .contact-form{
    padding:18px 12px !important;
  }

}


/* ===== END CORPORATE PRO V44 ===== */


/* ==========================================================
   CORPORATE PRO V45
   CINEMATIC HEADLINE MOTION + MOBILE DETAIL TUNING
   V44 responsive structure preserved
   ========================================================== */


/* ----------------------------------------------------------
   PREMIUM HEADLINE MOTION

   White -> Champagne -> Warm Gold -> Ivory -> White

   IMPORTANT:
   - headings only
   - buttons untouched
   - normal text untouched
   - pricing/form/content untouched
   ---------------------------------------------------------- */

@keyframes cp45HeadlineFlow{
  0%{
    background-position:0% 50%;
  }

  50%{
    background-position:100% 50%;
  }

  100%{
    background-position:0% 50%;
  }
}


/* Hero main headline */

.hero h1{
  background-image:
    linear-gradient(
      105deg,
      #fffdf7 0%,
      #ffffff 17%,
      #f4ddb0 34%,
      #d7a13f 50%,
      #f5cf78 63%,
      #fff4d5 79%,
      #ffffff 100%
    ) !important;

  background-size:240% 100% !important;
  background-position:0% 50%;

  -webkit-background-clip:text !important;
  background-clip:text !important;

  -webkit-text-fill-color:transparent !important;
  color:transparent !important;

  animation:
    cp45HeadlineFlow 8s ease-in-out infinite !important;

  filter:
    drop-shadow(0 2px 14px rgba(215,161,63,.08));
}


/*
 Existing highlighted span remains slightly richer gold,
 but participates in the same cinematic motion.
*/

.hero h1 span{
  background-image:
    linear-gradient(
      105deg,
      #f8df9d 0%,
      #c78b29 25%,
      #ffe3a0 48%,
      #d49a36 70%,
      #fff0c2 100%
    ) !important;

  background-size:220% 100% !important;

  -webkit-background-clip:text !important;
  background-clip:text !important;

  -webkit-text-fill-color:transparent !important;
  color:transparent !important;

  animation:
    cp45HeadlineFlow 7s ease-in-out infinite !important;
}


/* Main section headlines */

.section-heading h2,
.contact-copy h2{
  background-image:
    linear-gradient(
      108deg,
      #ffffff 0%,
      #fffaf0 23%,
      #e4bd70 43%,
      #f5d999 57%,
      #fff7e7 76%,
      #ffffff 100%
    ) !important;

  background-size:230% 100% !important;
  background-position:0% 50%;

  -webkit-background-clip:text !important;
  background-clip:text !important;

  -webkit-text-fill-color:transparent !important;
  color:transparent !important;

  animation:
    cp45HeadlineFlow 10s ease-in-out infinite !important;
}


/* Section emphasis words */

.section-heading h2 em,
.contact-copy h2 em{
  background-image:
    linear-gradient(
      105deg,
      #f8dc9c,
      #c88b2b,
      #ffe6a7,
      #dca849,
      #fff0c7
    ) !important;

  background-size:220% 100% !important;

  -webkit-background-clip:text !important;
  background-clip:text !important;

  -webkit-text-fill-color:transparent !important;
  color:transparent !important;

  animation:
    cp45HeadlineFlow 8.5s ease-in-out infinite !important;
}


/* ----------------------------------------------------------
   MOBILE DETAIL TUNING
   Structure remains owned by V44
   ---------------------------------------------------------- */

@media (max-width:600px){

  /*
   Eyebrow was visually too tiny in the 440px screenshot.
  */

  .eyebrow{
    font-size:10px !important;
    line-height:1.4 !important;
    letter-spacing:1.65px !important;
  }

  .eyebrow span{
    width:20px !important;
  }


  /* Hero supporting copy */

  .hero-text{
    max-width:390px !important;

    font-size:13.5px !important;
    line-height:1.72 !important;

    color:rgba(231,222,207,.72) !important;
  }


  /* Hero CTAs stay full-width but become easier to read */

  .hero-actions .button{
    min-height:48px !important;

    font-size:12px !important;
    line-height:1.2 !important;
  }


  /* Trust / stats row */

  .trust-row{
    margin-top:31px !important;
  }

  .trust-row strong{
    font-size:11.5px !important;
    line-height:1.25 !important;
  }

  .trust-row span{
    margin-top:3px !important;

    font-size:8px !important;
    line-height:1.35 !important;

    color:rgba(219,207,188,.56) !important;
  }


  /* Dashboard internal readability */

  .dash-logo{
    min-width:48px !important;
  }

  .dash-nav{
    gap:8px !important;
  }

  .dash-nav i{
    width:22px !important;
  }

  .mini-label{
    width:62px !important;
  }

  .float-card small{
    font-size:8.5px !important;
    line-height:1.2 !important;
  }

  .float-card strong{
    font-size:10.5px !important;
    line-height:1.25 !important;
  }


  /* Section eyebrow/head supporting copy */

  .section-heading p,
  .contact-copy p{
    max-width:430px !important;

    font-size:12.5px !important;
    line-height:1.75 !important;

    color:rgba(220,210,194,.69) !important;
  }


  /* Cards were visually compressed; improve readable copy */

  .service-card h3{
    font-size:19px !important;
    line-height:1.2 !important;
  }

  .service-card p{
    min-height:0 !important;

    font-size:12px !important;
    line-height:1.7 !important;
  }

  .service-card a{
    font-size:11px !important;
  }


  /* Process */

  .process-grid span{
    font-size:9px !important;
  }

  .process-grid h3{
    margin-top:22px !important;

    font-size:18px !important;
  }

  .process-grid p{
    font-size:11.5px !important;
    line-height:1.7 !important;
  }


  /* Contact form readability */

  .contact-form label > span{
    font-size:10px !important;
  }

  input,
  select,
  textarea{
    font-size:13px !important;
  }

}


/* 390 and below: keep premium hierarchy without crushing text */

@media (max-width:390px){

  .eyebrow{
    font-size:9px !important;
    letter-spacing:1.4px !important;
  }

  .hero-text{
    font-size:13px !important;
  }

  .hero-actions .button{
    min-height:46px !important;
  }

}


/* Accessibility */

@media (prefers-reduced-motion:reduce){

  .hero h1,
  .hero h1 span,
  .section-heading h2,
  .section-heading h2 em,
  .contact-copy h2,
  .contact-copy h2 em{
    animation:none !important;
    background-position:50% 50% !important;
  }

}


/* ===== END CORPORATE PRO V45 ===== */


/* ==========================================================
   CORPORATE PRO V46
   OBSIDIAN PLUM GLASS HEADER
   HEADER VISUAL ONLY
   ========================================================== */

.header,
.header.scrolled{
  background:
    radial-gradient(
      700px 120px at 18% -30%,
      rgba(129,73,151,.17),
      transparent 62%
    ),
    radial-gradient(
      520px 130px at 84% -45%,
      rgba(209,157,71,.08),
      transparent 68%
    ),
    linear-gradient(
      108deg,
      rgba(18,15,24,.985) 0%,
      rgba(31,20,37,.985) 48%,
      rgba(14,13,19,.99) 100%
    ) !important;

  border-bottom:
    1px solid rgba(211,161,77,.20) !important;

  box-shadow:
    0 10px 35px rgba(0,0,0,.18),
    inset 0 -1px 0 rgba(255,255,255,.018) !important;

  backdrop-filter:blur(18px) saturate(125%);
  -webkit-backdrop-filter:blur(18px) saturate(125%);
}


/* Navigation harmonized with plum glass */

nav a{
  color:rgba(232,224,218,.72) !important;
}

nav a:hover{
  color:#fff8ea !important;
}

nav a.active{
  color:#f3c86e !important;
}

nav a::after{
  background:
    linear-gradient(
      90deg,
      #b47a2d,
      #f0c568,
      #ffe2a0
    ) !important;

  box-shadow:
    0 0 12px rgba(237,187,91,.22);
}


/* Keep CTA gold, but increase contrast against new header */

.header .nav-cta{
  border-color:rgba(255,221,150,.42) !important;

  box-shadow:
    0 8px 25px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.22) !important;
}


/* Mobile dropdown belongs to the same header identity */

@media (max-width:900px){

  #nav{
    background:
      radial-gradient(
        420px 180px at 20% 0%,
        rgba(119,65,140,.16),
        transparent 68%
      ),
      linear-gradient(
        145deg,
        rgba(29,19,35,.99),
        rgba(13,12,18,.995)
      ) !important;

    border-color:
      rgba(220,170,82,.20) !important;

    box-shadow:
      0 24px 55px rgba(0,0,0,.46) !important;
  }

  #nav a{
    color:rgba(235,227,219,.78) !important;
  }

  #nav a:hover,
  #nav a.active{
    color:#f2c66c !important;
  }

}


/* ===== END CORPORATE PRO V46 ===== */