:root {
--black:#050505;
--panel:#1d1d1d;
--line:#343434;
--white:#f7f7f4;
--muted:#aaa;
--acid:#d8ff3e;
--violet:#7355ff;
--orange:#ff8c2b;
--teal:#206f66;
--cyan:#59d8c7;
--font:'Inter',Arial,sans-serif;
--navy:#1f2f46;
}

.material-symbols-outlined {
  font-size:5rem;
  margin:0 auto;
  width:100%;
  color:#f2f2f2;
  font-variation-settings:
  'FILL' 0,
  'wght' 100,
  'GRAD' 0,
  'opsz' 48
}

.enterprise .material-symbols-outlined {
  font-size:3rem !important;
  color:var(--violet);
    font-variation-settings:
  'wght' 300
}

.vendor .material-symbols-outlined {
  font-size:3rem !important;
  color:var(--orange);
    font-variation-settings:
  'wght' 300
}




/*
.col-01, .col-02, .col-03, .col-04 {
        padding:4px 8px;
        border-radius:8px;
}


.col-01 {
    background-color:#4734b7;
}

.col-02 {
    background-color:#96501c;
}

.col-03 {
    background-color:#206f66;
}

.col-04 {
    background-color:#111111;
}*/

* {
box-sizing:border-box;
}

html {
scroll-behavior:smooth;
}

body {
margin:0;
background:var(--black);
color:var(--white);
font-family:var(--font);
font-size:17px;
line-height:1.55;
}

a {
color:inherit;
text-decoration:none;
}

button,input,textarea {
font:inherit;
}

.wrap {
width:min(1220px,calc(100% - 40px));
margin:auto;
}

.skip {
position:fixed;
left:10px;
top:-60px;
z-index:99;
background:#fff;
color:#000;
padding:10px;
}

.skip:focus {
top:10px;
}

.sr-only {
position:absolute;
width:1px;
height:1px;
overflow:hidden;
clip:rect(0,0,0,0);
}


.header {
position:fixed;
top:20px;
/*left:0;
width:100%;*/
max-width:1200px;
width: 96%;

  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  list-style: none;
  /* Add your background, padding, and z-index here */
z-index:20;
background:rgba(5,5,5,.84);
backdrop-filter:blur(16px);
border-bottom:1px solid rgba(255,255,255,.06);
margin:10px auto 0;

}

.glass{
    /*background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(0,0,0, 0));*/
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.75));
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 200px;
    border:1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
margin:0 auto;
}


.nav {
height:100px;
display:flex;
align-items:center;
justify-content:space-between;

}

.logo {
display:flex;
align-items:center;
gap:12px;
font-weight:600;
letter-spacing:-.02em;
    z-index: 20;
}

.logo-size {
height:64px;
}

.logo-glyph {

position:relative;
display:inline-block;
}

.logo-glyph i {
position:absolute;
display:block;
width:17px;
height:5px;
border-radius:5px;
background:#fff;
transform:rotate(45deg);
left:1px;
}

.logo-glyph i:first-child {
top:2px;
}

.logo-glyph i:nth-child(2) {
top:9px;
left:6px;
}

.logo-glyph i:last-child {
top:16px;
}

.nav-links {
display:flex;
align-items:center;
gap:32px;
font-size:15px;
}

.nav-links>a:not(.button) {
color:#c8c8c8;
}

.nav-links>a:not(.button):hover {
color:#ffffff;
}

.nav-links>a:hover,.nav-links>a[aria-current=page] {
color:#f2f2f2;
}

.nav-toggle {
display:none;
background:none;
border:0;
}

.nav-toggle span {
display:block;
width:24px;
height:2px;
background:#fff;
margin:6px;
}


.button {
display:inline-flex;
align-items:center;
justify-content:space-between;
gap:25px;
border:0;
border-radius:999px;
padding:13px 21px;
font-weight:500;
cursor:pointer;
transition:.2s;
}

.button.light {
background:#fff;
color:#070707;
}

.button.dark {
background:#090909;
color:#fff;
}

.button.ghost {
background:#262626;
color:#fff;
}

.button.small {
padding:10px 17px;
}

.button:hover {
transform:scale(1.05);
filter:brightness(.9);
background:#1f2f46;
color:#f2f2f2;
}

.button.dark:hover {
transform:scale(1.05);
filter:brightness(.9);
background:#fff;
color:#090909;
}




