/* ============================================================
   CCR TECHLOG — Site Institucional
   ============================================================ */

:root{
    --bg:#0a0e1a;
    --bg-2:#0e1424;
    --surface:#121a2e;
    --surface-2:#182339;
    --line:rgba(255,255,255,0.08);
    --text:#e8edf7;
    --muted:#96a2bd;
    --brand:#2ee6a6;      /* verde tech */
    --brand-2:#3b82f6;    /* azul */
    --accent:#7c5cff;     /* roxo */
    --danger:#ff6b6b;
    --grad:linear-gradient(120deg,#2ee6a6,#3b82f6 55%,#7c5cff);
    --radius:18px;
    --shadow:0 20px 60px rgba(0,0,0,.45);
    --maxw:1180px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
    font-family:'Inter',system-ui,sans-serif;
    background:var(--bg);
    color:var(--text);
    line-height:1.6;
    overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,.logo{font-family:'Sora',sans-serif;line-height:1.15}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.container{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 24px}

/* ===== BUTTONS ===== */
.btn{
    display:inline-flex;align-items:center;justify-content:center;
    padding:14px 26px;border-radius:12px;font-weight:600;font-size:.98rem;
    cursor:pointer;border:none;transition:transform .2s ease,box-shadow .2s ease,background .2s;
    font-family:'Sora',sans-serif;
}
.btn--primary{background:var(--grad);color:#04121a;box-shadow:0 10px 30px rgba(46,230,166,.25)}
.btn--primary:hover{transform:translateY(-3px);box-shadow:0 16px 40px rgba(46,230,166,.35)}
.btn--ghost{background:transparent;color:var(--text);border:1px solid var(--line)}
.btn--ghost:hover{background:var(--surface);border-color:var(--brand)}

/* ===== HEADER ===== */
.header{
    position:fixed;top:0;left:0;right:0;z-index:100;
    padding:18px 0;transition:all .3s ease;
    background:rgba(10,14,26,0);
}
.header.scrolled{background:rgba(10,14,26,.9);backdrop-filter:blur(14px);padding:12px 0;border-bottom:1px solid var(--line)}
.header__inner{display:flex;align-items:center;justify-content:space-between}
.logo{font-weight:800;font-size:1.35rem;letter-spacing:-.5px;display:flex;gap:2px}
.logo__mark{color:var(--brand)}
.logo__text{color:var(--text)}
.nav{display:flex;align-items:center;gap:32px}
.nav__link{color:var(--muted);font-weight:500;font-size:.95rem;transition:color .2s}
.nav__link:hover{color:var(--text)}
.nav__cta{background:var(--surface-2);border:1px solid var(--line);padding:10px 18px;border-radius:10px;font-weight:600;font-size:.9rem;transition:all .2s}
.nav__cta:hover{border-color:var(--brand);color:var(--brand)}
.nav__toggle{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:6px}
.nav__toggle span{width:26px;height:2px;background:var(--text);transition:.3s;border-radius:2px}

/* ===== HERO ===== */
.hero{position:relative;padding:160px 0 90px;overflow:hidden}
.hero__glow{position:absolute;top:-20%;left:50%;transform:translateX(-50%);width:900px;height:600px;
    background:radial-gradient(circle,rgba(59,130,246,.22),transparent 60%);filter:blur(30px);z-index:0}
.hero__inner{position:relative;z-index:1;display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.badge{display:inline-block;background:rgba(46,230,166,.1);color:var(--brand);border:1px solid rgba(46,230,166,.25);
    padding:7px 16px;border-radius:100px;font-size:.82rem;font-weight:600;margin-bottom:22px;letter-spacing:.3px}
.hero__title{font-size:clamp(2.1rem,4.4vw,3.5rem);font-weight:800;letter-spacing:-1.5px;margin-bottom:22px}
.hero__title .grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.hero__title .strike{text-decoration:line-through;text-decoration-color:var(--danger);text-decoration-thickness:3px;color:var(--muted)}
.hero__desc{color:var(--muted);font-size:1.12rem;max-width:540px;margin-bottom:32px}
.hero__actions{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:40px}
.hero__trust{display:flex;gap:30px;flex-wrap:wrap}
.trust__item{display:flex;flex-direction:column}
.trust__item strong{color:var(--text);font-family:'Sora',sans-serif;font-size:1.05rem}
.trust__item span{color:var(--muted);font-size:.85rem}

/* Dashboard visual */
.hero__visual{position:relative}
.dashboard{background:linear-gradient(160deg,var(--surface),var(--bg-2));border:1px solid var(--line);
    border-radius:20px;box-shadow:var(--shadow);overflow:hidden;transform:perspective(1200px) rotateY(-6deg) rotateX(3deg)}
.dashboard__bar{display:flex;align-items:center;gap:8px;padding:14px 18px;border-bottom:1px solid var(--line);background:rgba(255,255,255,.02)}
.dashboard__bar .dot{width:11px;height:11px;border-radius:50%;background:#39415a}
.dashboard__bar .dot:nth-child(1){background:#ff5f57}.dashboard__bar .dot:nth-child(2){background:#febc2e}.dashboard__bar .dot:nth-child(3){background:#28c840}
.dashboard__bar p{margin-left:auto;color:var(--muted);font-size:.8rem;font-family:'Sora',sans-serif}
.dashboard__body{padding:22px;display:grid;grid-template-columns:1fr 1fr;gap:16px}
.kpi-card{background:var(--surface-2);border:1px solid var(--line);border-radius:14px;padding:16px}
.kpi-card__label{display:block;color:var(--muted);font-size:.78rem;margin-bottom:8px}
.kpi-card__value{font-family:'Sora',sans-serif;font-size:2rem;font-weight:800;color:var(--brand)}
.kpi-card__value.kpi-down{color:var(--brand-2)}
.kpi-card__suf{color:var(--muted);font-weight:700;font-size:1rem}
.spark{display:flex;align-items:flex-end;gap:4px;height:26px;margin-top:12px}
.spark i{flex:1;background:var(--brand);border-radius:2px;opacity:.7;animation:rise 1.4s ease infinite}
.spark--down i{background:var(--brand-2)}
.spark i:nth-child(1){height:40%;animation-delay:0s}.spark i:nth-child(2){height:70%;animation-delay:.1s}
.spark i:nth-child(3){height:50%;animation-delay:.2s}.spark i:nth-child(4){height:85%;animation-delay:.3s}
.spark i:nth-child(5){height:60%;animation-delay:.4s}.spark i:nth-child(6){height:95%;animation-delay:.5s}
.spark i:nth-child(7){height:75%;animation-delay:.6s}
.dashboard__chart{grid-column:1/-1;display:flex;align-items:flex-end;gap:10px;height:110px;padding:16px;background:var(--surface-2);border:1px solid var(--line);border-radius:14px}
.dashboard__chart .bar{flex:1;height:var(--h);background:var(--grad);border-radius:6px 6px 0 0;opacity:.85;animation:grow 1s ease backwards}
.dashboard__chart .bar:nth-child(2){animation-delay:.1s}.dashboard__chart .bar:nth-child(3){animation-delay:.2s}
.dashboard__chart .bar:nth-child(4){animation-delay:.3s}.dashboard__chart .bar:nth-child(5){animation-delay:.4s}
.dashboard__chart .bar:nth-child(6){animation-delay:.5s}
@keyframes rise{0%,100%{transform:scaleY(.85)}50%{transform:scaleY(1)}}
@keyframes grow{from{height:0;opacity:0}}

/* ===== STRIP ===== */
.strip{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:26px 0;background:var(--bg-2)}
.strip__inner{display:flex;align-items:center;gap:28px;flex-wrap:wrap;justify-content:center}
.strip__inner>span{color:var(--muted);font-size:.9rem;font-weight:500}
.strip__tags{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.strip__tags span{color:var(--text);font-family:'Sora',sans-serif;font-weight:600;font-size:.95rem;
    padding:6px 14px;border:1px solid var(--line);border-radius:8px;background:var(--surface)}

/* ===== SECTIONS ===== */
.section{padding:100px 0}
.section__head{max-width:760px;margin:0 auto 56px;text-align:center}
.eyebrow{color:var(--brand);font-weight:600;font-size:.82rem;letter-spacing:1.5px;text-transform:uppercase}
.section__title{font-size:clamp(1.7rem,3.2vw,2.5rem);font-weight:800;letter-spacing:-1px;margin:14px 0 16px}
.section__sub{color:var(--muted);font-size:1.08rem}

/* ===== COMPARE ===== */
.compare{display:grid;grid-template-columns:1fr auto 1fr;gap:24px;align-items:center;max-width:920px;margin:0 auto}
.compare__col{border-radius:var(--radius);padding:30px;border:1px solid var(--line)}
.compare__col h3{font-size:1.15rem;margin-bottom:18px}
.compare__col ul{list-style:none;display:flex;flex-direction:column;gap:12px}
.compare__col li{position:relative;padding-left:28px;color:var(--muted);font-size:.98rem}
.compare__col li::before{position:absolute;left:0;top:1px;font-weight:700}
.compare__col--bad{background:rgba(255,107,107,.05);border-color:rgba(255,107,107,.2)}
.compare__col--bad li::before{content:"✕";color:var(--danger)}
.compare__col--good{background:rgba(46,230,166,.05);border-color:rgba(46,230,166,.25)}
.compare__col--good li::before{content:"✓";color:var(--brand)}
.compare__col--good li{color:var(--text)}
.compare__arrow{font-size:2rem;color:var(--brand);font-weight:700}

/* ===== CARDS ===== */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.card{background:linear-gradient(160deg,var(--surface),var(--bg-2));border:1px solid var(--line);
    border-radius:var(--radius);padding:32px 28px;transition:transform .3s,border-color .3s,box-shadow .3s}
.card:hover{transform:translateY(-6px);border-color:rgba(46,230,166,.4);box-shadow:var(--shadow)}
.card__icon{font-size:2rem;width:58px;height:58px;display:flex;align-items:center;justify-content:center;
    background:var(--surface-2);border:1px solid var(--line);border-radius:14px;margin-bottom:20px}
.card h3{font-size:1.2rem;margin-bottom:10px}
.card p{color:var(--muted);font-size:.97rem}

/* ===== STEPS ===== */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.step{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:30px 26px;position:relative;overflow:hidden}
.step__num{font-family:'Sora',sans-serif;font-size:2.6rem;font-weight:800;background:var(--grad);
    -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;display:block;margin-bottom:12px}
.step h3{font-size:1.15rem;margin-bottom:8px}
.step p{color:var(--muted);font-size:.95rem}

/* ===== STATS ===== */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.stat{text-align:center;padding:34px 20px;background:linear-gradient(160deg,var(--surface),var(--bg-2));
    border:1px solid var(--line);border-radius:var(--radius)}
.stat__num{font-family:'Sora',sans-serif;font-size:clamp(2.2rem,4vw,3rem);font-weight:800;
    background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;display:block}
.stat p{color:var(--muted);font-size:.92rem;margin-top:8px}

/* ===== ABOUT ===== */
.about__inner{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center}
.about__content .section__title{margin-top:14px;text-align:left}
.about__content p{color:var(--muted);margin-bottom:16px;font-size:1.03rem}
.about__content strong{color:var(--text)}
.about__list{list-style:none;display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}
.about__list li{padding:8px 16px;background:var(--surface);border:1px solid var(--line);border-radius:100px;
    font-size:.9rem;font-weight:600;color:var(--brand)}
.glass-card{background:linear-gradient(160deg,rgba(46,230,166,.08),rgba(124,92,255,.08));
    border:1px solid var(--line);border-radius:20px;padding:30px;backdrop-filter:blur(10px);box-shadow:var(--shadow)}
.glass-card__row{display:flex;justify-content:space-between;align-items:center;padding:14px 0;border-bottom:1px solid var(--line)}
.glass-card__row span{color:var(--muted)}
.glass-card__row b{color:var(--brand);font-family:'Sora',sans-serif}
.glass-card__pulse{margin-top:20px;text-align:center;padding:14px;background:var(--surface-2);border-radius:12px;
    color:var(--text);font-weight:600;font-size:.9rem;position:relative}
.glass-card__pulse::before{content:"";display:inline-block;width:9px;height:9px;background:var(--brand);border-radius:50%;
    margin-right:8px;animation:pulse 1.5s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(46,230,166,.6)}70%{box-shadow:0 0 0 10px rgba(46,230,166,0)}100%{box-shadow:0 0 0 0 rgba(46,230,166,0)}}

/* ===== ABOUT PHOTO + FLOAT CARD ===== */
.about__visual{position:relative}
.about__photo{border-radius:20px;overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow)}
.about__photo img{width:100%;height:360px;object-fit:cover;filter:saturate(1.05) contrast(1.03)}
.about__photo::after{content:"";position:absolute;inset:0;border-radius:20px;
    background:linear-gradient(180deg,transparent 40%,rgba(10,14,26,.55))}
.glass-card--float{position:absolute;bottom:-28px;right:-14px;width:270px;padding:22px}
@media(max-width:900px){
    .glass-card--float{position:static;width:100%;margin-top:18px}
    .about__photo img{height:280px}
}

/* ===== SHOWCASE ===== */
.showcase{position:relative;padding:120px 0;overflow:hidden;text-align:center}
.showcase__bg{position:absolute;inset:0;
    background:linear-gradient(rgba(10,14,26,.82),rgba(10,14,26,.92)),
    url('https://images.unsplash.com/photo-1586528116311-ad8dd3c8310d?auto=format&fit=crop&w=1600&q=80') center/cover;
    z-index:0}
.showcase__inner{position:relative;z-index:1;max-width:820px}
.showcase__inner h2{font-size:clamp(1.6rem,3.2vw,2.5rem);font-weight:800;letter-spacing:-1px;margin-bottom:18px}
.showcase__inner p{color:var(--muted);font-size:1.1rem}

/* ===== CTA ===== */
.cta__box{background:linear-gradient(135deg,var(--surface),var(--bg-2));border:1px solid var(--line);
    border-radius:26px;padding:56px 48px;text-align:center;position:relative;overflow:hidden;box-shadow:var(--shadow)}
.cta__box::before{content:"";position:absolute;top:-50%;right:-10%;width:400px;height:400px;
    background:radial-gradient(circle,rgba(124,92,255,.18),transparent 60%);z-index:0}
.cta__box>*{position:relative;z-index:1}
.cta__box h2{font-size:clamp(1.7rem,3vw,2.4rem);font-weight:800;letter-spacing:-1px;margin-bottom:14px}
.cta__box>p{color:var(--muted);font-size:1.08rem;max-width:560px;margin:0 auto 34px}
.cta__form{display:flex;gap:12px;max-width:820px;margin:0 auto 26px;flex-wrap:wrap}
.cta__form input{flex:1;min-width:180px;padding:14px 18px;background:var(--bg);border:1px solid var(--line);
    border-radius:12px;color:var(--text);font-family:inherit;font-size:.95rem}
.cta__form input:focus{outline:none;border-color:var(--brand)}
.cta__form .btn{flex:0 0 auto}
.cta__contacts{display:flex;gap:24px;justify-content:center;flex-wrap:wrap}
.cta__contact{color:var(--muted);font-size:.95rem;transition:color .2s}
.cta__contact:hover{color:var(--brand)}

/* ===== FOOTER ===== */
.footer{background:var(--bg-2);border-top:1px solid var(--line);padding-top:56px}
.footer__inner{display:grid;grid-template-columns:1.4fr 2fr;gap:48px;padding-bottom:40px}
.footer__brand p{color:var(--muted);margin-top:14px;font-size:.95rem;max-width:340px}
.footer__cols{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.footer__col h4{font-size:1rem;margin-bottom:16px}
.footer__col a,.footer__col span{display:block;color:var(--muted);font-size:.92rem;margin-bottom:10px;transition:color .2s}
.footer__col a:hover{color:var(--brand)}
.footer__bottom{border-top:1px solid var(--line);padding:22px 0}
.footer__bottom p{color:var(--muted);font-size:.85rem;text-align:center}

/* ===== REVEAL ANIMATION ===== */
[data-reveal]{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .7s ease}
[data-reveal].in{opacity:1;transform:none}

/* ===== RESPONSIVE ===== */
@media(max-width:900px){
    .hero__inner{grid-template-columns:1fr;gap:40px}
    .hero{padding:130px 0 70px}
    .dashboard{transform:none}
    .cards{grid-template-columns:1fr 1fr}
    .steps{grid-template-columns:1fr 1fr}
    .stats{grid-template-columns:1fr 1fr}
    .about__inner{grid-template-columns:1fr;gap:36px}
    .footer__inner{grid-template-columns:1fr;gap:32px}
    .compare{grid-template-columns:1fr}
    .compare__arrow{transform:rotate(90deg)}
    .nav{position:fixed;top:0;right:-100%;height:100vh;width:280px;flex-direction:column;
        background:var(--bg-2);padding:100px 30px 30px;gap:22px;align-items:flex-start;
        border-left:1px solid var(--line);transition:right .3s ease;z-index:99}
    .nav.open{right:0}
    .nav__toggle{display:flex;z-index:100}
    .nav.open ~ .nav__toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
    .header.menu-open .nav__toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
    .header.menu-open .nav__toggle span:nth-child(2){opacity:0}
    .header.menu-open .nav__toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
}
@media(max-width:560px){
    .container{padding:0 18px}
    .section{padding:70px 0}
    .cards{grid-template-columns:1fr}
    .steps{grid-template-columns:1fr}
    .stats{grid-template-columns:1fr 1fr}
    .dashboard__body{grid-template-columns:1fr}
    .cta__box{padding:38px 22px}
    .cta__form{flex-direction:column}
    .cta__form .btn{width:100%}
    .hero__trust{gap:20px}
}