/* =====================================================
   ICNEA WEBSITE V2
   Phase 1 — recoloured to the dark / teal brand theme
===================================================== */

:root{
    /* Dark premium base — matches the ICNEA product imagery */
    --ink:#070a0c;          /* deepest near-black */
    --paper:#0c1114;        /* primary page surface */
    --warm:#121a1e;         /* slightly raised dark surface */
    --panel:#0f161a;        /* card surface */

    /* Cyan / teal accent — the glowing ICNEA logo colour */
    --gold:#18c6c6;
    --gold-light:#3fe0e0;
    --gold-pale:rgba(24,198,198,.08);
    --teal:#15a3a3;
    --teal-light:#3fe0e0;

    --red:#ff5a4d;
    --green:#22c55e;
    --amber:#f59e0b;

    --text:#e8f0f1;
    --text-soft:#9fb1b5;
    --mid:#7f9398;
    --border:rgba(180,220,225,.12);
    --ink-on-accent:#04181a;
}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{

    font-family:'Outfit',sans-serif;
    color:var(--text);
    background:var(--paper);
    overflow-x:hidden;

}


/* ======================================
   Containers
====================================== */

.container{

    width:min(1200px,92%);
    margin:auto;

}


/* ======================================
   Navigation
====================================== */

.navbar{

    position:fixed;

    top:20px;

    left:50%;

    transform:translateX(-50%);

    width:min(1250px,94%);

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:16px 26px;

    border-radius:18px;

    background:rgba(7,10,12,.72);

    backdrop-filter:blur(18px);

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

    border:1px solid var(--border);

    box-shadow:
    0 10px 35px rgba(0,0,0,.4);

    z-index:999;

}


.logo img{

    height:42px;

}


nav{

    display:flex;

    gap:34px;

}


nav a{

    text-decoration:none;

    color:var(--text);

    font-weight:500;

    transition:.3s;

}


nav a:hover{

    color:var(--gold-light);

}


.button-nav{

    text-decoration:none;

    background:linear-gradient(135deg,var(--gold),var(--gold-light));

    color:var(--ink-on-accent);

    padding:14px 24px;

    border-radius:999px;

    font-weight:600;

    transition:.35s;

    box-shadow:
    0 10px 25px rgba(24,198,198,.35);

}


.button-nav:hover{

    transform:translateY(-2px);

    box-shadow:
    0 14px 32px rgba(24,198,198,.5);

}


/* ======================================
Hero
====================================== */

.hero{

    position:relative;

    min-height:100vh;

    display:flex;

    flex-direction:column;

    justify-content:center;

    overflow:hidden;

}


.hero-background{

    position:absolute;

    inset:0;

    background:

    radial-gradient(circle at 15% 20%,
    rgba(24,198,198,.14),
    transparent 35%),

    radial-gradient(circle at 85% 15%,
    rgba(63,224,224,.16),
    transparent 30%),

    radial-gradient(circle at 60% 85%,
    rgba(24,198,198,.10),
    transparent 32%);

    z-index:0;

}


.hero-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    align-items:center;

    gap:70px;

    position:relative;

    z-index:1;

    padding-top:140px;

}


/* ======================================
Text
====================================== */

.development-tag{

    display:inline-block;

    padding:10px 18px;

    border-radius:999px;

    background:var(--gold-pale);

    color:var(--gold-light);

    font-weight:600;

    margin-bottom:30px;

    border:1px solid rgba(24,198,198,.25);

}


.hero h1{

    font-family:'Cormorant Garamond',serif;

    font-weight:600;

    font-size:74px;

    line-height:1;

    margin-bottom:28px;

    letter-spacing:-2px;

    color:var(--text);

}


.hero p{

    font-size:21px;

    line-height:1.8;

    max-width:620px;

    color:var(--text-soft);

}


/* ======================================
Buttons
====================================== */

.hero-buttons{

    display:flex;

    gap:18px;

    margin-top:42px;

}


.button-primary{

    text-decoration:none;

    background:linear-gradient(135deg,var(--gold),var(--gold-light));

    color:var(--ink-on-accent);

    padding:18px 34px;

    border-radius:999px;

    font-weight:600;

    transition:.35s;

    box-shadow:
    0 12px 30px rgba(24,198,198,.32);

}


.button-primary:hover{

    transform:translateY(-3px);

    box-shadow:
    0 16px 40px rgba(24,198,198,.5);

}


.button-secondary{

    text-decoration:none;

    color:var(--text);

    border:2px solid var(--border);

    padding:18px 34px;

    border-radius:999px;

    transition:.35s;

}


.button-secondary:hover{

    border-color:var(--gold);

    color:var(--gold-light);

}


/* ======================================
Tracker
====================================== */

