@import url("theme.css");
@import url("components.css");

/* ===========================================================
   NANIVOLT MAIN STYLESHEET
   Version 3.0
=========================================================== */

/* ========= RESET ========= */

*,
*::before,
*::after{

    margin:0;
    padding:0;
    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    font-family:"Inter",sans-serif;

    background:#F8FAFC;

    color:#0F172A;

    line-height:1.6;

    overflow-x:hidden;

    position:relative;

}

img{

    display:block;

    max-width:100%;

    height:auto;

    object-fit:contain;

}

a{

    text-decoration:none;

    color:inherit;

}

button{

    font-family:inherit;

    cursor:pointer;

}

.container{

    width:min(1200px,92%);

    margin:auto;

}

.hidden{

    display:none !important;

}
/* ===========================================================
   NAVBAR
=========================================================== */

.navbar{

    position:sticky;

    top:0;

    z-index:1000;

    width:100%;

    padding:18px 6%;

    display:flex;

    justify-content:space-between;

    align-items:center;

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

    backdrop-filter:blur(18px);

    border-bottom:1px solid rgba(15,23,42,.08);

}

.logo{

    display:flex;

    align-items:center;

    gap:12px;

}

.logo img{

    width:48px;

    height:48px;

    object-fit:contain;

    flex-shrink:0;

}

.logo span{

    font-size:1.45rem;

    font-weight:800;

    letter-spacing:-.03em;

}

nav{

    display:flex;

    gap:28px;

    align-items:center;

}

nav a{

    font-weight:600;

    color:#475569;

    transition:.25s;

}

nav a:hover{

    color:#2563EB;

}
/* ===========================================================
   BUTTONS
=========================================================== */

.primary-btn{

    background:linear-gradient(
        135deg,
        #2563EB,
        #3B82F6
    );

    color:white;

    border:none;

    padding:15px 32px;

    border-radius:16px;

    font-weight:700;

    transition:.35s;

    box-shadow:0 18px 45px rgba(37,99,235,.28);

}

.primary-btn:hover{

    transform:translateY(-5px);

    box-shadow:0 30px 60px rgba(37,99,235,.40);

}

.secondary-btn{

    background:white;

    color:#2563EB;

    border:2px solid #E2E8F0;

    padding:15px 32px;

    border-radius:16px;

    font-weight:600;

    transition:.35s;

}

