@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Inter:wght@300;400;500&display=swap');

:root {
  --bg:       #050508;
  --surface:  #0e0e14;
  --surface2: #16161f;
  --border:   rgba(255,255,255,0.07);
  --border-b: rgba(255,255,255,0.14);
  --text:     #f0eee8;
  --muted:    rgba(240,238,232,0.5);
  --dim:      rgba(240,238,232,0.25);
  --accent:   #f0a028;
  --accent2:  #e8652a;
  --gold:     #f5c842;
  --grad:     linear-gradient(135deg,#f5c842 0%,#f09a28 40%,#e8652a 100%);
  --grad-r:   linear-gradient(135deg,#e8652a 0%,#f09a28 60%,#f5c842 100%);
  --glow:     0 0 60px rgba(240,160,40,0.18);
  --green:    #4ade80;
  --r-sm: 8px; --r-md: 14px; --r-lg: 22px; --r-xl: 32px;
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{font-family:'Inter',sans-serif;background:var(--bg);color:var(--text);overflow-x:hidden;-webkit-font-smoothing:antialiased;}
::-webkit-scrollbar{width:4px;}
::-webkit-scrollbar-track{background:var(--bg);}
::-webkit-scrollbar-thumb{background:var(--border-b);border-radius:2px;}

/* ── HEADER ── */
header{
  position:fixed;top:0;left:0;right:0;z-index:100;
  height:68px;display:flex;align-items:center;justify-content:space-between;padding:0 5%;
  background:rgba(5,5,8,0.85);
  backdrop-filter:blur(20px) saturate(1.4);
  -webkit-backdrop-filter:blur(20px) saturate(1.4);
  border-bottom:1px solid var(--border);transition:all 0.3s;
}
header.scrolled{height:58px;border-bottom-color:var(--border-b);}

.logo{display:flex;align-items:center;text-decoration:none;}
.logo-img{height:36px;width:auto;object-fit:contain;}

nav{display:flex;gap:2rem;align-items:center;}
nav a{font-size:0.8rem;font-weight:500;letter-spacing:0.03em;color:var(--muted);text-decoration:none;transition:color 0.2s;position:relative;}
nav a:hover,nav a.active{color:var(--text);}
nav a.active::after{content:'';position:absolute;bottom:-2px;left:0;right:0;height:1.5px;background:var(--grad);border-radius:1px;}

.header-cta{display:flex;gap:10px;align-items:center;}

.btn-ghost{
  padding:8px 18px;border:1px solid var(--border-b);background:transparent;
  border-radius:var(--r-sm);font-family:'Inter',sans-serif;font-size:0.8rem;font-weight:500;
  color:var(--muted);cursor:pointer;text-decoration:none;transition:all 0.2s;
}
.btn-ghost:hover{border-color:rgba(255,255,255,0.3);color:var(--text);background:rgba(255,255,255,0.05);}

.btn-primary{
  padding:9px 20px;background:var(--grad);border:none;
  border-radius:var(--r-sm);font-family:'Inter',sans-serif;font-size:0.8rem;font-weight:600;
  color:#0d0800;cursor:pointer;text-decoration:none;
  box-shadow:0 0 20px rgba(240,160,40,0.3);transition:all 0.25s;
}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 4px 30px rgba(240,160,40,0.45);}
.btn-primary:active{transform:translateY(0);}
.btn-lg{padding:13px 28px;font-size:0.88rem;border-radius:var(--r-md);}

/* ── PAGE HERO ── */
.page-hero{
  margin-top:68px;padding:80px 5% 70px;
  background:var(--surface);border-bottom:1px solid var(--border);
  position:relative;overflow:hidden;
}
.page-hero::before{content:'';position:absolute;top:-100px;right:-80px;width:500px;height:500px;background:radial-gradient(circle,rgba(240,160,40,0.08) 0%,transparent 70%);pointer-events:none;}
.page-hero::after{content:'';position:absolute;bottom:-100px;left:10%;width:400px;height:400px;background:radial-gradient(circle,rgba(232,101,42,0.06) 0%,transparent 70%);pointer-events:none;}
.page-hero-content{position:relative;z-index:1;}

.breadcrumb{display:flex;align-items:center;gap:8px;margin-bottom:22px;}
.breadcrumb a,.breadcrumb span{font-size:0.72rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--dim);text-decoration:none;transition:color 0.2s;}
.breadcrumb a:hover{color:var(--muted);}
.breadcrumb .sep{color:var(--dim);}
.breadcrumb .current{color:var(--accent);}

.page-hero h1{font-family:'Plus Jakarta Sans',sans-serif;font-size:clamp(2.2rem,5vw,3.8rem);font-weight:800;line-height:1.1;color:var(--text);}
.page-hero h1 em{font-style:normal;background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}

/* ── SECTIONS ── */
.section{padding:100px 5%;}
.section-label{display:inline-flex;align-items:center;gap:8px;font-size:0.68rem;letter-spacing:0.22em;text-transform:uppercase;color:var(--accent);margin-bottom:16px;font-weight:600;}
.section-label::before{content:'';width:24px;height:1px;background:var(--accent);opacity:0.6;}
.section-title{font-family:'Plus Jakarta Sans',sans-serif;font-size:clamp(1.8rem,3.5vw,2.8rem);font-weight:800;line-height:1.15;color:var(--text);}
.section-title em{font-style:normal;background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}

/* ── ACCORDION ── */
.accordion-item{border-bottom:1px solid var(--border);}
.accordion-header{width:100%;background:none;border:none;padding:20px 0;display:flex;align-items:center;justify-content:space-between;cursor:pointer;font-family:'Plus Jakarta Sans',sans-serif;font-size:1rem;font-weight:600;color:var(--text);text-align:left;transition:color 0.2s;}
.accordion-header:hover{color:var(--accent);}
.accordion-icon{width:26px;height:26px;border:1px solid var(--border-b);border-radius:7px;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--accent);font-size:1.1rem;transition:transform 0.3s,background 0.2s;}
.accordion-item.open .accordion-icon{transform:rotate(45deg);background:rgba(240,160,40,0.1);}
.accordion-body{max-height:0;overflow:hidden;transition:max-height 0.4s ease;}
.accordion-item.open .accordion-body{max-height:200px;padding-bottom:20px;}
.accordion-body p{font-size:0.88rem;line-height:1.75;color:var(--muted);}

