/* =====================
    Color System
======================*/
:root{
  --primary-dark:#083032;
  --primary-light:#30C58F;
  --secondary:#B2F100;
  --accent:#C5B6F1;
  --text-dark:#083032;
  --text-light:#ffffff;
  --bg: #061e20;
}

#about .lead{ font-size: clamp(1.05rem, 1.5vw, 1.25rem); opacity:.95 }
#about .card ul{ margin:.25rem 0 .25rem 1.1rem }


.hero-about {
padding-top: 10rem;   /* was 4rem */
padding-bottom: 10rem; /* was 3rem */
text-align: center;
background: var(--primary-dark);
color: #fff;
}


/* =====================
    Base & Typography
======================*/
html,body{height:100%;}
body{
  margin:0; font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  color:var(--text-light);
  background: radial-gradient(1200px 600px at 80% -10%, #1a3b40 0%, #072b2e 60%, #051f21 100%);
  overflow-x:hidden;
}
h1{line-height:1.1;margin:0 4 .5rem}
h2,h3{line-height:1.1;margin:0 0 .5rem}
h1{font-size: clamp(3rem, 4.5vw, 3.2rem); font-weight:1200}
h2{font-size: clamp(1.4rem, 3vw, 2rem); font-weight:1000}
h3{font-size: clamp(1.1rem, 2.2vw, 1.25rem); font-weight:800}
p{margin:1rem 0 1rem; color:rgba(255,255,255,.9)}
.container{width:min(1100px,90%); margin:0 auto}

/* =====================
    Reusable UI
======================*/

/* header element or your existing header class */
.site-header{
position: relative;
background: var(--primary-dark);
isolation: isolate;
}
.site-header::after{
content:"";
position:absolute; inset:0;
pointer-events:none;
background-image:
radial-gradient(45vw 28vh at 0% -15%, rgba(48,197,143,.22), transparent 60%),    /* teal */
radial-gradient(55vw 36vh at 110% -10%, rgba(197,182,241,.22), transparent 62%); /* lavender */
background-repeat: no-repeat;           /* stops tiling (no seams) */
background-size: auto;                  /* lets the vw/vh sizes control extent */
z-index: -1;
}

.site-footer {
background: linear-gradient(
  90deg,
  rgba(197,182,241,0.06),
  rgba(8,48,50,0.9)
);
text-align: center;
padding: 28px 0;            /* ← increase this value for more thickness */
border-top: 1px solid rgba(197,182,241,.25);
}

.site-footer .footer-inner {
display: flex;
justify-content: center;
align-items: center;
gap: 16px;
font-size: 0.95rem;
color: #d8e0dd;
}

.pill{display:inline-block; padding:.4rem .7rem; border-radius:999px; font-size:.9rem; letter-spacing:.2px; background:rgba(197,182,241,.15); color:#e9e6fb;}

.btn {
--bg: var(--primary-light);
--fg: #022;
display: inline-block;
padding: 0.85rem 1.1rem;
border-radius: 12px;
background: var(--bg);
color: var(--fg);
font-weight: 700;
text-decoration: none;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
transition: 
transform 0.15s ease,
box-shadow 0.3s ease,
background 0.3s ease;
}

.btn:hover {
transform: translateY(-2px) scale(1.03);         /* subtle lift & scale */
box-shadow:
0 0 14px rgba(48, 197, 143, 0.5),              /* soft teal glow */
0 0 26px rgba(48, 197, 143, 0.35),             /* larger diffused glow */
0 8px 25px rgba(0, 0, 0, 0.15);                /* keep original depth */
}

/* Secondary button remains the same */
.btn.secondary {
display: inline-flex;                /* enables flex centering */
align-items: center;                 /* vertically center text */
justify-content: center;             /* horizontally center text */
height: 48px;                         /* set a fixed height for consistency */
padding: 0 24px;                      /* horizontal padding only */
line-height: 1;                       /* reset line-height */
font-weight: 600;
font-size: 1rem;
color: #C5B6F1;
background-color: transparent;
border: 1px solid #C5B6F1;
border-radius: 8px;
transition: box-shadow 0.3s ease, background-color 0.3s ease;
}

.btn.secondary:hover {
box-shadow: 0 0 10px rgba(197, 182, 241, 0.45);
background-color: rgba(197, 182, 241, 0.1);
}

.why-card {
position: relative;                 /* establishes positioning context for the icon */
padding: 2rem;
border: 1px solid rgba(255,255,255,0.1);
border-radius: 12px;
background: rgba(0,0,0,0.15);
overflow: hidden;
}

/* Icon placement */
.why-card .card-icon {
position: absolute;
bottom: 0px;                           /* adjust as needed */
right: 0px;                         /* adjust as needed */
width: 80px;                         /* icon size */
height: 80px;
opacity: 0.8;                         /* optional subtle look */
pointer-events: none;                /* avoids blocking text selection */
}

.kicker{color:var(--secondary); font-weight:700; letter-spacing:.24em; text-transform:uppercase; font-size:.8rem}

.contact a {
color: #C5B6F1;          /* Lavender color */
text-decoration: none;   /* Optional: removes underline */
}

.contact a:hover {
color: #e0d1ff;          /* Slightly lighter lavender on hover */
text-decoration: underline; /* Optional hover effect */
}

a[href^="mailto"] {
color: #C5B6F1;
text-decoration: none;
}

a[href^="mailto"]:hover {
color: #e0d1ff;
text-decoration: underline;
}

/* ===== Nav Bar ===== */
nav {
position: sticky;
top: 0;
z-index: 1000;              /* Keeps it above other sections */
background-color: #083032;  /* Ensure background is opaque */
}


.navbar{
position: fixed; top:0; left:0; right:0; height: var(--nav-h);
z-index: 2000;
display:flex; align-items:center; justify-content:space-between;
padding: 12px 5vw;
gap: 24px;
background:
linear-gradient(180deg, rgba(197,182,241,.10), rgba(48,197,143,.06)),
rgba(8,48,50,.92);
backdrop-filter: blur(8px);
border-bottom: 1px solid rgba(197,182,241,.45);
box-shadow: 0 8px 28px rgba(0,0,0,.25), 0 0 0 1px rgba(255,255,255,.05) inset;
}

.nav-spacer{ height: var(--nav-h); }  /* prevent content from sitting under the fixed nav */

.brand img{ height:36px; width:auto; display:block; }

/* links */
.nav-links{ display:flex; align-items:center; gap:18px; }
.nav-link{
color: var(--accent);               /* lavender text */
text-decoration:none;
font-weight:600;
padding:10px 12px;
border-radius:10px;
position:relative;
}
.nav-link::after{
content:""; position:absolute; left:10px; right:10px; bottom:6px;
height:2px; border-radius:2px;
background: linear-gradient(90deg, var(--accent), var(--secondary));
opacity:0; transform: translateY(4px);
transition: opacity .2s ease, transform .2s ease;
}
.nav-link:hover::after,
.nav-link:focus-visible::after{ opacity:1; transform: translateY(0); }

/* CTA button on the right */
.btn-cta {
--bg: var(--secondary);
display: inline-flex;
align-items: center;
justify-content: center;
padding: 10px 14px;
border-radius: 12px;
background: var(--secondary);
color: #072b2e;
font-weight: 800;
text-decoration: none;
box-shadow: 0 6px 20px rgba(178, 241, 0, 0.25);
border: 1px solid rgba(255, 255, 255, 0.1);

/* smooth transitions for glow, scale, and bg */
transition: 
transform 0.15s ease,
box-shadow 0.25s ease,
background 0.25s ease;
}

.btn-cta:hover {
transform: translateY(-2px) scale(1.03);               /* gentle lift + scale */
box-shadow:
0 0 18px rgba(178, 241, 0, 0.6),                     /* outer glow */
0 0 32px rgba(178, 241, 0, 0.4),                     /* softer larger glow */
0 10px 28px rgba(178, 241, 0, 0.35);                  /* existing shadow */
background: linear-gradient(
90deg,
rgba(178, 241, 0, 0.95),
rgba(48, 197, 143, 0.9)
);                                                     /* optional gradient glow */
}


/* Mobile */
.nav-toggle{
display:none; background:none; border:0; padding:8px; margin-left:auto; cursor:pointer;
}
.nav-toggle span{
display:block; width:22px; height:2px; margin:5px 0;
background: var(--accent); border-radius:2px;
}

/* Collapse below 780px */
@media (max-width: 780px){
.nav-toggle{ display:block; }
.nav-links{
position: absolute; left:0; right:0; top:100%;
display:grid; gap:10px; padding:12px 5vw 16px;
background: rgba(8,48,50,.96);
border-bottom:1px solid rgba(197,182,241,.35);
transform-origin: top;
transform: scaleY(0.95); opacity:0; visibility:hidden;
transition: transform .18s ease, opacity .18s ease, visibility .18s linear;
}
.navbar.is-open .nav-links{
transform: scaleY(1); opacity:1; visibility:visible;
}
}


/* =====================
    Hero
======================*/
.hero {
  position: relative;
  isolation: isolate;
  color: var(--text-light);
  padding: clamp(80px, 20vh, 400px) 0 120px;

  /* Flex layout for hero text */
  display: flex;
  align-items: flex-start; /* use flex-start instead of 'left' */
  justify-content: flex-start;
  text-align: left;

  /* Layered backgrounds: brain image on top of gradients */
  background-image:
    url("image/positronic4.png"),
    linear-gradient(180deg, rgba(8,48,50,.0) 0%, rgba(8,48,50,.5) 60%, rgba(8,48,50,1) 100%),
    radial-gradient(70vw 50vh at 20% 30%, rgba(48,197,143,.12), transparent 70%),
    radial-gradient(60vw 40vh at 80% 50%, rgba(197,182,241,.12), transparent 70%);
  
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
  background-size: 55%, cover, cover, cover;       /* brain image first */
  background-position: right 8% center, center, center, center;
}

.hero .container{        /* keep content above the artwork */
  position: relative;
  z-index: 1;
}

.hero::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;

  background-image: url("image/positronic4.png");
  background-repeat: no-repeat;
  background-size: min(52vw, 720px);         /* scale as you like */
  background-position: right -10% bottom 50%;      /* position on the right */
}    

.hero .title{max-width: 950px;}
.hero p.lead{font-size: clamp(1.05rem, 1.5vw, 1.25rem)}

.hero .cta-row{display:flex; gap:.8rem; flex-wrap:wrap; margin-top:1.1rem}

/* Remove any old .section::before rules and mask-image lines */
:root{
--primary-dark:#083032;
--primary-light:#30C58F; /* teal */
--secondary:#B2F100;     /* lime */
--accent:#C5B6F1;        /* lavender */
}

/* Base */
body{
background: var(--primary-dark);
color:#fff;
}

/* Single global accent backdrop — prevents seams entirely */
.page-bg::before{
content:"";
position: fixed;                /* fixed = one painter behind everything */
inset:-20vh -20vw;              /* oversize to cover at all scroll positions */
pointer-events:none;
z-index:-1;

background-image:
radial-gradient(1200px 560px at -10% -10%, rgba(48,197,143,.16), transparent 60%), /* teal */
radial-gradient(1100px 520px at 110% -8%, rgba(197,182,241,.16), transparent 62%), /* lavender */
radial-gradient(1400px 760px at 50% 120%, rgba(178,241,0,.10),  transparent 70%);  /* lime */

background-repeat: no-repeat;   /* no tiling, no seams */
background-size: auto;          /* sizes are driven by the radii above */
filter: saturate(105%);         /* optional tiny boost; remove if not needed */
}

/* Sections now have NO gradient background */
.section{
position: relative;
padding:72px 0;
background: transparent;        /* important: nothing painted here */
}

.section-white{
position: relative;
padding:72px 0;
background: whitesmoke;        /* important: nothing painted here */
}



.section::after{
content:"";
position:absolute; inset:0;
pointer-events:none;
background:
radial-gradient(60rem 24rem at 50% 0%, rgba(197,182,241,.05), transparent 70%); /* soft lavender halo near titles */
background-repeat:no-repeat;
}

/* Cards / lists */
.grid{display:grid; gap:18px}
@media (min-width:760px){ .grid.cols-3{grid-template-columns:repeat(3,1fr)} }
@media (min-width:760px){ .grid.cols-2{grid-template-columns:repeat(2,1fr)} }
@media (max-width:768px){ .grid.cols-4{grid-template-columns:repeat(2,1fr)} }
@media (max-width:480px){ .grid.cols-4{grid-template-columns:1fr} }

.card{background: rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); border-radius:14px; padding:18px 18px 16px; backdrop-filter: blur(6px)}
.card h3{margin-bottom:.3rem}
.card p{font-size:.96rem}
.card ul{margin:.25rem 0 .25rem 1.1rem; padding:0}