.secondary-btn:hover{

    transform:translateY(-5px);

    border-color:#2563EB;

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

.hero{

    position:relative;

    overflow:hidden;

    min-height:92vh;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:140px 6% 100px;

    background:
    radial-gradient(circle at top left,#DBEAFE 0%,transparent 45%),
    radial-gradient(circle at bottom right,#E0F2FE 0%,transparent 45%),
    #F8FAFC;

}

.hero-grid{

    width:100%;

    display:grid;

    grid-template-columns:1.1fr 1fr;

    align-items:center;

    gap:80px;

    position:relative;

    z-index:2;

}

.hero-left{

    display:flex;

    flex-direction:column;

}

.hero-badge{

    display:inline-flex;

    align-items:center;

    width:fit-content;

    padding:10px 18px;

    border-radius:999px;

    background:#EFF6FF;

    color:#2563EB;

    border:1px solid #BFDBFE;

    font-weight:600;

    margin-bottom:24px;

}

.hero-left h1{

    font-size:clamp(3rem,6vw,5rem);

    line-height:1.05;

    font-weight:800;

    margin-bottom:24px;

    color:#0F172A;

}

.hero-left p{

    color:#64748B;

    font-size:1.1rem;

    line-height:1.8;

    max-width:620px;

    margin-bottom:36px;

}

.hero-buttons{

    display:flex;

    gap:18px;

    flex-wrap:wrap;

    margin-bottom:45px;

}

.hero-stats{

    display:flex;

    gap:50px;

}

.hero-stat h3{

    color:#2563EB;

    font-size:2rem;

}

.hero-stat span{

    color:#64748B;

}
/* ===========================================================
   HERO DASHBOARD
=========================================================== */

.hero-right{

    display:flex;

    justify-content:center;

    position:relative;

}

.dashboard-window{

    width:100%;

    max-width:560px;

    background:white;

    border-radius:26px;

    overflow:hidden;

    border:1px solid #E2E8F0;

    box-shadow:

    0 35px 90px rgba(15,23,42,.12);

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

}

.window-top{

    height:60px;

    display:flex;

    align-items:center;

    gap:10px;

    padding:0 20px;

    background:#F8FAFC;

    border-bottom:1px solid #E2E8F0;

}

.circle{

    width:12px;

    height:12px;

    border-radius:50%;

}

.red{

    background:#EF4444;

}

.yellow{

    background:#FACC15;

}

.green{

    background:#22C55E;

}

.window-content{

    padding:28px;

}
/* ===========================================================
   HERO RESPONSIVE
=========================================================== */

@media (max-width:900px){

    .hero{

        padding:120px 24px 80px;

        min-height:auto;

    }

    .hero-grid{

        grid-template-columns:1fr;

        text-align:center;

    }

    .hero-left{

        align-items:center;

    }

    .hero-buttons{

        justify-content:center;

    }

    .hero-stats{

        justify-content:center;

        flex-wrap:wrap;

    }

    .hero-right{

        margin-top:40px;

    }

}

@media (max-width:768px){

    nav{

        display:none;

    }

    .hero-left h1{

        font-size:2.5rem;

    }

    .hero-left p{

        font-size:1rem;

    }

    .primary-btn,
    .secondary-btn{

        width:100%;

    }

    .hero-buttons{

        width:100%;

        flex-direction:column;

    }

}
/* ===========================================================
   FEATURES
=========================================================== */

.features{

    padding:120px 0;

    background:#FFFFFF;

}

.section-title{

    text-align:center;

    max-width:760px;

    margin:0 auto 70px;

}

.section-title h2{

    font-size:2.8rem;

    color:#0F172A;

    margin-bottom:20px;

}

.section-title p{

    color:#64748B;

    line-height:1.8;

}

.feature-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));

    gap:30px;

}

.feature-card{

    background:white;

    padding:40px;

    border-radius:24px;

    border:1px solid #E2E8F0;

    transition:.35s;

    box-shadow:0 15px 40px rgba(15,23,42,.05);

}

.feature-card:hover{

    transform:translateY(-8px);

    box-shadow:0 30px 70px rgba(37,99,235,.10);

}

.feature-icon{

    width:70px;

    height:70px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:18px;

    background:linear-gradient(135deg,#2563EB,#60A5FA);

    color:white;

    margin-bottom:24px;

    font-size:2rem;

}

.feature-card h3{

    margin-bottom:15px;

    color:#0F172A;

}

.feature-card p{

    color:#64748B;

    line-height:1.8;

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

.process{

    padding:120px 0;

    background:#F8FAFC;

}

.process-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));

    gap:35px;

}

.process-step{

    background:white;

    padding:40px;

    border-radius:24px;

    border:1px solid #E2E8F0;

    text-align:center;

    transition:.35s;

}

.process-step:hover{

    transform:translateY(-8px);

    box-shadow:0 25px 60px rgba(37,99,235,.10);

}

.step-number{

    width:70px;

    height:70px;

    border-radius:50%;

    background:#2563EB;

    color:white;

    display:flex;

    align-items:center;

    justify-content:center;

    margin:0 auto 24px;

    font-weight:700;

    font-size:1.5rem;

}

.process-step h3{

    margin-bottom:15px;

}

.process-step p{

    color:#64748B;

    line-height:1.8;

}
/* ===========================================================
   GLOBAL CARD EFFECTS
=========================================================== */

.feature-card,
.process-step,
.price-card,
.dashboard-card,
.timeline-card{

    transition:

        transform .35s ease,

        box-shadow .35s ease;

}

.feature-card:hover,
.process-step:hover,
.price-card:hover,
.dashboard-card:hover,
.timeline-card:hover{

    transform:translateY(-8px);

    box-shadow:0 28px 70px rgba(37,99,235,.10);

}
/* ===========================================================
   PRICING
=========================================================== */

.pricing{

    padding:120px 0;

    background:#EEF6FF;

}

.pricing-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));

    gap:35px;

}