.hero-right{

    display:flex;

    justify-content:center;

}


.tracker{

    width:560px;

    animation:float 8s ease-in-out infinite;

    filter:
    drop-shadow(0 35px 45px rgba(0,0,0,.6));

}


@keyframes float{

0%{

transform:translateY(0px);

}

50%{

transform:translateY(-10px);

}

100%{

transform:translateY(0px);

}

}


/* ======================================
Feature cards
====================================== */

.hero-features{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:28px;

    margin-top:90px;

    margin-bottom:80px;

    position:relative;

    z-index:1;

}


.collar-showcase{

    text-align:center;

    margin-bottom:70px;

    position:relative;

    z-index:1;

}

.collar-showcase img{

    max-width:min(900px,100%);

    width:100%;

    height:auto;

    border-radius:28px;

    box-shadow:

    0 25px 60px rgba(0,0,0,.5);

    border:1px solid var(--border);

}


.feature-card{

    background:var(--panel);

    padding:42px;

    border-radius:24px;

    text-align:center;

    transition:.35s;

    border:1px solid var(--border);

    box-shadow:
    0 12px 30px rgba(0,0,0,.35);

}


.feature-card:hover{

    transform:translateY(-6px);

    border-color:rgba(24,198,198,.3);

    box-shadow:
    0 24px 45px rgba(24,198,198,.15);

}


.feature-icon{

    width:60px;

    height:60px;

    border-radius:50%;

    background:var(--gold-pale);

    border:1px solid rgba(24,198,198,.25);

    display:flex;

    justify-content:center;

    align-items:center;

    margin:0 auto 8px;

    color:var(--gold-light);

}


.feature-card h3{

    font-family:'Cormorant Garamond',serif;

    font-size:30px;

    margin-top:18px;

    color:var(--text);

}


.feature-card p{

    color:var(--text-soft);

    margin-top:8px;

}


/* ======================================
Scroll
====================================== */

.scroll-indicator{

    text-align:center;

    color:var(--text-soft);

    margin-bottom:60px;

}


.scroll-arrow{

    margin-top:12px;

    font-size:28px;

    color:var(--gold-light);

    animation:bounce 2s infinite;

}


@keyframes bounce{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(8px);

}

}


/* ======================================
Responsive
====================================== */

@media(max-width:980px){

.hero-grid{

grid-template-columns:1fr;

text-align:center;

}

.hero-right{

order:-1;

}

.hero h1{

font-size:54px;

}

.hero p{

margin:auto;

}

.hero-buttons{

justify-content:center;

flex-wrap:wrap;

}

.hero-features{

grid-template-columns:1fr;

}

.tracker{

width:85%;

}

nav{

display:none;

}

}
/* ======================================
Pulse Animation
====================================== */

.tracker-pulse{

    position:relative;

    display:flex;

    justify-content:center;

    align-items:center;

}

.pulse-ring{

    position:absolute;

    width:180px;

    height:180px;

    border-radius:50%;

    border:2px solid rgba(24,198,198,.3);

    animation:pulse 2.4s ease-out forwards;

}

@keyframes pulse{

0%{

transform:scale(.6);

opacity:.5;

}

100%{

transform:scale(2.4);

opacity:0;

}

}



/* ======================================
Feature Cards Fade
====================================== */

.feature-card{

    opacity:0;

    transform:translateY(35px);

}

.feature-card.visible{

    opacity:1;

    transform:translateY(0);

    transition:

    opacity .7s ease,

    transform .7s ease;

}
/* ======================================
Technology
====================================== */

.technology{

    padding:70px 0;

    background:var(--warm);

}

.section-title{

    text-align:center;

    max-width:900px;

    margin:auto;

    margin-bottom:90px;

}

.section-tag{

    display:inline-block;

    padding:10px 18px;

    background:var(--gold-pale);

    color:var(--gold-light);

    border-radius:999px;

    font-weight:600;

    margin-bottom:26px;

    border:1px solid rgba(24,198,198,.25);

}

.section-title h2{

    font-family:'Cormorant Garamond',serif;

    font-size:54px;

    line-height:1.15;

    margin-bottom:28px;

    color:var(--text);

}

.section-title p{

    font-size:20px;

    line-height:1.9;

    color:var(--text-soft);

}

.technology-flow{

    display:flex;

    flex-direction:row;

    align-items:flex-start;

    justify-content:center;

    flex-wrap:nowrap;

    gap:8px;

}

.tech-step{

    width:185px;

    flex:0 0 185px;

    background:var(--panel);

    border-radius:22px;

    padding:26px 16px;

    text-align:center;

    border:1px solid var(--border);

    box-shadow:

    0 15px 40px rgba(0,0,0,.35);

    transition:.35s;

}