/* ── FOOTER ── */
footer{background:var(--surface);border-top:1px solid var(--border);padding:70px 5% 30px;}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:60px;padding-bottom:50px;border-bottom:1px solid var(--border);margin-bottom:30px;}
.footer-brand .logo-img{height:32px;margin-bottom:4px;}
.footer-brand p{font-size:0.85rem;line-height:1.75;color:var(--muted);margin:16px 0 22px;max-width:280px;}
.footer-contact-item{display:flex;align-items:center;gap:10px;margin-bottom:10px;font-size:0.82rem;color:var(--muted);}
.footer-contact-item svg{color:var(--accent);flex-shrink:0;}
.footer-col h4{font-family:'Plus Jakarta Sans',sans-serif;font-size:0.68rem;font-weight:700;letter-spacing:0.2em;text-transform:uppercase;color:var(--muted);margin-bottom:16px;}
.footer-col a{display:block;color:var(--dim);text-decoration:none;font-size:0.85rem;padding:5px 0;transition:color 0.2s;}
.footer-col a:hover{color:var(--text);}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;}
.footer-bottom p{font-size:0.75rem;color:var(--dim);}
.footer-socials{display:flex;gap:10px;}
.footer-socials a{width:32px;height:32px;border:1px solid var(--border);border-radius:8px;display:flex;align-items:center;justify-content:center;color:var(--dim);text-decoration:none;font-size:0.72rem;transition:all 0.2s;}
.footer-socials a:hover{border-color:var(--accent);color:var(--accent);background:rgba(240,160,40,0.08);}

/* ── HAMBURGER ── */
.hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:4px;}
.hamburger span{width:22px;height:1.5px;background:var(--text);transition:all 0.3s;}

/* ── REVEAL ── */
.reveal{opacity:0;transform:translateY(20px);transition:opacity 0.6s ease,transform 0.6s ease;}
.reveal.in-view{opacity:1;transform:translateY(0);}

/* ── ANIMATIONS ── */
@keyframes fadeUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes pulse{0%,100%{opacity:0.6}50%{opacity:1}}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ── RESPONSIVE ── */
@media(max-width:900px){
  nav{display:none;}
  .hamburger{display:flex;}
  .header-cta{display:none;}
  .footer-grid{grid-template-columns:1fr;gap:36px;}
  .footer-bottom{flex-direction:column;gap:14px;text-align:center;}
}
@media(max-width:600px){
  .section{padding:70px 5%;}
  .page-hero{padding:56px 5% 48px;}
}

/* ── LOGO IMAGE ── */
.logo-img {
  height: 36px;
  width: auto;
  display: block;
  object-fit: contain;
}

/* ── PANEL SCREENSHOT ── */
.panel-img {
  width: 100%;
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  display: block;
}

.phone-mockup {
  position: relative;
  width: 220px;
  margin: 0 auto;
}
.phone-mockup img.tema-img {
  width: 100%;
  border-radius: 36px;
  display: block;
  box-shadow: 0 30px 70px rgba(0,0,0,0.55);
}