/* Container section */
.video-hero {
  position: relative;
  width: 100%;
  height: 100vh; /* Full viewport height, adjust as needed */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden; /* Prevents video overflow from causing scrollbars */
}

/* Background video styling */
.bg-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* Forces video to scale and fill container perfectly */
  z-index: 1; /* Lowest layer */
  opacity: 0.75;
}

/* Semi-transparent overlay layer */
.video-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4); /* Adjust opacity (0.4) to lighten/darken */
  z-index: 2; /* Sits above the video */
}

/* Foreground content layout */
.video-content {
  position: relative;
  z-index: 3; /* Sits above the video and the overlay */
  color: #ffffff;
  padding: 0 20px;
}

/* Optional content aesthetics */
.video-content h1 {
  font-size: 3.5rem;
  margin-bottom: 1rem;
}

.video-content p {
  font-size: 1.25rem;
  margin-bottom: 2rem;
}

.btn {
  display: inline-block;
  padding: 12px 30px;
  background: #ffffff;
  color: #333333;
  text-decoration: none;
  border-radius: 4px;
  font-weight: bold;
  transition: background 0.3s ease;
}

.btn:hover {
  background: #1f2f46;
} 




.kicker {
font-size:13px;
color:#fff;
margin:0 0 22px;
}

/*
.kicker:before {
content:'●';
font-size:9px;
color:var(--acid);
margin-right:10px;
}*/

.hero {
min-height:680px;
padding:180px 0 100px;
display:flex;
align-items:center;
}

.hero-home {
min-height:850px;
  z-index: 3; /* Sits above the video and the overlay */
}

.hero h1 {
font-size:clamp(58px,7.2vw,110px);
font-weight:400;
line-height:.98;
letter-spacing:-.065em;
max-width:1120px;
margin:0;
}

.hero-copy {
font-size:20px;
line-height:1.45;
color:#bbb;
max-width:710px;
margin:35px 0 0;
}

.actions {
display:flex;
gap:12px;
margin-top:42px;
}

.signal-tabs {
display:grid;
grid-template-columns:repeat(3,1fr);
gap:14px;
margin-top:115px;
}

.signal-tabs>div {
min-height:125px;
border:1px solid var(--line);
background:var(--panel);
border-radius:8px;
padding:22px;
display:flex;
flex-direction:column;
justify-content:flex-end;
position:relative;
}

.signal-tabs>div:first-child {
background:#f5f5f2;
color:#111;
}

.signal-tabs b {
font-size:17px;
}

.signal-tabs small {
color:#999;
margin-top:5px;
}

.signal-dot {
position:absolute;
top:18px;
left:20px;
width:14px;
height:14px;
border-radius:4px;
background:var(--navy);
}

.signal-tabs>div:nth-child(2) .signal-dot {
background:var(--orange);
}

.signal-tabs>div:nth-child(3) .signal-dot {
background:var(--cyan);
}


.section {
padding:125px 0;
border-bottom:1px solid #222;
}

.section-white {
background:var(--white);
color:#111;
}

.section-white .kicker,.section-white .card p {
color:#666;
}

.statement h2,.section-head h2,.intro-grid h2,.operator h2,.contact h2 {
font-size:clamp(46px,6vw,84px);
font-weight:400;
letter-spacing:-.055em;
line-height:1.02;
margin:0;
}

.statement h2 {
max-width:900px;
}

.statement .body-copy {
max-width:700px;
margin:65px 0 0 auto;
}

.intro-grid {
display:grid;
grid-template-columns:1.1fr .9fr;
gap:100px;
}

.body-copy {
font-size:19px;
color:#aaa;
}

.body-copy p {
margin:0 0 25px;
}

.section-head {
display:grid;
/*grid-template-columns: 1fr .35fr;
gap:70px;*/
align-items:start;
margin-bottom:70px;
}

.section-head h2 {
max-width:950px;
}

.enterprise .kicker, .vendor .kicker, .about .kicker {
text-transform: uppercase;
font-size:14px;
font-weight: 600;
width:fit-content;
}

.enterprise .kicker {
color:var(--violet);
}

.vendor .kicker {
color:var(--orange);
}

.about .kicker {
color:var(--teal);
}




.cards {
display:grid;
grid-template-columns:repeat(4,1fr);
gap:14px;
}

.card {
border:1px solid var(--line);
border-radius:8px;
background:var(--panel);
padding:24px;
min-height:300px;
/*display:flex;
flex-direction:column;*/
    display: grid;
    grid-template-rows: 0.5fr 0.5fr 1fr;}

    .card:hover {
background:var(--navy);
}

