:root{
  --navy:#191923;
  --navy-deep:#111118;
  --offwhite:#F4F5F7;
  --teal:#FFB800;
  --teal-bright:#FFC733;
  --amber:#FFB800;
  --slate:#101828;
  --slate-soft:#5A6B82;
  --line:#E3E8EE;
}
*{box-sizing:border-box; margin:0; padding:0;}
body{
  font-family:'Inter', sans-serif;
  color:var(--slate);
  background:var(--offwhite);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.display{font-family:'Space Grotesk', sans-serif;}
.mono{font-family:'IBM Plex Mono', monospace; letter-spacing:0.02em;}
a{color:inherit; text-decoration:none;}
.wrap{max-width:1180px; margin:0 auto; padding:0 32px;}

/* NAV */
nav{
  position:sticky; top:0; z-index:1000;
  background:rgba(11,30,51,0.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid rgba(255,255,255,0.08);
}
nav .wrap{display:flex; align-items:center; justify-content:space-between; height:72px; max-width:1300px;}
.logo{display:flex; align-items:center; gap:10px; color:#fff; font-weight:600; font-size:18px;}
.logo-mark{width:28px; height:28px; position:relative;}
.nav-links{display:flex; gap:24px; font-size:14px; color:rgba(255,255,255,0.75);}
.nav-links a:hover{color:#fff;}
.nav-links a.active{color:var(--teal-bright);}
.nav-cta{
  background:var(--amber); color:var(--navy-deep); font-weight:600; font-size:14px;
  padding:10px 20px; border-radius:6px; transition:transform .15s ease;
}
.nav-cta:hover{transform:translateY(-1px);}

/* HERO (home) */
.hero{
  background:radial-gradient(ellipse 900px 500px at 78% 15%, rgba(14,165,160,0.25), transparent),
             linear-gradient(180deg, var(--navy) 0%, var(--navy-deep) 100%);
  color:#fff;
  padding:110px 0 90px;
  position:relative;
  overflow:hidden;
}
.hero .wrap{display:grid; grid-template-columns:1.1fr 0.9fr; gap:60px; align-items:center;}
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:12px; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--teal-bright); font-family:'IBM Plex Mono', monospace;
  border:1px solid rgba(14,199,192,0.35); padding:6px 12px; border-radius:20px;
  margin-bottom:24px;
}
.pulse-dot{width:6px; height:6px; border-radius:50%; background:var(--teal-bright); animation:blink 1.8s infinite;}
@keyframes blink{0%,100%{opacity:1;} 50%{opacity:0.25;}}
.hero h1{
  font-size:52px; line-height:1.08; font-weight:600; letter-spacing:-0.02em;
  margin-bottom:22px;
}
.hero h1 span{color:var(--teal-bright);}
.hero p{font-size:17px; line-height:1.6; color:rgba(255,255,255,0.68); max-width:460px; margin-bottom:34px;}
.btn-row{display:flex; gap:14px;}
.btn-primary{
  background:var(--amber); color:var(--navy-deep); font-weight:600; font-size:15px;
  padding:14px 26px; border-radius:6px; display:inline-block;
}
.btn-ghost{
  border:1px solid rgba(255,255,255,0.25); color:#fff; font-weight:500; font-size:15px;
  padding:14px 26px; border-radius:6px; display:inline-block;
}
.stats-row{display:flex; gap:34px; margin-top:48px;}
.stat-num{font-family:'IBM Plex Mono', monospace; font-size:26px; color:var(--teal-bright); font-weight:500;}
.stat-label{font-size:12px; color:rgba(255,255,255,0.5); margin-top:4px;}

/* SIGNATURE: signal pulse device visual */
.signal-stage{
  position:relative; height:420px; display:flex; align-items:center; justify-content:center;
}
.ring{
  position:absolute; border-radius:50%; border:1px solid rgba(14,199,192,0.35);
  animation:ripple 3.2s ease-out infinite;
}
.ring:nth-child(1){width:120px; height:120px; animation-delay:0s;}
.ring:nth-child(2){width:120px; height:120px; animation-delay:0.8s;}
.ring:nth-child(3){width:120px; height:120px; animation-delay:1.6s;}
.ring:nth-child(4){width:120px; height:120px; animation-delay:2.4s;}
@keyframes ripple{
  0%{width:120px; height:120px; opacity:0.9;}
  100%{width:420px; height:420px; opacity:0;}
}
.device-core{
  position:relative; z-index:2;
  width:112px; height:112px; border-radius:24px;
  background:linear-gradient(145deg, #12314f, #0B1E33);
  border:1px solid rgba(14,199,192,0.4);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 0 60px rgba(14,165,160,0.35);
}
.device-core svg{width:44px; height:44px;}
.float-chip{
  position:absolute; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.12);
  backdrop-filter:blur(6px); border-radius:10px; padding:10px 14px;
  font-family:'IBM Plex Mono', monospace; font-size:12px; color:rgba(255,255,255,0.85);
}
.chip-1{top:18px; left:0;}
.chip-2{bottom:40px; right:-6px;}
.chip-3{top:60%; left:-10px;}

/* PAGE HEADER (for inner pages: About, Products) */
.page-header{
  background:linear-gradient(180deg, var(--navy) 0%, var(--navy-deep) 100%);
  color:#fff; padding:72px 0 64px; position:relative; overflow:hidden;
}
.page-header .wrap{position:relative; z-index:2;}
.page-header h1{font-size:40px; font-weight:600; letter-spacing:-0.02em; margin-bottom:14px;}
.page-header p{color:rgba(255,255,255,0.65); font-size:16px; max-width:560px; line-height:1.6;}
.breadcrumb{font-family:'IBM Plex Mono', monospace; font-size:12px; color:var(--teal-bright); margin-bottom:18px; letter-spacing:0.05em;}
.header-rings{position:absolute; right:-60px; top:-40px; width:320px; height:320px; opacity:0.5;}
.header-rings .ring{position:absolute; border-radius:50%; border:1px solid rgba(14,199,192,0.3);}

/* TRUST STRIP */
.trust{background:#000; padding:26px 0;}
.trust .wrap{display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:40px;}
.trust-label{display:none;} /* Hidden to match Simetry */
.trust-logos{display:flex; gap:50px; opacity:0.8; font-weight:700; font-size:18px; color:#fff; align-items: center;}

/* SECTIONS (shared) */
.section{padding:100px 0;}
.section.tight{padding:70px 0;}
.section-head{max-width:600px; margin-bottom:56px;}
.section-tag{
  font-family:'IBM Plex Mono', monospace; font-size:12px; color:var(--teal);
  text-transform:uppercase; letter-spacing:0.08em; margin-bottom:14px; display:block;
}
.section-head h2{font-size:34px; font-weight:600; letter-spacing:-0.01em; line-height:1.2;}
.section-head p{color:var(--slate-soft); margin-top:14px; font-size:16px; line-height:1.6;}
.section-head.center{margin-left:auto; margin-right:auto; text-align:center;}

.dark-section{background:var(--navy); color:#fff;}
.dark-section .section-tag{color:var(--teal-bright);}
.dark-section p{color:rgba(255,255,255,0.7);}
.feature-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:24px;}
.feature-card{background:var(--navy-deep); padding:36px 32px; border-radius:16px; border:1px solid rgba(255,184,0,0.5); transition:transform 0.2s;}
.feature-card:hover{transform:translateY(-5px); border-color:var(--teal);}
.feature-num{font-family:'IBM Plex Mono', monospace; font-size:13px; color:var(--teal); margin-bottom:18px;}
.feature-icon{width:40px; height:40px; margin-bottom:20px;}
.feature-card h3{font-size:18px; font-weight:600; margin-bottom:10px; color:#fff;}
.feature-card p{font-size:14.5px; color:rgba(255,255,255,0.7); line-height:1.6;}

/* DEVICE / SIM SECTION */
.device-section{background:var(--navy-deep); color:#fff; padding:100px 0;}
.device-section .wrap{display:grid; grid-template-columns:0.9fr 1.1fr; gap:70px; align-items:center;}
.spec-list{margin-top:30px; border-top:1px solid rgba(255,255,255,0.1);}
.spec-row{display:flex; justify-content:space-between; padding:16px 0; border-bottom:1px solid rgba(255,255,255,0.1); font-size:14.5px;}
.spec-row span:first-child{color:rgba(255,255,255,0.55);}
.spec-row span:last-child{font-family:'IBM Plex Mono', monospace; color:var(--teal-bright);}
.card-visual{
  background:var(--navy-deep);
  border:1px solid rgba(255,184,0,0.3);
  border-radius:20px; padding:40px; position:relative; min-height:340px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.1);
  overflow: hidden;
}
.card-visual::before{
  content:''; position:absolute; right:-40px; top:-40px; width:160px; height:160px;
  background:var(--teal); border-radius:50%; opacity:0.1; filter:blur(30px);
}
.card-visual .corner-mark{position:absolute; top:24px; right:24px; width:26px; height:26px; border-top:2px solid var(--teal-bright); border-right:2px solid var(--teal-bright);}
.card-visual .corner-mark2{position:absolute; bottom:24px; left:24px; width:26px; height:26px; border-bottom:2px solid var(--teal-bright); border-left:2px solid var(--teal-bright);}
.sim-grid{display:grid; grid-template-columns:repeat(6, 1fr); gap:6px; width:70px; margin-bottom:26px; position:relative; z-index:2;}
.sim-grid div{aspect-ratio:1; background:rgba(255,184,0,0.6); border-radius:2px;}
.sim-grid div:nth-child(odd){background:rgba(255,184,0,0.2);}
.card-visual .id{font-family:'IBM Plex Mono', monospace; font-size:12px; color:rgba(255,255,255,0.4); letter-spacing:0.1em;}
.card-visual .big{font-family:'IBM Plex Mono', monospace; font-size:22px; color:#fff; margin-top:12px; letter-spacing:0.05em;}

/* TESTIMONIALS */
.testimonial-section{background:var(--teal); padding:100px 0;}
.testimonial-section .section-head h2{color:#fff;}
.testimonial-section .section-tag{color:var(--navy-deep);}
.testimonial-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:24px;}
.t-card{background:#fff; border:none; border-radius:4px; padding:32px; box-shadow:0 10px 30px rgba(0,0,0,0.05);}
.t-quote{font-size:15px; line-height:1.65; color:var(--slate); margin-bottom:24px; font-style:italic;}
.t-person{display:flex; align-items:center; gap:12px; justify-content:center; text-align:center; flex-direction:column;}
.t-name{font-size:15px; font-weight:600;}
.t-role{font-size:13px; color:var(--slate-soft);}

/* CONTACT */
.contact-section{background:var(--offwhite); padding:100px 0;}
.contact-box{
  background:var(--navy); border-radius:20px; overflow:hidden;
  display:grid; grid-template-columns:0.9fr 1.1fr;
}
.contact-left{padding:56px; color:#fff;}
.contact-left h2{font-size:28px; margin-bottom:16px; font-weight:600;}
.contact-left p{color:rgba(255,255,255,0.65); font-size:15px; line-height:1.6; margin-bottom:30px;}
.contact-info-row{display:flex; gap:12px; align-items:flex-start; margin-bottom:18px; font-size:14px; color:rgba(255,255,255,0.85);}
.contact-right{background:#fff; padding:56px;}
.form-row{margin-bottom:18px;}
.form-row label{display:block; font-size:13px; font-weight:600; margin-bottom:7px; color:var(--slate);}
.form-row input, .form-row textarea, .form-row select{
  width:100%; border:1px solid var(--line); border-radius:8px; padding:12px 14px;
  font-family:'Inter', sans-serif; font-size:14px; color:var(--slate); background:#fafbfc;
}
.form-row input:focus, .form-row textarea:focus, .form-row select:focus{
  outline:2px solid var(--teal); outline-offset:1px; border-color:var(--teal);
}
.form-grid-2{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
.submit-btn{
  background:var(--amber); color:var(--navy-deep); font-weight:600; font-size:15px;
  padding:14px 28px; border-radius:8px; border:none; cursor:pointer; width:100%; margin-top:6px;
}

/* ABOUT PAGE SPECIFIC */
.value-grid{display:grid; grid-template-columns:repeat(2, 1fr); gap:24px;}
.value-card{background:#fff; border:1px solid var(--line); border-radius:14px; padding:30px;}
.value-card .section-tag{margin-bottom:10px;}
.value-card h3{font-size:17px; margin-bottom:8px; font-weight:600;}
.value-card p{font-size:14.5px; color:var(--slate-soft); line-height:1.6;}
.timeline{border-left:2px solid var(--line); margin-left:8px;}
.timeline-item{position:relative; padding:0 0 40px 32px;}
.timeline-item:last-child{padding-bottom:0;}
.timeline-item::before{content:''; position:absolute; left:-7px; top:2px; width:12px; height:12px; border-radius:50%; background:var(--teal); border:3px solid var(--offwhite);}
.timeline-year{font-family:'IBM Plex Mono', monospace; font-size:13px; color:var(--teal); margin-bottom:6px;}
.timeline-item h4{font-size:16px; font-weight:600; margin-bottom:6px;}
.timeline-item p{font-size:14px; color:var(--slate-soft); line-height:1.6;}
.team-grid{display:grid; grid-template-columns:repeat(4, 1fr); gap:24px;}
.team-card{text-align:center;}
.team-avatar{width:72px; height:72px; border-radius:50%; background:var(--navy); margin:0 auto 14px; display:flex; align-items:center; justify-content:center; color:var(--teal-bright); font-family:'IBM Plex Mono', monospace; font-weight:500;}
.team-card h4{font-size:15px; font-weight:600;}
.team-card span{font-size:13px; color:var(--slate-soft);}
.stat-band{background:var(--navy-deep); color:#fff; padding:60px 0;}
.stat-band .wrap{display:grid; grid-template-columns:repeat(4,1fr); gap:20px; text-align:center;}
.stat-band .num{font-family:'IBM Plex Mono', monospace; font-size:32px; color:var(--teal-bright); font-weight:500;}
.stat-band .label{font-size:13px; color:rgba(255,255,255,0.55); margin-top:6px;}

/* PRODUCTS PAGE SPECIFIC */
.plan-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:24px;}
.plan-card{background:#fff; border:1px solid var(--line); border-radius:16px; padding:34px; position:relative;}
.plan-card.featured{border:2px solid var(--teal); box-shadow:0 20px 40px rgba(14,165,160,0.12);}
.plan-badge{position:absolute; top:-13px; left:34px; background:var(--teal); color:#fff; font-size:11px; font-family:'IBM Plex Mono', monospace; padding:4px 12px; border-radius:20px; letter-spacing:0.05em;}
.plan-card h3{font-size:18px; font-weight:600; margin-bottom:6px;}
.plan-card .plan-desc{font-size:13.5px; color:var(--slate-soft); margin-bottom:20px;}
.plan-price{font-family:'IBM Plex Mono', monospace; font-size:30px; font-weight:500; margin-bottom:4px;}
.plan-price span{font-size:14px; color:var(--slate-soft); font-family:'Inter', sans-serif;}
.plan-list{margin-top:22px; border-top:1px solid var(--line); padding-top:20px;}
.plan-list div{display:flex; gap:10px; font-size:14px; color:var(--slate); margin-bottom:12px; align-items:flex-start;}
.plan-list div svg{flex-shrink:0; margin-top:2px;}
.plan-cta{display:block; text-align:center; margin-top:24px; padding:12px; border-radius:8px; font-weight:600; font-size:14px; border:1px solid var(--line);}
.plan-card.featured .plan-cta{background:var(--amber); color:var(--navy-deep); border:none;}

.usecase-grid{display:grid; grid-template-columns:repeat(4, 1fr); gap:20px;}
.usecase-card{background:#fff; border:1px solid var(--line); border-radius:14px; padding:26px;}
.usecase-card .feature-icon{width:32px; height:32px; margin-bottom:16px;}
.usecase-card h4{font-size:15px; font-weight:600; margin-bottom:6px;}
.usecase-card p{font-size:13.5px; color:var(--slate-soft); line-height:1.5;}

.compat-table{width:100%; border-collapse:collapse; background:#fff; border:1px solid var(--line); border-radius:14px; overflow:hidden;}
.compat-table th{background:var(--navy); color:#fff; text-align:left; padding:14px 20px; font-size:13px; font-family:'IBM Plex Mono', monospace; font-weight:500;}
.compat-table td{padding:16px 20px; border-top:1px solid var(--line); font-size:14px;}
.compat-table td:first-child{font-weight:600;}
.compat-table td.mono{color:var(--teal); font-size:13px;}

/* HOW IT WORKS / VALUES */
.steps-section{background:var(--offwhite); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.steps-row{display:grid; grid-template-columns:repeat(3, 1fr); gap:30px; position:relative;}
.step-card{background:#fff; border:1px solid var(--line); border-top:4px solid var(--teal); padding:32px; box-shadow:0 10px 30px rgba(0,0,0,0.03); border-radius:4px;}
.step-num{
  font-family:'IBM Plex Mono', monospace; font-size:16px; color:var(--teal); font-weight:600;
  display:block; margin-bottom:18px;
}
.step-card h3{font-size:18px; font-weight:600; margin-bottom:10px; color:var(--navy);}
.step-card p{font-size:14.5px; color:var(--slate-soft); line-height:1.6;}

/* CTA BANNER */
.cta-banner{
  background:linear-gradient(120deg, var(--navy) 0%, #0d3550 100%);
  border-radius:20px; padding:56px 60px; margin:0 32px;
  display:flex; align-items:center; justify-content:space-between; gap:30px; flex-wrap:wrap;
  position:relative; overflow:hidden;
}
.cta-banner::before{
  content:''; position:absolute; right:-40px; top:-60px; width:220px; height:220px;
  border-radius:50%; border:1px solid rgba(14,199,192,0.25);
}
.cta-banner::after{
  content:''; position:absolute; right:20px; top:-20px; width:140px; height:140px;
  border-radius:50%; border:1px solid rgba(14,199,192,0.2);
}
.cta-banner h2{color:#fff; font-size:28px; font-weight:600; max-width:460px; position:relative; z-index:2;}
.cta-banner p{color:rgba(255,255,255,0.6); font-size:15px; margin-top:8px; max-width:420px; position:relative; z-index:2;}
.cta-banner .btn-primary{position:relative; z-index:2; white-space:nowrap;}

@media (max-width:860px){
  .steps-row{grid-template-columns:1fr; gap:32px;}
  .cta-banner{flex-direction:column; align-items:flex-start; padding:40px 32px; margin:0 20px;}
}

/* FOOTER */
footer{background:var(--navy-deep); color:rgba(255,255,255,0.55); padding:56px 0 30px;}
footer .wrap{display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:30px;}
.foot-links{display:flex; gap:34px; font-size:14px;}
.foot-links a:hover{color:#fff;}
.foot-bottom{border-top:1px solid rgba(255,255,255,0.08); margin-top:40px; padding-top:24px; font-size:12.5px; display:flex; justify-content:space-between;}

@media (max-width:860px){
  .hero .wrap, .device-section .wrap, .contact-box{grid-template-columns:1fr;}
  .feature-grid, .testimonial-grid, .form-grid-2, .value-grid, .plan-grid{grid-template-columns:1fr;}
  .team-grid, .usecase-grid, .stat-band .wrap{grid-template-columns:repeat(2,1fr);}
  .hero h1{font-size:36px;}
  nav .nav-links{display:none;}
  .signal-stage{height:280px;}
}

/* Mobile Menu & Responsiveness Enhancements */
.mobile-menu-toggle {
  display: none;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 8px;
  z-index: 1000;
  position: relative;
}

.hamburger-line {
  display: block;
  width: 24px;
  height: 2px;
  background-color: #fff;
  margin: 5px 0;
  transition: all 0.3s ease;
  border-radius: 2px;
}

.mobile-menu-open .mobile-menu-toggle .hamburger-line:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.mobile-menu-open .mobile-menu-toggle .hamburger-line:nth-child(2) {
  opacity: 0;
}

.mobile-menu-open .mobile-menu-toggle .hamburger-line:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.mobile-menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(5, 14, 23, 0.98);
  backdrop-filter: blur(10px);
  z-index: 999;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding: 100px 0 40px;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transition: all 0.4s ease;
  transform: translateY(-20px);
}

.mobile-menu-open .mobile-menu-overlay {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.mobile-nav-links {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}

.mobile-nav-links a {
  font-size: 24px;
  font-weight: 600;
  color: #fff;
  text-decoration: none;
  transition: color 0.2s ease;
}

.mobile-nav-links a:hover,
.mobile-nav-links a.active {
  color: var(--teal-bright);
}

.mobile-nav-cta {
  background: var(--amber);
  color: var(--navy-deep) !important;
  padding: 12px 32px;
  border-radius: 8px;
  font-size: 18px !important;
  margin-top: 16px;
}

/* Tablet / iPad Pro Nav Fix */
@media (max-width: 1024px) {
  nav .nav-links { display: none; }
  .nav-cta { display: none; }
  .mobile-menu-toggle { display: block; }
}

/* Base Responsive Fixes */
@media (max-width: 860px) {
  .mobile-menu-toggle { display: block; }
  .nav-cta { display: none; }
  
  .section { padding: 60px 0; }
  .section.tight { padding: 40px 0; }
  
  .hero { padding: 120px 0 60px; }
  .hero h1 { font-size: 32px; }
  .hero p { font-size: 16px; }
  
  .section-head h2 { font-size: 28px; }
  
  .trust-logos { flex-wrap: wrap; justify-content: center; gap: 20px; }
  .contact-left { padding: 32px; }
  
  footer .wrap { gap: 40px; flex-direction: column; align-items: center; text-align: center; }
}

@media (max-width: 500px) {
  .wrap { padding: 0 20px; }
  .team-grid, .usecase-grid, .stat-band .wrap { grid-template-columns: 1fr !important; }
  .sim-grid { width: 50px; gap: 4px; }
  .card-visual .big { font-size: 18px; }
  .hero h1 { font-size: 28px; }
  .section-head h2 { font-size: 24px; }
  .foot-links { flex-direction: column; gap: 16px; align-items: center; text-align: center; width: 100%; }
  footer .wrap > div { display: flex; flex-direction: column; align-items: center; text-align: center; }
  .foot-bottom { flex-direction: column; align-items: center; gap: 12px; text-align: center; }
  .btn-row { flex-direction: column; width: 100%; }
  .btn-row a { width: 100%; justify-content: center; }
}


body.mobile-menu-open { overflow: hidden; }

@media (max-width: 860px) { .trust .wrap { justify-content: center; text-align: center; flex-direction: column; } .trust-label { text-align: center; width: 100%; } }

.device-section { background: var(--navy); color: #fff; } .device-section .spec-row { border-bottom: 1px solid rgba(255,255,255,0.1); } .device-section .spec-row span:first-child { color: rgba(255,255,255,0.6); } .device-section p { color: rgba(255,255,255,0.7) !important; }

.cta-banner { border-radius: 0; margin: 0; background: var(--navy-deep); border-top: 1px solid rgba(255,184,0,0.2); border-bottom: 1px solid rgba(255,184,0,0.2); text-align: center; justify-content: center; flex-direction: column; padding: 80px 32px; } .cta-banner h2 { text-align: center; max-width: 800px; }

.contact-section { background: var(--navy); } .contact-box { background: var(--navy-deep); border: 1px solid rgba(255,184,0,0.1); } .contact-right { background: var(--navy-deep); color: #fff; } .contact-right label { color: rgba(255,255,255,0.8); } .contact-right input, .contact-right textarea { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.1); color: #fff; }

/* Hero Original Teal Overrides */ .hero .eyebrow { color: #14C7C0 !important; border-color: rgba(20,199,192,0.35) !important; } .hero .pulse-dot { background: #14C7C0 !important; } .hero h1 span { color: #14C7C0 !important; } .hero .stat-num { color: #14C7C0 !important; } .hero .ring { border-color: rgba(20,199,192,0.35) !important; } .hero .device-core { border-color: rgba(20,199,192,0.4) !important; box-shadow: 0 0 60px rgba(20,199,192,0.35) !important; }

.simetry-icon { font-size: 64px; color: var(--teal); margin: 0 auto 20px; display: block; text-align: center; } .simetry-divider { width: 40px; height: 2px; background: var(--teal); margin: 16px auto 20px; border: none; } .step-card, .feature-card { text-align: center; } .step-card p, .feature-card p { text-align: left; }

/* Hero Video Background Override */ .hero { background: transparent !important; } .hero-video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; } .hero-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(90deg, rgba(17,17,24,0.6) 0%, rgba(17,17,24,0.3) 100%); z-index: 1; } .hero .wrap { position: relative; z-index: 2; display: flex !important; flex-direction: column; align-items: flex-start; justify-content: center; min-height: 500px; padding: 60px 0; } .hero .signal-stage { display: none !important; } .hero h1 { max-width: 800px; } .hero p { max-width: 600px; font-size: 18px; }

/* Hero Simetry Style Override */ .hero .wrap { align-items: center !important; text-align: center !important; } .hero .eyebrow { color: var(--teal) !important; border-color: rgba(255, 184, 0, 0.3) !important; background: rgba(17, 17, 24, 0.8) !important; padding: 10px 20px !important; border-radius: 40px !important; font-family: 'Space Grotesk', sans-serif !important; font-weight: 500 !important; margin: 0 auto 24px auto !important; font-size: 14px !important; letter-spacing: 0.05em !important; text-transform: none !important; } .hero .pulse-dot { display: none !important; } .hero h1 { margin: 0 auto 22px auto !important; } .hero h1 span { color: var(--teal) !important; } .hero p { margin: 0 auto 34px auto !important; max-width: 800px !important; color: #ffffffdb !important; font-weight: 500 !important; text-shadow: 0 2px 8px rgba(0,0,0,0.6) !important; line-height: 1.6 !important; } .hero .btn-row { justify-content: center !important; width: 100% !important; } .hero .btn-ghost { border-color: var(--teal) !important; color: var(--teal) !important; } .hero .stats-row { justify-content: center !important; width: 100% !important; display: flex !important; } .hero-overlay { background: linear-gradient(180deg, rgba(17,17,24,0.4) 0%, rgba(17,17,24,0.6) 100%) !important; }

.hero .stat-num { color: var(--teal) !important; text-shadow: 0 2px 4px rgba(0,0,0,0.5) !important; } .hero .stat-label { color: #ffffffdb !important; font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: 0.08em !important; text-shadow: 0 2px 6px rgba(0,0,0,0.6) !important; }

/* Professional Typography and Contrast Overrides */ .step-card .simetry-icon, .value-card .simetry-icon, .usecase-card .simetry-icon, .plan-card .simetry-icon { color: var(--teal) !important; } .usecase-card .feature-icon { display: none !important; } .step-card h3, .value-card h3, .usecase-card h4, .plan-card h3, .feature-card h3 { font-size: 22px !important; color: var(--navy-deep) !important; margin-bottom: 12px !important; } .feature-card h3 { color: #fff !important; } .step-card p, .value-card p, .usecase-card p, .plan-card .plan-desc, .feature-card p { font-size: 16px !important; color: var(--slate) !important; line-height: 1.7 !important; } .feature-card p { color: rgba(255,255,255,0.7) !important; } .team-card h4 { font-size: 18px !important; margin-bottom: 4px !important; } .team-card span { font-size: 14px !important; } .value-card, .usecase-card, .plan-card { padding: 40px 32px !important;  box-shadow: 0 10px 30px rgba(0,0,0,0.03) !important; text-align: center !important; } .value-card p, .usecase-card p, .plan-card p { text-align: left !important; }

/* Enhance Section Tag Visibility */ .section-tag { color: var(--teal) !important; font-size: 15px !important; font-weight: 600 !important; letter-spacing: 0.08em !important; } .dark-section .section-tag, .hero .section-tag { color: var(--teal) !important; }

/* Fix Compatibility Table Contrast */ .compat-table td.mono { color: var(--navy-deep) !important; font-weight: 600 !important; font-size: 14px !important; letter-spacing: 0.05em !important; }

/* Enhance Usecase Card Shadow */ .usecase-card { box-shadow: 0 15px 35px rgba(0,0,0,0.08) !important; border: 1px solid rgba(0,0,0,0.04) !important; transition: all 0.3s ease !important; } .usecase-card:hover { transform: translateY(-5px) !important; box-shadow: 0 20px 45px rgba(0,0,0,0.12) !important; }

/* Enhance Usecase Card Visibility */ .usecase-card { background: var(--offwhite, #F8F9FA) !important; border: 1px solid rgba(0,0,0,0.08) !important; box-shadow: 0 10px 30px rgba(0,0,0,0.06) !important; transition: all 0.3s ease; } .usecase-card:hover { transform: translateY(-5px); box-shadow: 0 15px 35px rgba(0,0,0,0.1) !important; }

/* Fix Testimonial Section Tag Visibility */ .testimonial-section .section-tag { color: #111118 !important; }

/* Mobile Hero Padding Fix */ @media (max-width: 860px) { .hero { padding-top: 80px !important; padding-bottom: 40px !important; } .hero .wrap { padding-top: 20px !important; padding-bottom: 20px !important; min-height: 350px !important; } }

/* LG Desktop Hero Height Fix */
@media (min-width: 1280px) {
  .hero .wrap { min-height: 750px !important; padding: 100px 0 !important; }
}

/* --- Responsive Utility Classes for Pages --- */
.responsive-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.responsive-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.responsive-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.responsive-grid-1-2 { display: grid; grid-template-columns: 1fr 1.2fr; gap: 40px; }
.responsive-flex-between { display: flex; justify-content: space-between; align-items: center; gap: 24px; }

/* CTA Banners */
.cta-banner { background: var(--navy); padding: 40px; border-radius: 0; position: relative; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.1); width: 100%; }
.cta-banner-dark { background: var(--navy-deep); padding: 50px 60px; border-radius: 20px; position: relative; overflow: hidden; border: 1px solid rgba(255,255,255,0.05); box-shadow: 0 30px 60px rgba(0,0,0,0.2); width: 100%; }
.cta-glow-teal { position: absolute; top: -50px; left: -50px; width: 200px; height: 200px; background: var(--teal); opacity: 0.15; filter: blur(60px); border-radius: 50%; pointer-events: none; }
.cta-glow-amber { position: absolute; bottom: -50px; right: -50px; width: 200px; height: 200px; background: var(--amber); opacity: 0.15; filter: blur(60px); border-radius: 50%; pointer-events: none; }
.cta-icon-box { width: 80px; height: 80px; min-width: 80px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: 16px; display: flex; align-items: center; justify-content: center; box-shadow: inset 0 2px 10px rgba(255,255,255,0.05); }

.responsive-hero-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 60px; align-items: center; }
.responsive-flex-between { display: flex; justify-content: space-between; align-items: center; gap: 30px; flex-wrap: wrap; }
.responsive-e2e-row { display: grid; grid-template-columns: 220px 1fr; gap: 60px; align-items: center; }
.responsive-floating-dashboards { display: flex; justify-content: center; gap: 30px; margin-top: -160px; margin-bottom: 80px; width: 100%; max-width: 900px; z-index: 2; position: relative; }

@media (max-width: 992px) {
  .responsive-grid-3 { grid-template-columns: repeat(2, 1fr); }
  .responsive-grid-4 { grid-template-columns: repeat(2, 1fr); }
  .responsive-hero-grid { grid-template-columns: 1fr; text-align: center; gap: 40px; }
  .responsive-hero-grid .btn-row { justify-content: center; }
  .responsive-e2e-row { grid-template-columns: 1fr; text-align: center; gap: 30px; }
  .responsive-floating-dashboards { flex-direction: column; margin-top: -60px; align-items: center; }
  .hide-on-mobile { display: none !important; }
}

@media (max-width: 768px) {
  .responsive-grid-2, .responsive-grid-3, .responsive-grid-4, .responsive-grid-1-2 { grid-template-columns: 1fr; }
  .responsive-flex-between { flex-direction: column; justify-content: center; text-align: center; }
  .responsive-floating-dashboards > div { width: 100%; }
}

/* --- Professional Utility & Component Classes --- */

/* Typography */
.text-h1 { font-size: 54px; font-weight: 700; color: var(--navy-deep); line-height: 1.05; letter-spacing: -0.02em; }
.text-h2 { font-size: 36px; font-weight: 600; color: var(--navy-deep); letter-spacing: -0.01em; }
.text-h3 { font-size: 24px; font-weight: 600; color: var(--navy-deep); margin-bottom: 16px; }
.text-lead { font-size: 19px; color: var(--slate-soft); line-height: 1.6; }
.text-body { font-size: 16px; color: var(--slate-soft); line-height: 1.6; }
.text-body-sm { font-size: 14px; color: var(--slate-soft); line-height: 1.6; }
.text-center { text-align: center; }

/* Margins & Max Widths */
.mb-8 { margin-bottom: 8px; }
.mb-12 { margin-bottom: 12px; }
.mb-16 { margin-bottom: 16px; }
.mb-24 { margin-bottom: 24px; }
.mb-32 { margin-bottom: 32px; }
.mb-40 { margin-bottom: 40px; }
.mb-50 { margin-bottom: 50px; }
.mb-60 { margin-bottom: 60px; }
.mb-80 { margin-bottom: 80px; }
.mt-2 { margin-top: 2px; }
.mt-4 { margin-top: 4px; }
.mt-6 { margin-top: 6px; }
.mt-20 { margin-top: 20px; }
.max-w-280 { max-width: 280px; }
.max-w-500 { max-width: 500px; }
.max-w-600 { max-width: 600px; margin-left: auto; margin-right: auto; }
.max-w-700 { max-width: 700px; margin-left: auto; margin-right: auto; }
.max-w-800 { max-width: 800px; margin-left: auto; margin-right: auto; }
.max-w-900 { max-width: 900px; margin-left: auto; margin-right: auto; }
.max-w-1000 { max-width: 1000px; margin-left: auto; margin-right: auto; }

/* Flexbox & Layout */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.gap-6 { gap: 6px; }
.gap-8 { gap: 8px; }
.gap-12 { gap: 12px; }
.gap-16 { gap: 16px; }
.gap-20 { gap: 20px; }
.gap-24 { gap: 24px; }
.gap-32 { gap: 32px; }
.gap-40 { gap: 40px; }
.gap-60 { gap: 60px; }
.flex-shrink-0 { flex-shrink: 0; }
.flex-grow-1 { flex-grow: 1; }

/* Typography Extras */
.font-bold { font-weight: 700; }
.font-semibold { font-weight: 600; }
.font-medium { font-weight: 500; }
.font-normal { font-weight: 400; }
.italic { font-style: italic; }
.text-navy { color: var(--navy-deep); }
.text-white { color: #fff; }
.text-amber { color: var(--amber); }
.text-teal { color: var(--teal); }
.text-slate { color: var(--slate); }
.text-slate-soft { color: var(--slate-soft); }
.uppercase { text-transform: uppercase; }
.tracking-wide { letter-spacing: 0.05em; }
.tracking-wider { letter-spacing: 0.1em; }
.text-sm { font-size: 14px; }
.text-md { font-size: 15px; }
.text-lg { font-size: 16px; }
.text-xl { font-size: 18px; }
.text-2xl { font-size: 20px; }
.text-3xl { font-size: 24px; }
.text-4xl { font-size: 32px; }
.text-5xl { font-size: 48px; }
.block { display: block; }
.inline-flex { display: inline-flex; }

/* Positioning & Borders */
.relative { position: relative; }
.absolute { position: absolute; }
.overflow-hidden { overflow: hidden; }
.rounded-full { border-radius: 50%; }
.rounded-sm { border-radius: 4px; }
.rounded-md { border-radius: 8px; }
.rounded-lg { border-radius: 12px; }
.rounded-xl { border-radius: 16px; }
.rounded-2xl { border-radius: 24px; }
.z-1 { z-index: 1; }
.z-2 { z-index: 2; }
.z-3 { z-index: 3; }
.z-4 { z-index: 4; }
.w-full { width: 100%; }
.h-full { height: 100%; }
.shadow-md { box-shadow: 0 10px 20px rgba(0,0,0,0.1); }
.shadow-lg { box-shadow: 0 15px 30px rgba(0,0,0,0.15); }
.border-transparent { border-color: transparent; }
.border-line { border: 1px solid var(--line); }

/* Sections & Backgrounds */
.section-padding { padding: 100px 0; }
.bg-light-grad { background: radial-gradient(ellipse at 80% 20%, rgba(20, 199, 192, 0.05) 0%, rgba(244, 245, 247, 1) 70%); }
.bg-white { background: #fff; }
.bg-offwhite { background: var(--offwhite); }
.bg-navy-deep { background: var(--navy-deep); color: #fff; }
.border-b-soft { border-bottom: 1px solid rgba(0,0,0,0.05); }
.gradient-top-bar { position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--teal), var(--amber)); }
.bg-radial-support { background: radial-gradient(circle at 80% 20%, rgba(255, 184, 0, 0.05) 0%, rgba(244, 245, 247, 1) 70%); }
.bg-radial-partner { background: radial-gradient(circle at center, #ffffff 0%, #e9ecef 100%); }

/* Components */
.card-dark {
  background: var(--navy-deep); color: #fff; border-radius: 20px; padding: 40px;
  display: flex; flex-direction: column; border: 1px solid rgba(255,255,255,0.05);
  box-shadow: 0 20px 50px rgba(0,0,0,0.15); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative; overflow: hidden;
}
.card-dark:hover { transform: translateY(-8px); border-color: rgba(20, 199, 192, 0.3); box-shadow: 0 30px 60px rgba(20, 199, 192, 0.15); }
.card-dark h3 { font-size: 24px; font-weight: 600; margin-bottom: 14px; color: #fff; letter-spacing: -0.01em; }
.card-dark p { font-size: 15px; color: rgba(255,255,255,0.65); line-height: 1.7; margin-bottom: 30px; flex-grow: 1; }

.card-white {
  background: #fff; border-top: 4px solid var(--amber); border-radius: 8px; padding: 32px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.02); border-left: 1px solid var(--line); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.card-white h3 { font-family: 'IBM Plex Mono', monospace; font-size: 15px; color: var(--navy-deep); margin-bottom: 12px; }
.card-white p { font-size: 14px; color: var(--slate-soft); margin-bottom: 24px; min-height: 40px; }

.icon-box-amber { width: 50px; height: 50px; border-radius: 50%; background: var(--amber); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.icon-box-amber-sm { width: 40px; height: 40px; border-radius: 50%; background: var(--amber); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.icon-box-amber-xs { width: 24px; height: 24px; border-radius: 50%; background: var(--amber); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.icon-box-amber-xxs { width: 20px; height: 20px; border-radius: 50%; background: var(--amber); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.icon-box-white { width: 64px; height: 64px; background: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 24px; box-shadow: 0 10px 20px rgba(20, 199, 192, 0.1); }
.icon-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--amber); flex-shrink: 0; }

.testimonial-card {
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%); border-radius: 16px; padding: 40px;
    position: relative; margin-top: 20px; box-shadow: 0 15px 35px rgba(0,0,0,0.06); border: 1px solid rgba(0,0,0,0.04);
}
.testimonial-quote-icon {
    position: absolute; top: -20px; left: 30px; width: 50px; height: 50px; background: var(--amber);
    border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 5px 15px rgba(255,184,0,0.3);
}

.list-check { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.list-check li { display: flex; align-items: flex-start; gap: 12px; }
.list-check i { color: var(--amber); margin-top: 4px; }

/* Mock UI Components */
.mock-graphic-container { background: linear-gradient(135deg, #e9ecef, #f8f9fa); border-radius: 24px; padding: 40px; border: 1px solid var(--line); position: relative; min-height: 400px; display: flex; align-items: center; justify-content: center; box-shadow: 0 20px 40px rgba(0,0,0,0.05); }
.mock-graphic-inner { position: absolute; top: 20px; left: 20px; right: 20px; bottom: 20px; background: #fff; border-radius: 16px; border: 1px solid var(--line); box-shadow: 0 10px 30px rgba(0,0,0,0.03); padding: 24px; display: flex; flex-direction: column; gap: 16px; }
.mock-bar-sm { height: 12px; width: 40%; background: var(--offwhite); border-radius: 6px; }
.mock-chart-box { height: 120px; width: 100%; background: var(--offwhite); border-radius: 8px; display: flex; align-items: center; justify-content: center; border: 1px dashed var(--slate-soft); }
.mock-chart-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mock-chart-col { height: 60px; background: var(--offwhite); border-radius: 8px; }
.mock-float-tr { position: absolute; top: -20px; right: -20px; background: var(--navy-deep); color: #fff; padding: 16px; border-radius: 12px; box-shadow: 0 10px 20px rgba(0,0,0,0.1); display: flex; gap: 12px; align-items: center; }
.mock-float-bl { position: absolute; bottom: 40px; left: -30px; background: #fff; padding: 12px 20px; border-radius: 8px; border: 1px solid var(--line); box-shadow: 0 10px 20px rgba(0,0,0,0.05); display: flex; gap: 12px; align-items: center; }
.status-dot-green { width: 10px; height: 10px; background: #10b981; border-radius: 50%; box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2); }
.bg-gradient-gray { background: linear-gradient(180deg, rgba(244, 245, 247, 1) 0%, rgba(255, 255, 255, 1) 100%); }
.glow-teal-tr { position: absolute; top: -60px; right: -60px; width: 150px; height: 150px; background: var(--teal); filter: blur(60px); opacity: 0.1; border-radius: 50%; }
.glow-amber-tr { position: absolute; top: -60px; right: -60px; width: 150px; height: 150px; background: var(--amber); filter: blur(60px); opacity: 0.08; border-radius: 50%; }
.glow-white-tr { position: absolute; top: -60px; right: -60px; width: 150px; height: 150px; background: #fff; filter: blur(60px); opacity: 0.05; border-radius: 50%; }
.card-dark-icon-box { height: 110px; background: linear-gradient(145deg, rgba(25, 25, 35, 1), rgba(17, 17, 24, 1)); border: 1px solid rgba(255,255,255,0.05); border-radius: 12px; margin-bottom: 30px; display: flex; align-items: center; justify-content: center; gap: 12px; box-shadow: inset 0 2px 10px rgba(0,0,0,0.2); }
.plan-mock-window { height: 140px; background: var(--offwhite); border-radius: 8px; border: 1px dashed var(--line); display: flex; align-items: flex-end; padding: 16px; gap: 8px; justify-content: center; position: relative; }
.plan-mock-bar-navy { width: 20%; background: var(--navy-deep); border-radius: 4px 4px 0 0; }
.plan-mock-bar-teal { width: 20%; background: var(--teal); border-radius: 4px 4px 0 0; }
.plan-mock-circle { width: 80px; height: 80px; border-radius: 50%; border: 2px solid var(--teal); display: flex; align-items: center; justify-content: center; z-index: 2; background: #fff; }
.plan-mock-icon-tl { position: absolute; top: 20px; left: 40px; font-size: 24px; color: var(--navy-deep); }
.plan-mock-icon-br { position: absolute; bottom: 20px; right: 40px; font-size: 24px; color: var(--navy-deep); }
.cta-banner-dark { background: linear-gradient(120deg, var(--navy-deep) 0%, #0d2842 100%); border-radius: 24px; padding: 60px; position: relative; overflow: hidden; box-shadow: 0 25px 50px rgba(11, 30, 51, 0.3); }
.cta-glow-teal { position: absolute; top: -100px; right: 10%; width: 300px; height: 300px; background: var(--teal); filter: blur(120px); opacity: 0.15; border-radius: 50%; pointer-events: none; }
.cta-glow-amber { position: absolute; bottom: -50px; left: 5%; width: 200px; height: 200px; background: var(--amber); filter: blur(100px); opacity: 0.1; border-radius: 50%; pointer-events: none; }
.cta-icon-box { width: 80px; height: 80px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: 20px; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(10px); }

/* Simcard Mock Components */
.sim-hero-graphic { background: #F2F0ED; border-radius: 24px; padding: 40px; position: relative; min-height: 450px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.sim-float-1 { position: absolute; top: 20px; right: 40px; width: 120px; height: 80px; background: #111; border-radius: 12px; transform: rotate(15deg); box-shadow: 0 10px 20px rgba(0,0,0,0.1); border: 1px solid rgba(255,255,255,0.1); }
.sim-float-2 { position: absolute; top: 60px; left: 40px; width: 140px; height: 90px; background: #fff; border-radius: 12px; transform: rotate(-10deg); box-shadow: 0 15px 30px rgba(0,0,0,0.15); border: 1px solid var(--line); display: flex; padding: 12px; }
.sim-float-3 { position: absolute; top: 120px; right: 60px; width: 160px; height: 100px; background: #00a8e0; border-radius: 12px; transform: rotate(-5deg); box-shadow: 0 10px 25px rgba(0,0,0,0.2); }
.sim-card-mock-1 { width: 80px; height: 50px; background: #fff; border-radius: 8px; transform: rotate(-15deg); position: absolute; left: 10px; border: 1px solid #ccc; }
.sim-card-mock-2 { width: 80px; height: 50px; background: #e20074; border-radius: 8px; transform: rotate(-5deg); position: absolute; left: 40px; box-shadow: 0 5px 15px rgba(0,0,0,0.2); }
.sim-card-mock-3 { width: 80px; height: 50px; background: #00a8e0; border-radius: 8px; transform: rotate(5deg); position: absolute; left: 70px; box-shadow: 0 5px 15px rgba(0,0,0,0.2); }
.sim-card-mock-center { width: 120px; height: 75px; background: #fff; border-radius: 10px; transform: rotate(10deg); display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 20px rgba(0,0,0,0.3); }
.e2e-icon-box { position: relative; width: 220px; height: 140px; background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); border-radius: 16px; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(0,0,0,0.05); box-shadow: 0 15px 35px rgba(0,0,0,0.05), inset 0 2px 5px rgba(255,255,255,0.8); }
.e2e-icon-glow { position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: radial-gradient(circle at top left, rgba(255,255,255,0.8) 0%, transparent 60%); border-radius: 16px; }

/* Platform Mock Components */
.platform-glow-bg { position: absolute; top: 40%; left: -10%; width: 50vw; height: 50vw; background: var(--amber); border-radius: 50%; z-index: 0; filter: blur(100px); opacity: 0.15; }
.platform-mock-browser-dark { width: 100%; height: 320px; background: #1e1e1e; border-radius: 12px; border: 10px solid #111; box-shadow: 0 30px 60px rgba(0,0,0,0.15); display: flex; flex-direction: column; overflow: hidden; }
.platform-browser-bar-dark { height: 24px; background: #333; display: flex; align-items: center; padding: 0 12px; gap: 6px; }
.platform-browser-dot-r { width: 10px; height: 10px; border-radius: 50%; background: #ff5f56; }
.platform-browser-dot-y { width: 10px; height: 10px; border-radius: 50%; background: #ffbd2e; }
.platform-browser-dot-g { width: 10px; height: 10px; border-radius: 50%; background: #27c93f; }
.platform-mock-dash-ui { flex-grow: 1; background: #f4f5f7; padding: 16px; display: flex; flex-direction: column; gap: 16px; }
.platform-mock-dash-box { flex: 1; height: 40px; background: #fff; border-radius: 4px; box-shadow: 0 2px 5px rgba(0,0,0,0.05); }
.platform-mock-dash-box-24 { flex: 1; height: 24px; background: #fff; border-radius: 2px; }
.platform-mock-chart-container { flex: 2; background: #fff; border-radius: 4px; box-shadow: 0 2px 5px rgba(0,0,0,0.05); padding: 12px; display: flex; align-items: flex-end; gap: 8px; }
.platform-mock-chart-container-sm { flex-grow: 1; background: #fff; border-radius: 2px; display: flex; align-items: flex-end; gap: 6px; padding: 8px; }
.platform-mock-pie-container { flex: 1; background: #fff; border-radius: 4px; box-shadow: 0 2px 5px rgba(0,0,0,0.05); display: flex; align-items: center; justify-content: center; }
.platform-mock-stand-top { width: 120px; height: 40px; background: linear-gradient(to bottom, #444, #999); margin: 0 auto; clip-path: polygon(20% 0, 80% 0, 100% 100%, 0 100%); }
.platform-mock-stand-base { width: 200px; height: 8px; background: #bbb; margin: 0 auto; border-radius: 4px; }
.platform-mock-browser-light { flex: 1; height: 240px; background: #f4f5f7; border-radius: 8px; border: 6px solid #222; box-shadow: 0 20px 40px rgba(0,0,0,0.3); overflow: hidden; }
.platform-browser-bar-light { height: 16px; background: #333; }
.platform-line-gray { height: 4px; background: var(--slate-soft); opacity: 0.2; }
.platform-accent-line { width: 40px; height: 2px; background: var(--amber); margin: 24px auto 0; }

/* Partner Mock Components */
.partner-hero-glow-amber { position: absolute; top: -20%; left: -10%; width: 50%; height: 80%; background: var(--amber); opacity: 0.1; filter: blur(120px); border-radius: 50%; }
.partner-hero-glow-teal { position: absolute; bottom: -20%; right: -10%; width: 50%; height: 80%; background: var(--teal-bright); opacity: 0.1; filter: blur(120px); border-radius: 50%; }
.partner-icon-sq { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; background: #fff; border-radius: 12px; box-shadow: 0 10px 25px rgba(0,0,0,0.05); margin-bottom: 24px; }
.partner-mock-circle-amber { width: 100%; padding-bottom: 100%; background: radial-gradient(circle at center, rgba(255,184,0,0.2) 0%, transparent 70%); border-radius: 50%; }
.partner-mock-sim { position: absolute; top: 20%; left: 10%; width: 180px; height: 120px; background: var(--navy-deep); border-radius: 12px; box-shadow: 0 20px 40px rgba(0,0,0,0.2); transform: rotate(-5deg); z-index: 2; display: flex; padding: 16px; }
.partner-mock-chip { margin-left: auto; width: 40px; height: 30px; background: #fff; border-radius: 4px; opacity: 0.1; }
.partner-mock-shield { position: absolute; bottom: 20%; right: 10%; width: 160px; height: 100px; background: linear-gradient(135deg, #10b981 0%, #059669 100%); border-radius: 12px; box-shadow: 0 20px 40px rgba(0,0,0,0.15); transform: rotate(8deg); z-index: 1; display: flex; align-items: center; justify-content: center; }
.partner-glow-amber-tr { position: absolute; top: 10%; right: -10%; width: 150px; height: 150px; background: var(--amber); border-radius: 50%; filter: blur(40px); opacity: 0.2; }
.partner-mock-monitor { width: 100%; background: #fff; border-radius: 12px; border: 8px solid #222; box-shadow: 0 20px 40px rgba(0,0,0,0.15); display: flex; flex-direction: column; overflow: hidden; transform: perspective(800px) rotateY(10deg); }
.partner-mock-monitor-bar { height: 16px; background: #333; display: flex; align-items: center; padding: 0 8px; gap: 4px; }
.partner-mock-dot-r { width: 6px; height: 6px; border-radius: 50%; background: #ff5f56; }
.partner-mock-dot-y { width: 6px; height: 6px; border-radius: 50%; background: #ffbd2e; }
.partner-mock-dot-g { width: 6px; height: 6px; border-radius: 50%; background: #27c93f; }
.partner-mock-stand-top { width: 80px; height: 20px; background: linear-gradient(to bottom, #444, #999); margin: 0 auto; clip-path: polygon(20% 0, 80% 0, 100% 100%, 0 100%); }
.partner-mock-stand-base { width: 140px; height: 6px; background: #ccc; margin: 0 auto; border-radius: 3px; }
.partner-mock-circle-dark { width: 100%; padding-bottom: 100%; background: radial-gradient(circle at center, rgba(16,24,40,0.05) 0%, transparent 70%); border-radius: 50%; }
.partner-mock-box-1 { position: absolute; top: 30%; left: 15%; width: 160px; height: 120px; background: #111; border-radius: 8px; box-shadow: 0 15px 30px rgba(0,0,0,0.3); border: 2px solid #333; z-index: 2; display: flex; flex-direction: column; justify-content: flex-end; padding: 12px; transform: rotate(-5deg); }
.partner-mock-box-2 { position: absolute; bottom: 20%; right: 15%; width: 140px; height: 100px; background: #222; border-radius: 8px; box-shadow: 0 15px 30px rgba(0,0,0,0.2); border: 2px solid #444; z-index: 1; transform: rotate(10deg); display: flex; align-items: center; justify-content: center; }

/* About Mock Components */
.about-mock-glow { position: absolute; width: 300px; height: 300px; background: var(--amber); border-radius: 50%; opacity: 0.1; filter: blur(40px); }
.about-mock-monitor { position: absolute; width: 220px; height: 160px; background: #fff; border: 4px solid var(--navy-deep); border-radius: 12px; box-shadow: 0 15px 30px rgba(0,0,0,0.1); z-index: 3; top: 20%; right: 10%; }
.about-mock-monitor-bar { height: 12px; border-bottom: 2px solid rgba(0,0,0,0.05); display: flex; align-items: center; padding: 0 8px; gap: 4px; }
.about-mock-sim { position: absolute; width: 100px; height: 120px; background: var(--navy-deep); border-radius: 8px; box-shadow: 0 15px 30px rgba(0,0,0,0.15); z-index: 2; left: 10%; top: 10%; display: flex; flex-direction: column; padding: 12px; gap: 4px; }
.about-mock-shield { position: absolute; width: 140px; height: 160px; background: #fff; border: 4px solid var(--navy-deep); border-radius: 12px 12px 60px 60px; box-shadow: 0 20px 40px rgba(0,0,0,0.1); z-index: 4; left: 20%; bottom: 10%; display: flex; align-items: center; justify-content: center; }
.about-mock-router { position: absolute; width: 160px; height: 60px; background: var(--navy-deep); border-radius: 8px; box-shadow: 0 20px 40px rgba(0,0,0,0.15); z-index: 3; right: 20%; bottom: 15%; display: flex; align-items: center; justify-content: center; gap: 8px; }
.about-router-ant-1 { position: absolute; top: -20px; left: 20px; width: 4px; height: 20px; background: var(--navy-deep); }
.about-router-ant-2 { position: absolute; top: -20px; right: 20px; width: 4px; height: 20px; background: var(--navy-deep); }
.timeline-line { position: absolute; top: 36px; left: 0; right: 0; height: 2px; background: rgba(255,184,0,0.3); z-index: 1; }
.timeline-icon-container { width: 72px; height: 72px; border-radius: 50%; background: var(--navy-deep); border: 2px solid var(--amber); display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 8px var(--navy-deep); }

@media (max-width: 860px) {
  .text-h1 { font-size: 36px; }
  .text-h2 { font-size: 28px; }
  .text-h3 { font-size: 15px; }
  .section-padding { padding: 60px 0; }
  .btn-row { flex-direction: column; width: 100%; gap: 12px; }
  .btn-row a { width: 100%; text-align: center; justify-content: center; }
  .responsive-hero-grid { grid-template-columns: 1fr; text-align: center; gap: 40px; }
  .responsive-hero-grid .btn-row { justify-content: center; }
  .cta-banner, .cta-banner-dark { flex-direction: column; text-align: center; padding: 32px 24px; gap: 24px; }
  .cta-banner .flex, .cta-banner-dark .flex { flex-direction: column; text-align: center; justify-content: center; }
  .cta-banner .text-left, .cta-banner-dark .text-left { text-align: center; }
}