.price-card{

    background:white;

    border-radius:24px;

    padding:45px;

    border:1px solid #E2E8F0;

    box-shadow:0 18px 45px rgba(15,23,42,.05);

}

.price-card.featured{

    border:2px solid #2563EB;

    transform:scale(1.04);

}

.plan-tag{

    display:inline-block;

    padding:8px 16px;

    border-radius:999px;

    background:#DBEAFE;

    color:#2563EB;

    font-size:.85rem;

    font-weight:700;

    margin-bottom:22px;

}

.price{

    font-size:3rem;

    font-weight:800;

    color:#2563EB;

    margin:20px 0;

}

.price-card ul{

    list-style:none;

    margin-top:25px;

}

.price-card li{

    margin-bottom:14px;

    color:#64748B;

}
/* ===========================================================
   CALL TO ACTION
=========================================================== */

.cta{

    padding:140px 0;

    text-align:center;

    color:white;

    background:linear-gradient(135deg,#2563EB,#3B82F6,#60A5FA);

    position:relative;

    overflow:hidden;

}

.cta h2{

    font-size:3rem;

    margin-bottom:25px;

}

.cta p{

    max-width:760px;

    margin:auto;

    line-height:1.9;

    margin-bottom:40px;

    opacity:.95;

}

.cta-buttons{

    display:flex;

    justify-content:center;

    gap:20px;

    flex-wrap:wrap;

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

.footer{

    background:#0F172A;

    color:white;

    padding:90px 0 35px;

}

.footer-grid{

    display:grid;

    grid-template-columns:2fr 1fr 1fr 1fr;

    gap:45px;

}

.footer-logo{

    width:56px;

    margin-bottom:20px;

}

.footer h4{

    margin-bottom:18px;

}

.footer p{

    color:#94A3B8;

    line-height:1.8;

}

.footer a{

    display:block;

    color:#CBD5E1;

    margin-bottom:12px;

    transition:.25s;

}

.footer a:hover{

    color:white;

    padding-left:6px;

}

.footer-bottom{

    margin-top:60px;

    border-top:1px solid rgba(255,255,255,.08);

    padding-top:25px;

    text-align:center;

    color:#94A3B8;

}@media (max-width:900px){

    .footer-grid{

        grid-template-columns:1fr;

        text-align:center;

    }

}
/* ===========================================================
   AURORA BACKGROUND
=========================================================== */

.hero::before{

    content:"";

    position:absolute;

    width:520px;

    height:520px;

    border-radius:50%;

    background:#60A5FA;

    opacity:.12;

    filter:blur(120px);

    top:-180px;

    left:-150px;

    animation:auroraLeft 12s ease-in-out infinite;

}

.hero::after{

    content:"";

    position:absolute;

    width:420px;

    height:420px;

    border-radius:50%;

    background:#3B82F6;

    opacity:.10;

    filter:blur(110px);

    right:-120px;

    bottom:-120px;

    animation:auroraRight 14s ease-in-out infinite;

}

@keyframes auroraLeft{

    0%,100%{

        transform:translate(0,0) scale(1);

    }

    50%{

        transform:translate(50px,-40px) scale(1.15);

    }

}

@keyframes auroraRight{

    0%,100%{

        transform:translate(0,0) scale(1);

    }

    50%{

        transform:translate(-50px,35px) scale(1.12);

    }

}
/* ===========================================================
   FLOAT ANIMATION
=========================================================== */

@keyframes float{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-12px);

    }

}
/* ===========================================================
   MOUSE SPOTLIGHT
=========================================================== */

#spotlight{

    position:fixed;

    width:180px;

    height:180px;

    border-radius:50%;

    pointer-events:none;

    background:radial-gradient(

        circle,

        rgba(37,99,235,.12) 0%,

        rgba(37,99,235,.05) 45%,

        transparent 75%

    );

    transform:translate(-50%,-50%);

    filter:blur(40px);

    opacity:0;

    transition:opacity .25s ease;

    z-index:-1;

}
/* ===========================================================
   SCROLL REVEAL
=========================================================== */

.reveal{

    opacity:0;

    transform:translateY(50px);

    transition:

        opacity .8s ease,

        transform .8s ease;

}