.about .card {
border:1px solid #004d46;
    grid-template-rows: 1.5fr 1fr;
}



.chip {
display:inline-flex;
align-self:flex-start;
background:#2e2e2e;
color:#ddd;
border-radius:12px;
padding:8px 32px;
font-size:1em;
}

.card:nth-child(1) .chip {
background:#4734b7;
}

.card:nth-child(2) .chip {
background:#96501c;
}

.card:nth-child(3) .chip {
background:#206f66;
}

.card h3 {
font-size:29px;
font-weight:400;
letter-spacing:-.04em;
margin:0;
}

.card p {
font-size:15px;
color:#aaa;
}

.audience-cards {
display:grid;
grid-template-columns:1fr 1fr;
gap:16px;
}

.audience {
min-height:490px;
background:#fff;
border:1px solid #ddd;
border-radius:24px;
padding:30px;
display:flex;
flex-direction:column;
transition:.2s;
}

.audience:nth-child(2) {
background:#ececec;
}

.audience .chip {
background:var(--violet);
color:#fff;
}

.audience:nth-child(2) .chip {
background:var(--orange);
}






.audience h3 {
font-size:45px;
line-height:1.05;
letter-spacing:-.05em;
font-weight:400;
margin:auto 0 20px;
max-width:520px;
}

.audience p {
color:#666;
max-width:550px;
}

.audience b {
border-top:1px solid #ccc;
padding-top:18px;
margin-top:30px;
display:flex;
justify-content:space-between;
font-size:14px;
}

.audience:hover {
transform:translateY(-4px);
cursor:pointer;
background:rgba(0,0,0,0.1);
}

.inline-link {
display:inline-block;
border-bottom:1px solid;
padding-bottom:3px;
margin-top:15px;
}

.operator {
background:#111;
}

.closing {
background:var(--navy);
color:#f2f2f2;
padding:100px 0;
}

.closing .kicker {
font-size: 1.2em;
width:69%;
}

.closing .kicker:before {
color:#111;
}

.closing h2 {
font-size:clamp(48px,7vw,90px);
font-weight:400;
line-height:1;
letter-spacing:-.06em;
max-width:1000px;
margin:0 0 45px;
}




.hook1 {
  color:var(--violet);
  font-style: italic;
 }

 .hook2 {
  color:var(--orange);
  font-style: italic;
 }

  .hook3 {
  color:var(--teal);
  font-style: italic;
 }

.subchip1 .chip {
background:var(--violet);
color:#fff;
margin-bottom: 1em;
}

.subchip2 .chip {
background:var(--orange);
color:#fff;
margin-bottom: 1em;
}

.subchip3 .chip {
background:var(--teal);
color:#fff;
margin-bottom: 1em;
}


.benefits {
display:grid;
grid-template-columns:repeat(3,1fr);
gap:20px;

}

.benefit {
background:#f7f7f4;
min-height:200px;
padding:18px;
display:flex;
flex-direction:column;
border-top:1px solid #ddd;
}

.benefite span {
font-size:24px;
color:var(--violet);
}

.benefitv span {
font-size:24px;
color:var(--orange);
}

.benefit p {
font-size:18px;
font-weight:500;
}

.process {
list-style:none;
padding:0;
margin:0;
border-top:1px solid var(--line);
}

.process li {
display:grid;
grid-template-columns:50px .7fr 1fr;
gap:30px;
border-bottom:1px solid var(--line);
padding:28px 0;
align-items: center;
}

.process li>span {
font-size:14px;
}

.processe li>span {
color:var(--violet);
}

.processv li>span {
color:var(--orange);
}

.process h3 {
font-size:24px;
font-weight:400;
margin:0;
}

.process p {
color:#999;
margin:0;
}

.team {
display:grid;
grid-template-columns:repeat(3,1fr);
gap:14px;
}

.person {
border:1px solid #ddd;
border-radius:8px;
padding:0 0 20px 0;
}

.person-mark {
/*height:260px;*/
border-radius:16px;
display:grid;
place-items:center;
font-size:75px;
letter-spacing:-.08em;
margin-bottom:20px;
}

.about .img-frame {
    aspect-ratio: 2 / 1;

  overflow: hidden; /* Crops any overflow outside the frame */
  /* border: 4px solid #fff; /* Optional visible frame */
  /* box-shadow: 0 4px 8px rgba(0,0,0,0.2); */
    border-radius: 8px 8px 0 0;
}