.tech-step:hover{

    transform:translateY(-6px);

    border-color:rgba(24,198,198,.3);

}

.tech-step h3{

    font-family:'Cormorant Garamond',serif;

    margin-top:14px;

    margin-bottom:10px;

    font-size:21px;

    color:var(--text);

}

.tech-step p{

    color:var(--text-soft);

    line-height:1.6;

    font-size:14px;

}

.tech-icon{

    width:56px;

    height:56px;

    border-radius:50%;

    background:var(--gold-pale);

    display:flex;

    justify-content:center;

    align-items:center;

    margin:auto;

    font-size:22px;

}

.tech-icon svg{

    width:22px;

    height:22px;

}

.home-icon{

    background:rgba(63,224,224,.08);

}

.flow-arrow{

    font-size:24px;

    color:var(--gold-light);

    margin:0;

    margin-top:44px;

    flex:0 0 auto;

}

.gps{

    border:2px solid rgba(24,198,198,.22);

}

@media(max-width:1150px){

.technology-flow{

flex-direction:column;

align-items:center;

gap:0;

}

.tech-step{

width:380px;

flex:none;

padding:36px;

}

.tech-step h3{

font-size:30px;

margin-top:18px;

margin-bottom:14px;

}

.tech-step p{

font-size:16px;

line-height:1.8;

}

.tech-icon{

width:72px;

height:72px;

font-size:28px;

}

.tech-icon svg{

width:30px;

height:30px;

}

.flow-arrow{

font-size:46px;

margin:24px 0;

transform:rotate(90deg);

align-self:center;

}

}
/* ======================================
Engineering Progress
====================================== */

.engineering{

padding:180px 0;

background:var(--paper);

}

.progress-grid{

display:grid;

grid-template-columns:repeat(2,1fr);

gap:40px;

}

.progress-card{

background:var(--panel);

border-radius:28px;

overflow:hidden;

border:1px solid var(--border);

box-shadow:

0 18px 45px rgba(0,0,0,.4);

transition:.35s;

}

.progress-card:hover{

transform:translateY(-8px);

border-color:rgba(24,198,198,.3);

}

.progress-card img{

width:100%;

height:320px;

object-fit:cover;

display:block;

filter:brightness(.9) saturate(1.05);

}

.progress-text{

padding:34px;

}

.progress-text h3{

font-family:'Cormorant Garamond',serif;

font-size:30px;

margin-bottom:16px;

color:var(--text);

}

.progress-text p{

line-height:1.8;

color:var(--text-soft);

}

@media(max-width:980px){

.progress-grid{

grid-template-columns:1fr;

}

}
/* ======================================
Founder
====================================== */

.founder{

padding:70px 0;

background:var(--warm);

}

.founder-grid{

display:grid;

grid-template-columns:1.2fr .8fr;

gap:90px;

align-items:center;

}

.founder h2{

font-family:'Cormorant Garamond',serif;

font-size:56px;

line-height:1.1;

margin:25px 0 35px;

color:var(--text);

}

.founder p{

font-size:20px;

line-height:1.9;

margin-bottom:24px;

color:var(--text-soft);

}

.quote-card{

padding:60px;

border-radius:30px;

background:linear-gradient(145deg,var(--gold),var(--gold-light));

color:var(--ink-on-accent);

box-shadow:

0 35px 70px rgba(24,198,198,.3);

}

.quote-mark{

font-size:90px;

opacity:.35;

margin-bottom:20px;

font-family:'Cormorant Garamond',serif;

}

.quote-card h3{

font-family:'Cormorant Garamond',serif;

font-size:34px;

line-height:1.4;

margin-bottom:28px;

font-weight:600;

}

@media(max-width:980px){

.founder-grid{

grid-template-columns:1fr;

}

}
/* ======================================
Roadmap
====================================== */

.roadmap{

padding:70px 0;

background:var(--paper);

}

.roadmap-grid{

display:grid;

grid-template-columns:repeat(2,1fr);

gap:30px;

margin-top:70px;

}

.roadmap-item{

background:var(--panel);

padding:35px;

border-radius:24px;

position:relative;

box-shadow:0 15px 40px rgba(0,0,0,.35);

transition:.35s;

border:1px solid var(--border);

border-left:6px solid var(--border);

}

.roadmap-item:hover{

transform:translateY(-6px);

}

.status-dot{

position:absolute;

right:30px;

top:30px;

width:14px;

height:14px;

border-radius:50%;

}

.complete{

border-left-color:var(--green);

}

.complete .status-dot{

background:var(--green);

box-shadow:0 0 8px rgba(34,197,94,.6);

}

.progress{

border-left-color:var(--gold);

}