.reveal.active{

    opacity:1;

    transform:translateY(0);

}
/* ===========================================================
   TIMELINE
=========================================================== */

.timeline{

    padding:120px 0;

    background:#F8FAFC;

}

.timeline-wrapper{

    max-width:900px;

    margin:auto;

    position:relative;

}

.timeline-wrapper::before{

    content:"";

    position:absolute;

    left:32px;

    top:0;

    bottom:0;

    width:4px;

    background:#2563EB;

}

.timeline-item{

    display:flex;

    gap:30px;

    margin-bottom:50px;

    position:relative;

}

.timeline-dot{

    width:28px;

    height:28px;

    border-radius:50%;

    background:#2563EB;

    border:6px solid white;

    box-shadow:0 0 25px rgba(37,99,235,.35);

    flex-shrink:0;

    z-index:2;

}

.timeline-card{

    flex:1;

    background:white;

    padding:28px;

    border-radius:20px;

    border:1px solid #E2E8F0;

}
/* ===========================================================
   FLOATING PARTICLES
=========================================================== */

.particles{

    position:absolute;

    inset:0;

    overflow:hidden;

    pointer-events:none;

}

.particles span{

    position:absolute;

    width:8px;

    height:8px;

    border-radius:50%;

    background:#60A5FA;

    opacity:.35;

    animation:particleFloat linear infinite;

}

@keyframes particleFloat{

    from{

        transform:translateY(110vh);

    }

    to{

        transform:translateY(-20vh);

    }

}
/* ===========================================================
   FINAL RESPONSIVE
=========================================================== */

@media (max-width:992px){

    section{

        padding:90px 0;

    }

}

@media (max-width:768px){

    .feature-grid,
    .pricing-grid,
    .process-grid{

        grid-template-columns:1fr;

    }

    .timeline-item{

        flex-direction:column;

        padding-left:20px;

    }

    .timeline-wrapper::before{

        display:none;

    }

    .cta h2{

        font-size:2.2rem;

    }

    .section-title h2{

        font-size:2.2rem;

    }

}

@media (max-width:480px){

    .container{

        width:94%;

    }

    .hero{

        padding:110px 20px 70px;

    }

    .hero-left h1{

        font-size:2.1rem;

    }

    .primary-btn,
    .secondary-btn{

        padding:14px 22px;

    }

}
.price-card.featured{

    border:2px solid #2563EB;

    transform:scale(1.05);

    position:relative;

}

.plan-tag{

    display:inline-block;

    background:#2563EB;

    color:white;

    padding:8px 16px;

    border-radius:999px;

    font-size:.8rem;

    font-weight:700;

    margin-bottom:20px;

}
/* ===============================
AUTH MODAL
===============================*/

.auth-modal{

position:fixed;
inset:0;
background:rgba(0,0,0,.55);

display:flex;
align-items:center;
justify-content:center;

z-index:9999;

backdrop-filter:blur(8px);

transition:.35s;

}

.auth-modal.hidden{

display:none;

}

.auth-card{

width:420px;
max-width:92%;

background:white;

border-radius:24px;

padding:40px;

box-shadow:0 30px 80px rgba(0,0,0,.25);

position:relative;

animation:popup .35s ease;

}

@keyframes popup{

from{

opacity:0;
transform:translateY(30px) scale(.95);

}

to{

opacity:1;
transform:none;

}

}

.auth-logo{

width:70px;

display:block;

margin:auto;

margin-bottom:20px;

}

.auth-card h2{

text-align:center;

margin-bottom:8px;

}

.auth-card p{

text-align:center;

color:#64748B;

margin-bottom:20px;

}

.auth-card input{

width:100%;

padding:15px;

border-radius:12px;

border:1px solid #CBD5E1;

margin-bottom:14px;

font-size:15px;

}

.auth-btn{

width:100%;

margin-top:5px;

}

.google-btn{

width:100%;

padding:15px;

border:none;

border-radius:12px;

background:#F8FAFC;

cursor:pointer;

display:flex;

justify-content:center;

align-items:center;

gap:10px;

font-weight:600;

margin-top:18px;

}

.google-btn img{

width:20px;

}

.auth-divider{

display:flex;

justify-content:center;

margin-top:18px;

color:#94A3B8;

}