.about .img-frame img {
  width: 100%;
  height: 100%;

  object-fit: cover; /* Crops image nicely to fit dimensions */
  transition: transform 0.4s ease; /* Smooth zoom timing */

}

.about .img-frame:hover img {
  transform: scale(1.025); /* Zooms the image in by 20% */
}


.person .chip {
background:var(--teal);
color:#fff;
margin-left:20px;
}

.person .rolebox {
color:var(--teal);
margin-left:20px;
}

.person h3 {
font-size:28px;
font-weight:400;
letter-spacing:-.04em;
padding:0 20px;
    margin-bottom: 5px;
}

.person p {
color:#666;
font-size:15px;
padding:0 20px;
}

.asset-note {
color:#777;
font-size:13px;
margin-top:25px;
}

.quote {
padding:110px 0;
background:var(--navy);
}

.quote blockquote {
font-size:clamp(45px,6vw,82px);
font-weight:400;
line-height:1.05;
letter-spacing:-.055em;
margin:0;
}

.quote cite {
display:block;
margin-top:30px;
font-style:normal;
}

.contact-grid {
display:grid;
grid-template-columns:.8fr 1.2fr;
gap:90px;
margin-top: 100px;
}

.form-panel {
background:var(--panel);
border:1px solid var(--line);
border-radius:9px;
padding:40px;
}

form label,legend {
display:block;
font-size:13px;
margin-bottom:10px;
}

fieldset {
border:0;
padding:0;
margin:0 0 25px;
}

.choices,.field-row {
display:grid;
grid-template-columns:1fr 1fr;
gap:12px;
}

.choices label {
position:relative;
}

.choices input {
position:absolute;
opacity:0;
}

.choices span {
display:block;
background:#282828;
border:1px solid #444;
padding:16px;
border-radius:7px;
height:100%;
cursor:pointer;
}

.choices small {
display:block;
color:#999;
margin-top:5px;
}

.choices input:checked+span {

background:rgba(255,255,255,0.1);
}

 .ent input:checked+span {
border-color:var(--violet);
}

 .inn input:checked+span {
border-color:var(--orange);
}

.field-row label,form>label {
margin-bottom:22px;
}

input,textarea {
display:block;
width:100%;
background:transparent;
color:#fff;
border:0;
border-bottom:1px solid #666;
padding:12px 2px;
outline:none;
}

input:focus,textarea:focus {
border-color:var(--teal);
}

textarea {
resize:vertical;
}

.errors {
background:#522820;
padding:15px;
border-radius:7px;
margin-bottom:22px;
}

.success span {
display:grid;
place-items:center;
width:50px;
height:50px;
border-radius:50%;
background:var(--teal);
color:#111;
}

.success h2 {
font-size:42px;
margin:22px 0 8px;
}

.footer {
padding:90px 0 28px;
}

.footer-top {
display:grid;
grid-template-columns:2fr 1fr;
gap:50px;
}

.footer h2 {
font-size:55px;
font-weight:400;
line-height:1.03;
letter-spacing:-.05em;
max-width:650px;
margin:60px 0;
}

.footer-nav {
display:grid;
/*grid-template-columns:1fr 1fr;*/
gap:15px;
font-size:14px;
color:#aaa;
    grid-auto-flow: column;
}

.footer-bottom {
border-top:1px solid var(--line);
padding-top:22px;
display:flex;
justify-content:space-between;
color:#777;
font-size:12px;
}

.reveal {
opacity:0;
transform:translateY(15px);
transition:.55s;
}

.reveal.is-visible {
opacity:1;
transform:none;
}




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

;
}


.hide {display:none !important;}

@media(max-width:900px) {

.header{
    max-width:90%;
    min-width: 90%;

}

.nav-toggle {
display:block;
}

.nav-links {
display:none;
position:absolute;
top:50px;
width: 90%;
        left: 50%;
        transform: translateX(-50%);
padding:25px;
background:#111;
flex-direction:column;
align-items:stretch;
z-index: 5;
        border-radius: 0 0 2em 2em;
        border-right: 1px solid rgba(255, 255, 255, 0.18);
        border-left: 1px solid rgba(255, 255, 255, 0.18);
        border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}

.nav {
height:50px;
}
        

.nav-links.is-open {
display:flex;
}

.signal-tabs,.cards {
grid-template-columns:1fr 1fr;
}

.intro-grid,.section-head,.contact-grid {
grid-template-columns:1fr;
}

.section-head {
gap:25px;
}

.about .img-frame {
    max-width: 100%;
    aspect-ratio: 1 / 1;
}

.process li {
grid-template-columns:50px 1fr;
}

.process p {
grid-column:2;
}

.hero h1 {
font-size:65px;
}

;
}