/* Accents */
.accent-line{height:2px; width:64px; background: linear-gradient(90deg, var(--secondary), var(--primary-light), var(--accent)); border-radius:2px; margin:.6rem 0 1rem}

/* Style for the CTA band */
.cta-band {
  background: linear-gradient(90deg, rgba(48,197,143,.10), rgba(197,182,241,.08));
  border: 1px solid #C5B6F1;          /* Lavender border */
  border-radius: 14px;
  padding: 18px;
  transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

/* Hover glow effect */
.cta-band:hover {
  box-shadow: 0 0 14px rgba(197,182,241,0.4);  /* Lavender glow */
  border-color: #C5B6F1;                       /* Keeps lavender border */
}


/* Footer */
footer{border-top:1px solid rgba(255,255,255,.08); padding:36px 0 64px; color:rgba(255,255,255,.8)}
footer a{color:#fff}

/* Accessibility tweaks */
a:focus-visible, button:focus-visible{outline:2px solid var(--secondary); outline-offset:2px}

.hero{background-image:linear-gradient(180deg, rgba(8,48,50,0) 0%, rgba(8,48,50,0.5) 60%, rgba(8,48,50,1) 100%), url('slide-background.png') !important; background-size:cover; background-position:center;}
/* Illustration slot above cards */
.illustration{display:none}
.icon {
height:56px; width:56px;
border-radius:14px;
margin-bottom:10px;
object-fit:contain;
padding:6px;
background: linear-gradient(135deg, var(--secondary), var(--primary-light));

}

/* Built Using logos */
.logo-grid{
display:grid; gap:16px;
grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
}

.logo-tile{
display:flex; align-items:center; justify-content:center;
padding:12px;
height:80px;
background:rgba(255,255,255,0.8);
border:3px solid rgba(255,255,255,.12);
border-radius:14px;
transition:transform .12s ease, box-shadow .25s ease, border-color .25s ease, filter .25s ease;
}

.logo-tile img{
max-width:100%;
max-height:100%;
object-fit:contain;
filter:grayscale(10%) contrast(1.1) opacity(0.9);
}

/* hover effect with lavender accent */
.logo-tile:hover{
border-color:rgba(197,182,241,.55);
box-shadow:0 0 14px rgba(197,182,241,.35);
background-color:rgba(255,255,255,0.9);
transform:translateY(-2px);
}
.logo-tile:hover img{
filter:grayscale(0%) opacity(1.1);
}

/* Contact Form Section */
.contact-form {
display: flex;
flex-direction: column;
gap: 1rem;
margin-top: 1.5rem;
}

.form-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
}

.form-field {
display: flex;
flex-direction: column;
}

.form-field.full-width {
grid-column: span 2;
}

label {
font-weight: 600;
margin-bottom: 6px;
color: rgba(255,255,255,0.85);
}

input, textarea {
background: rgba(255,255,255,0.08);
border: 1px solid rgba(197,182,241,0.35);
border-radius: 10px;
padding: 0.75rem;
color: #fff;
font-size: 1rem;
transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

input::placeholder,
textarea::placeholder {
color: rgba(255,255,255,0.5);
}

input:focus, textarea:focus {
outline: none;
border-color: #C5B6F1;
box-shadow: 0 0 8px rgba(197,182,241,0.4);
}

/* Stack fields on small screens */
@media (max-width: 768px) {
.form-grid {
  grid-template-columns: 1fr;
}
.form-field.full-width {
  grid-column: 1;
}
}

/* Use-case before/after icons */
.icon-pair{display:flex; align-items:center; gap:12px; margin-bottom:10px}
.usecase-icon{width:52px; height:52px; object-fit:contain; border-radius:12px; background:rgba(255,255,255,.03); padding:6px; box-shadow:0 6px 22px rgba(0,0,0,.18), 0 0 0 1px rgba(255,255,255,.06) inset}
.icon-pair .arrow{position:relative; flex:0 0 44px; height:2px; background: linear-gradient(90deg, var(--accent), var(--secondary)); border-radius:2px}
.icon-pair .arrow::after{content:'›'; position:absolute; right:-8px; top:-12px; color:var(--secondary); font-size:22px; line-height:1}


/* --- Icon rings --- */
.icon-ring{
  width: 44px; height: 44px; min-width: 44px;
  border: 2px solid rgba(0,0,0,.12);
  border-radius: 999px; display: grid; place-items: center;
  background: #fff;
}
.icon-ring svg{ width: 22px; height: 22px; display:block }

.card-head{
  display:flex; align-items:center; gap:.7rem;
  margin-bottom:.35rem;
}
.card-head h3{ margin:0 }

/* Color accents for quick scanning */
.icon-green svg{ stroke: #30C58F }
.icon-lime  svg{ stroke: #B2F100 }
.icon-lav   svg{ stroke: #C5B6F1 }
.icon-ink   svg{ stroke: #083032 }

/* --- Interactive visual (Why Positrio) --- */
.brain-visual{
  position: relative;
  background: #061f21;
  color: #eaffff;
  overflow: clip;
}
.brain-visual .brain-bg{
  position:absolute; inset:0;
  background: radial-gradient(60% 40% at 50% 20%, rgba(178,241,0,.18), transparent 55%),
              url('image/positronic4.png') center/cover no-repeat;
  opacity:.35; filter: saturate(110%) contrast(105%);
}
.brain-visual .container{ position:relative; 
}

.brain-visual .section-inner{
  padding: 4.5rem 0;
}
.reveal{
  opacity:0; transform: translateY(14px);
  transition: opacity .6s ease, transform .6s ease;
}
.reveal.show{
  opacity:1; transform: translateY(0);
}
.reveal + .reveal{ margin-top: 1.2rem }

/* add to your CSS */
.brain-visual .brain-bg::after{
  content:"";
  position:absolute; inset:-10%;
  background:
    radial-gradient(35% 25% at 50% 30%, rgba(178,241,0,.25), transparent 60%),
    radial-gradient(55% 40% at 65% 20%, rgba(48,197,143,.18), transparent 70%);
  filter: blur(18px);
  animation: brainGlow 6s ease-in-out infinite;
  pointer-events:none;
}
@keyframes brainGlow{
  0%,100%{ opacity:.55; transform: scale(1) }
  50%    { opacity:.9;  transform: scale(1.03) }
}


/* Animate dash to simulate a traveling signal */
.pulse{
  stroke-dasharray: 140 560;
  stroke-dashoffset: 700;
  animation: dash 3.2s ease-in-out infinite;
  mix-blend-mode: screen; /* glowy on dark bg */
}
.pulse.delay1{ animation-delay: .6s }
.pulse.delay2{ animation-delay: 1.2s }
@keyframes dash{
  0%   { stroke-dashoffset: 700; opacity:.1 }
  15%  { opacity:1 }
  60%  { opacity:1 }
  100% { stroke-dashoffset: -140; opacity:.1 }
}


/* Optional: slightly larger hero paddings if not already done */
.hero-about{ padding-top: 6rem; padding-bottom: 5rem; }