.switch-auth{

margin-top:22px;

text-align:center;

}

.close-auth{

position:absolute;

top:15px;

right:15px;

background:none;

border:none;

font-size:22px;

cursor:pointer;

}

/* ── AUTH LOADING OVERLAY ── */
.loading-overlay{
  position:fixed;
  inset:0;
  background:rgba(255,255,255,.88);
  backdrop-filter:blur(8px);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:99999;
}
.loading-overlay.hidden{display:none!important}
.loading-box{
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:16px;
}
.loading-box h2{font-size:18px;font-weight:600;color:#0f172a}
.loading-box p{font-size:13px;color:#6b7280}
.auth-spinner{
  width:52px;
  height:52px;
  border:4px solid #e2e8f0;
  border-top-color:#2563eb;
  border-radius:50%;
  animation:authSpin .85s linear infinite;
}
@keyframes authSpin{to{transform:rotate(360deg)}}

/* ===========================================================
   RESPONSIVE IMAGES — ALL SCREENS
=========================================================== */

/* Navbar logo */
.logo img{
    width:clamp(32px,5vw,48px);
    height:clamp(32px,5vw,48px);
    object-fit:contain;
    flex-shrink:0;
}

/* Footer logo */
.footer-logo{
    width:clamp(40px,6vw,56px);
    height:auto;
}

/* Auth modal logo */
.auth-logo{
    width:clamp(52px,10vw,70px);
    height:auto;
    margin:0 auto 20px;
}

/* Google button icon */
.google-btn img{
    width:20px;
    height:20px;
    flex-shrink:0;
}

/* Hero image (about/contact pages) */
.hero-image img{
    width:clamp(100px,20vw,180px);
    height:auto;
    margin:0 auto;
}

/* Dashboard window — prevent overflow on small screens */
.dashboard-window{
    width:100%;
    max-width:min(560px,100%);
}

@media(max-width:768px){

    /* Hero image hidden on mobile — text is enough */
    .hero-image{ display:none; }

    /* Dashboard window in hero */
    .hero-right .dashboard-window{
        max-width:100%;
        border-radius:16px;
    }

    /* Navbar logo slightly smaller */
    .logo img{ width:36px; height:36px; }

    /* Footer logo */
    .footer-logo{ width:44px; }

    /* Auth logo */
    .auth-logo{ width:56px; }

    /* Any standalone img inside a card or section */
    .card img,
    section img:not(.logo img):not(.footer-logo):not(.auth-logo){
        max-width:100%;
        height:auto;
    }

}

@media(max-width:480px){

    .logo img{ width:32px; height:32px; }

    .logo span{ font-size:1.15rem; }

    /* Window content padding tighter */
    .window-content{ padding:16px; }

}

/* ===========================================================
   TRUST BAR
=========================================================== */

.trust-bar{
    padding:22px 0;
    background:#EFF6FF;
    border-top:1px solid #BFDBFE;
    border-bottom:1px solid #BFDBFE;
    overflow-x:auto;
}
.trust-bar .container{
    display:flex;
    gap:28px;
    align-items:center;
    flex-wrap:wrap;
    justify-content:center;
}
.trust-bar span{
    font-size:13px;
    font-weight:600;
    color:#2563EB;
    white-space:nowrap;
    padding:6px 14px;
    background:#fff;
    border-radius:99px;
    border:1px solid #BFDBFE;
}
@media(max-width:768px){
    .trust-bar .container{ gap:10px; }
    .trust-bar span{ font-size:11px; padding:5px 10px; }
}

/* ===========================================================
   SHOWCASE
=========================================================== */

.showcase{ padding:120px 0; background:#fff; }
.showcase-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:70px;
    align-items:center;
}
.showcase-list{
    list-style:none;
    margin-top:24px;
    display:flex;
    flex-direction:column;
    gap:10px;
}
.showcase-list li{ font-size:15px; color:#475569; font-weight:500; }
.section-tag{
    display:inline-block;
    background:#EFF6FF;
    color:#2563EB;
    font-size:12px;
    font-weight:700;
    padding:6px 14px;
    border-radius:99px;
    border:1px solid #BFDBFE;
    margin-bottom:16px;
    letter-spacing:.05em;
}
.showcase-left h2{ font-size:2.4rem; font-weight:800; color:#0F172A; margin-bottom:16px; line-height:1.2; }
.showcase-left p{ color:#64748B; line-height:1.8; }
@media(max-width:900px){
    .showcase-grid{ grid-template-columns:1fr; gap:40px; }
    .showcase-right{ display:none; }
    .showcase-left h2{ font-size:2rem; }
}
@media(max-width:480px){
    .showcase-left h2{ font-size:1.7rem; }
    .showcase-list li{ font-size:14px; }
}

/* ===========================================================
   COMPARE TABLE — MOBILE
=========================================================== */

@media(max-width:768px){
    .compare-section{ padding:70px 0; }
    .compare-table-wrap{ border-radius:14px; }
    .compare-table th,
    .compare-table td{ padding:12px 10px; font-size:11px; }
    .compare-table th:first-child,
    .compare-table td:first-child{ font-size:11px; }
    .badge-green, .badge-red{ font-size:10px; padding:3px 7px; }
}
@media(max-width:480px){
    .compare-table th,
    .compare-table td{ padding:10px 7px; font-size:10px; }
    .compare-note{ font-size:12px; }
}

/* ===========================================================
   DEMO SECTION — MOBILE
=========================================================== */

@media(max-width:768px){
    .demo-section{ padding:70px 0; }
    .demo-frame{ border-radius:14px; }
    .demo-body{ flex-direction:column; min-height:auto; }
    .demo-sidebar{
        width:100%;
        flex-direction:row;
        flex-wrap:wrap;
        padding:10px 12px;
        gap:4px;
        border-right:none;
        border-bottom:1px solid #e2e8f0;
    }
    .demo-brand{ display:none; }
    .demo-nav-item{ padding:6px 10px; font-size:11px; }
    .demo-main{ padding:16px; }
    .demo-stats-row{ gap:8px; }
    .demo-stat strong{ font-size:16px; }
    .demo-quick{ flex-direction:column; gap:8px; }
    .demo-tabs{ gap:8px; }
    .demo-tab{ padding:8px 16px; font-size:12px; }
    /* tamper demo */
    .tamper-body{ padding:18px 14px; }
    .tamper-files{ flex-direction:column; align-items:center; gap:10px; }
    .tamper-file{ max-width:100%; width:100%; }
    .tamper-vs{ transform:rotate(90deg); }
    .tamper-result-card{ flex-direction:column; align-items:flex-start; gap:8px; padding:12px 14px; }
    #demoDiffResult{ flex-wrap:wrap; }
}
@media(max-width:480px){
    .demo-bar{ padding:10px 12px; gap:8px; }
    .demo-url{ font-size:10px; padding:3px 8px; }
    .d-red,.d-yellow,.d-green{ width:9px; height:9px; }
    .demo-result-card div{ flex-direction:column; align-items:flex-start; gap:2px; }
    .tamper-verdict{ font-size:11px; }
}

/* ===========================================================
   PRICING — MOBILE
=========================================================== */

@media(max-width:768px){
    .pricing-grid{ grid-template-columns:1fr; }
    .price-card.featured{ transform:none; }
    .notify-row{ flex-direction:column; }
    .notify-input, .notify-btn{ width:100%; }
}

/* ===========================================================
   FEATURES — MOBILE
=========================================================== */

@media(max-width:768px){
    .feature-grid{ grid-template-columns:1fr; }
    .feature-card{ padding:28px 24px; }
    .section-title h2{ font-size:1.9rem; }
    .section-title{ margin-bottom:40px; }
}

/* ===========================================================
   NAVBAR MOBILE HAMBURGER
=========================================================== */

.nav-actions{ display:flex; gap:10px; align-items:center; }
@media(max-width:768px){
    .nav-actions .secondary-btn{ display:none; }
    .primary-btn, .secondary-btn{ padding:12px 20px; font-size:13px; }
}
@media(max-width:480px){
    .navbar{ padding:14px 5%; }
    .logo span{ font-size:1.1rem; }
    .nav-actions .primary-btn{ padding:10px 16px; font-size:12px; }
}