@media(max-width:600px) {
body {
font-size:16px;
}

.wrap {
width:min(100% - 28px,1220px);
}

.nav {
height:50px;
}

.nav-links {
top:50px;
}

.hero,.hero-home {
min-height:auto;
padding:130px 0 65px;
}

.hero h1 {
font-size:48px;
}

.hero-copy {
font-size:17px;
}

.signal-tabs {
grid-template-columns:1fr;
margin-top:65px;
}

.section {
padding:78px 0;
}

.statement h2,.section-head h2,.intro-grid h2,.operator h2,.contact h2 {
font-size:42px;
}

.cards,.audience-cards,.benefits,.choices,.field-row {
grid-template-columns:1fr;
}

.card {
min-height:270px;
}

.audience {
min-height:400px;
}

.audience h3 {
font-size:38px;
}

.team {
grid-template-columns:1fr;
}



.form-panel {
padding:24px;
}

.footer-top {
grid-template-columns:1fr;
}

.footer h2 {
font-size:42px;
}

.footer-bottom {
flex-direction:column;
gap:7px;
}

.actions {
flex-direction:column;
align-items:flex-start;
}

;
}



/* CSS-only atmospheric background: no images, SVG, canvas, or external assets. */
body {
position:relative;
isolation:isolate;
background:#050505;
}


body::before,body::after {
content:"";
position:fixed;
inset:0;
pointer-events:none;
}


body::before {
z-index:-2;
background:radial-gradient(circle at 13% 14%,rgba(115,85,255,.20),transparent 25rem),radial-gradient(circle at 87% 22%,rgba(89,216,199,.12),transparent 26rem),radial-gradient(circle at 54% 78%,rgba(255,140,43,.10),transparent 30rem),linear-gradient(180deg,#070709 0%,#030303 48%,#080806 100%);
background-size:120% 120%;
animation:atmosphere-drift 20s ease-in-out infinite alternate;
}

/*
body::after {
z-index:-1;
opacity:.24;
background-image:linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px);
background-size:72px 72px;
mask-image:linear-gradient(to bottom,rgba(0,0,0,.72),transparent 72%);
}*/


main {
position:relative;
overflow:hidden;
}

/*
main::before,main::after {
content:"";
position:absolute;
pointer-events:none;
z-index:-1;
border:1px solid rgba(255,255,255,.09);
border-radius:50%;
}


main::before {
width:660px;
height:660px;
right:-320px;
top:330px;
box-shadow:0 0 0 80px rgba(255,255,255,.018),0 0 0 160px rgba(255,255,255,.012);
animation:orbit-pulse 12s ease-in-out infinite;
}


main::after {
width:420px;
height:420px;
left:-240px;
top:1120px;
border-color:rgba(216,255,62,.12);
box-shadow:0 0 90px rgba(115,85,255,.08);
}*/


.hero {
position:relative;
}


.hero::after {
content:"";
position:absolute;
width:310px;
height:310px;
right:8%;
top:21%;
border-radius:50%;
background:repeating-radial-gradient(circle,transparent 0 24px,rgba(255,255,255,.055) 25px 26px);
opacity:.75;
pointer-events:none;
z-index:-1;
animation:signal-breathe 9s ease-in-out infinite;
}


.signal-tabs>div {
background:rgba(29,29,29,.84);
backdrop-filter:blur(16px);
}


.signal-tabs>div:first-child {
background:rgba(245,245,242,.95);
}


.signal-dot {
box-shadow:0 0 30px currentColor;
}


@keyframes atmosphere-drift {
0% {
background-position:0% 0%;
}

100% {
background-position:12% 8%;
}

;
}


@keyframes orbit-pulse {
0%,100% {
transform:scale(.96);
opacity:.55;
}

50% {
transform:scale(1.04);
opacity:1;
}

;
}


@keyframes signal-breathe {
0%,100% {
transform:scale(.94);
opacity:.35;
}

50% {
transform:scale(1.06);
opacity:.8;
}

;
}