.progress .status-dot{

background:var(--gold);

box-shadow:0 0 8px rgba(24,198,198,.6);

}

.future{

border-left-color:var(--border);

}

.future .status-dot{

background:var(--mid);

}

.roadmap-item h3{

font-family:'Cormorant Garamond',serif;

font-size:28px;

margin-bottom:15px;

color:var(--text);

}

.roadmap-item p{

color:var(--text-soft);

line-height:1.7;

}

@media(max-width:980px){

.roadmap-grid{

grid-template-columns:1fr;

}

}
/* ======================================
Comparison
====================================== */

.comparison{

padding:70px 0;

background:var(--warm);

}

.comparison-grid{

display:grid;

grid-template-columns:repeat(2,1fr);

gap:45px;

margin-top:70px;

}

.comparison-card{

padding:55px;

border-radius:30px;

box-shadow:

0 18px 45px rgba(0,0,0,.35);

transition:.35s;

}

.comparison-card:hover{

transform:translateY(-8px);

}

.icnea{

background:linear-gradient(145deg,var(--gold),var(--gold-light));

color:var(--ink-on-accent);

}

.typical{

background:var(--panel);

border:1px solid var(--border);

color:var(--text);

}

.comparison-card h3{

font-family:'Cormorant Garamond',serif;

font-size:34px;

margin-bottom:30px;

}

.comparison-card ul{

list-style:none;

}

.comparison-card li{

margin-bottom:22px;

font-size:19px;

line-height:1.6;

}

.typical li{

color:var(--text-soft);

}

@media(max-width:980px){

.comparison-grid{

grid-template-columns:1fr;

}

}
/* ======================================
Waiting List
====================================== */

.waiting{

padding:70px 0;

background:var(--paper);

}

.waiting-box{

max-width:900px;

margin:auto;

background:var(--panel);

padding:80px;

border-radius:32px;

text-align:center;

border:1px solid var(--border);

box-shadow:

0 25px 60px rgba(0,0,0,.4);

}

.waiting h2{

font-family:'Cormorant Garamond',serif;

font-size:54px;

margin:28px 0;

color:var(--text);

}

.waiting p{

font-size:20px;

line-height:1.8;

color:var(--text-soft);

max-width:700px;

margin:auto;

margin-bottom:45px;

}

.waiting-form{

display:flex;

gap:18px;

justify-content:center;

flex-wrap:wrap;

}

.waiting-form input{

width:420px;

padding:20px 24px;

border-radius:999px;

border:1.5px solid var(--border);

background:rgba(255,255,255,.04);

color:var(--text);

font-size:18px;

font-family:'Outfit',sans-serif;

outline:none;

transition:border-color .2s;

}

.waiting-form input::placeholder{

color:var(--mid);

}

.waiting-form input:focus{

border-color:var(--gold);

}

.waiting-form button{

padding:20px 34px;

border:none;

border-radius:999px;

background:linear-gradient(135deg,var(--gold),var(--gold-light));

color:var(--ink-on-accent);

font-size:17px;

font-weight:600;

cursor:pointer;

transition:.3s;

box-shadow:

0 12px 30px rgba(24,198,198,.3);

}

.waiting-form button:hover{

transform:translateY(-3px);

box-shadow:

0 16px 38px rgba(24,198,198,.45);

}
/* ======================================
Contact
====================================== */

.contact{

padding:70px 0;

background:var(--warm);

}

.contact-form{

max-width:900px;

margin:auto;

display:flex;

flex-direction:column;

gap:22px;

}

.contact-form input,

.contact-form textarea{

padding:22px;

border-radius:18px;

border:1.5px solid var(--border);

background:rgba(255,255,255,.04);

color:var(--text);

font-size:18px;

font-family:'Outfit',sans-serif;

resize:none;

outline:none;

transition:border-color .2s;

}

.contact-form input::placeholder,

.contact-form textarea::placeholder{

color:var(--mid);

}

.contact-form input:focus,

.contact-form textarea:focus{

border-color:var(--gold);

}

.contact-form button{

align-self:flex-start;

padding:18px 34px;

border:none;

border-radius:999px;

background:linear-gradient(135deg,var(--gold),var(--gold-light));

color:var(--ink-on-accent);

font-weight:600;

cursor:pointer;

transition:.3s;

box-shadow:

0 12px 30px rgba(24,198,198,.3);

}

.contact-form button:hover{

transform:translateY(-3px);

}
/* ======================================
Footer
====================================== */

.footer{

background:var(--ink);

padding:90px 0;

text-align:center;

color:var(--text);

border-top:1px solid var(--border);

}

.footer-logo{

height:55px;

margin-bottom:25px;

}

.footer p{

margin:12px 0;

opacity:.8;

color:var(--text-soft);

}