:root{
  --bg1:#f4f4f7;
  --bg2:#f1f1f6; /* very close to avoid visible banding */
  --text:#111;
  --muted:rgba(0,0,0,.62);
  --glass:rgba(255,255,255,.62);
  --glass2:rgba(255,255,255,.72);
  --stroke:rgba(0,0,0,.06);
  --stroke2:rgba(0,0,0,.08);
  --shadow:rgba(0,0,0,.08);
  --shadowStrong:rgba(0,0,0,.12);
  --topbar:var(--topbar);
  --pill:rgba(255,255,255,.70);
  --pillHover:rgba(255,255,255,.80);
  --btnText:#111;
  --btnBg:rgba(255,255,255,.75);
  --btnStroke:rgba(0,0,0,.08);
  --ease:cubic-bezier(.2,.8,.2,1);
}
html[data-theme="dark"]{
  --bg1:#0b0c10;
  --bg2:#0a0b0f;
  --text:#f3f4f6;
  --muted:rgba(255,255,255,.62);
  --glass:rgba(20,20,24,.55);
  --glass2:rgba(24,24,28,.62);
  --stroke:rgba(255,255,255,.10);
  --stroke2:rgba(255,255,255,.12);
  --shadow:rgba(0,0,0,.55);
  --shadowStrong:rgba(0,0,0,.70);
  --topbar:rgba(10,10,14,.55);
  --pill:rgba(24,24,28,.58);
  --pillHover:rgba(28,28,32,.66);
  --btnText:#f3f4f6;
  --btnBg:rgba(24,24,28,.72);
  --btnStroke:rgba(255,255,255,.12);
}


body{
margin:0;
font-family:-apple-system,system-ui;
color:var(--text);
overflow-x:hidden;
background:linear-gradient(180deg,var(--bg1),var(--bg2));
}

/* Topbar */

.topbar{
position:fixed;
top:0;
left:0;
right:0;
z-index:20;
display:flex;
align-items:center;
justify-content:space-between;
gap:14px;
padding:14px 22px;
background:var(--topbar);
backdrop-filter:blur(16px);
border-bottom:1px solid var(--stroke);
}

.brand{
text-decoration:none;
color:var(--text);
font-weight:700;
letter-spacing:-.2px;
}

.nav{
display:flex;
gap:14px;
flex:1;
justify-content:center;
}

.nav a{
text-decoration:none;
color:var(--text);
opacity:.7;
font-size:14px;
padding:8px 10px;
border-radius:12px;
transition:.2s ease;
}

/* Home icon in header */
.nav a.navHome{
display:inline-flex;
align-items:center;
justify-content:center;
padding:8px 10px;
}
.nav a.navHome svg{width:18px;height:18px;display:block;opacity:.92}

.nav a:hover{opacity:1;background:rgba(255,255,255,.55)}

.hero{
display:grid;
grid-template-columns:1fr 1fr;
align-items:center;
max-width:1200px;
margin:auto;
padding:110px 40px 50px;
min-height:86vh;
gap:40px;
position:relative;
isolation:isolate; /* prevent accidental overlap hitboxes */
}

.left h1{
font-size:56px;
margin:0;
letter-spacing:-1px;
}

.left p{
opacity:.55;
font-size:20px;
margin-top:14px;
line-height:1.4;
}

.right{
display:flex;
justify-content:center;
perspective:1400px;
position:relative;
z-index:5; /* ensure phone stays above left content for hit-testing */
}

.left{position:relative;z-index:1;}

/* ULTRA PEARL IPHONE */

.iphoneWrap{
transform-style:preserve-3d;
transition:transform .2s ease-out;
}

.iphone{
width:340px;
height:690px;
border-radius:64px;
background:linear-gradient(180deg,#ffffff,#e8e8ee);
box-shadow:
0 60px 140px rgba(0,0,0,.18),
inset 0 4px 12px rgba(255,255,255,.9);
padding:16px;
transform:rotateY(-10deg) rotateX(4deg);
}

.screen{
/* Keep the screen in a single compositing layer so hit-testing is consistent */
transform:translate3d(0,0,0);
position:relative;
width:100%;
height:100%;
border-radius:50px;
background:linear-gradient(180deg,#fafafd,#ececf3);
overflow:hidden;
box-shadow:inset 0 2px 8px rgba(0,0,0,.05);
}


/* Icons */

.icon{
width:96px;
transition:transform .6s cubic-bezier(.2,.8,.2,1);
pointer-events:none; /* clicks should hit the anchor reliably */
}

.iconLink{
position:absolute;
display:flex;
align-items:center;
justify-content:center;
width:96px;
height:96px;
z-index:60;
pointer-events:auto;
cursor:pointer;
/* Robust hit-testing inside 3D transformed parents */
transform:translate3d(0,0,2px);
backface-visibility:hidden;
-webkit-backface-visibility:hidden;
touch-action:manipulation;
-webkit-tap-highlight-color:transparent;
user-select:none;
}

/* Bigger, more forgiving tap/click area inside the phone screen */
.iconLink.hitLink{
width:140px;
height:140px;
}
.iconLink{cursor:pointer;}
.iconLink:hover .icon{transform:translateY(-6px) scale(1.03)}

.rabeLink{left:20px;top:278px;z-index:200;}
.garantioLink{right:20px;top:278px;z-index:200;}

.rabe{
left:42px;
top:300px;
}

.garantio{
right:42px;
top:300px;
}

/* Speech Bubble */

/* Mini header inside iPhone (Rabe) */
.miniHeader{
position:absolute;
left:50%;
top:86px;
transform:translateX(-50%);
text-align:center;
max-width:240px;
padding:0 10px;
pointer-events:none;
}
.miniTitle{
font-size:20px;
font-weight:750;
letter-spacing:-0.2px;
color:var(--text);
}
.miniSub{
margin-top:4px;
font-size:12.5px;
font-weight:600;
color:var(--muted);
line-height:1.2;
}



.bubble{
position:absolute;
right:28px;
top:170px;
background:white;
border-radius:22px;
padding:12px 16px;
font-size:15px;
box-shadow:0 20px 60px rgba(0,0,0,.18);
opacity:0;
transform:translateY(14px) scale(.96);
transition:.5s ease;
pointer-events:none !important;
}

/* Rabe page tweaks */

.rabeSolo{
position:absolute;
left:50%;
top:310px;
transform:translateX(-50%);
width:96px;
height:96px;
}

.rabeSolo .icon{width:96px;height:96px;}

.rabeBubble{
left:50%;
right:auto;
top:170px;
transform:translateX(-50%) translateY(14px) scale(.96);
}

.rabeBubble.show{
transform:translateX(-50%) translateY(0) scale(1);
}

.garantioSolo{
position:absolute;
left:50%;
top:310px;
transform:translateX(-50%);
width:96px;
height:96px;
}

.garantioSolo .icon{width:96px;height:96px;}

.garantioBubble{
left:50%;
right:auto;
top:170px;
transform:translateX(-50%) translateY(14px) scale(.96);
}

.garantioBubble.show{
transform:translateX(-50%) translateY(0) scale(1);
}
.bubble.show{
opacity:1;
transform:translateY(0) scale(1);
}

/* Responsive */

@media(max-width:900px){
.hero{grid-template-columns:1fr}
.iphone{transform:none}
}

/* Sections */

.section{
padding:70px 22px 40px;
}

.sectionInner{
max-width:1200px;
margin:0 auto;
}

h2{
margin:0 0 18px;
font-size:20px;
letter-spacing:-.2px;
}

.cards{
display:grid;
grid-template-columns:1fr 1fr;
gap:16px;
}

.card{
background:var(--glass);
border:1px solid var(--stroke);
border-radius:22px;
padding:18px;
backdrop-filter:blur(16px);
box-shadow:0 24px 80px var(--shadow);
}

.cardTop{display:flex;align-items:center;gap:14px;margin-bottom:14px;}

.cardIcon{width:52px;height:52px;border-radius:14px;box-shadow:0 10px 30px var(--shadowStrong)}

/* Icon crispness */
.cardIcon,.icon{
  image-rendering:auto;
  -webkit-transform:translateZ(0);
}
.cardIcon{
  border:1px solid var(--stroke);
  background:rgba(255,255,255,.10);
}

.cardTitle{font-weight:800;letter-spacing:-.3px;}

.cardSub{color:var(--muted);font-size:14px;margin-top:4px;line-height:1.35}

.chips{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 16px;}

.chip{
font-size:12px;
opacity:.75;
background:var(--pill);
border:1px solid var(--stroke);
padding:7px 10px;
border-radius:999px;
}

.btnRow{display:flex;gap:10px;flex-wrap:wrap;}

/* Single CTA rows should feel balanced */
.btnRow.single .btn{
  flex:1;
  width:100%;
}

.btn{
display:inline-flex;
align-items:center;
justify-content:center;
text-decoration:none;
color:var(--text);
background:var(--btnBg);
border:1px solid var(--btnStroke);
padding:10px 14px;
border-radius:14px;
font-weight:600;
transition:.2s ease;
}

.btn:hover{transform:translateY(-1px);box-shadow:0 14px 40px var(--shadowStrong)}

.btn.secondary{opacity:.8}

.footer{
padding:22px;
}

.footerInner{
max-width:1200px;
margin:0 auto;
display:flex;
align-items:flex-end;
justify-content:space-between;
gap:14px;
border-top:1px solid rgba(0,0,0,.06);
padding-top:18px;
}

.footBrand{font-weight:800;letter-spacing:-.2px;}

.footLine{color:var(--muted);font-size:13px;margin-top:6px;}

.footLine a{color:var(--text);}

.footLinks{display:flex;gap:12px;}

.footLinks a{color:var(--text);color:var(--muted);text-decoration:none;font-size:13px;padding:8px 10px;border-radius:12px;}
.footLinks a:hover{opacity:1;background:rgba(255,255,255,.55)}

@media(max-width:900px){
.cards{grid-template-columns:1fr}
.footerInner{flex-direction:column;align-items:flex-start}
.nav{display:none}
}

/* Theme polish */
a{color:var(--text);}
.nav a{color:var(--text);}
.nav a:hover{background:var(--pillHover);}
.chip{background:var(--pill); border:1px solid var(--stroke); color:var(--text); opacity:1}
.cardSub{color:var(--muted); opacity:1}
.footLine{color:var(--muted); opacity:1}
.footLinks a{color:var(--text);}
.footLinks a:hover{background:var(--pillHover);}

.btn{color:var(--btnText); background:var(--btnBg); border:1px solid var(--btnStroke);}
.btn:hover{transform:translateY(-1px); box-shadow:0 14px 40px var(--shadowStrong);}

.bubble{background:var(--glass2); color:var(--text); border:1px solid var(--stroke);}

/* Footer as glass pill */
.footer{
  padding:22px 22px 34px;
  display:flex;
  justify-content:center;
}
.footerInner{
  border-top:none;
  padding-top:0;
  background:var(--glass);
  border:1px solid var(--stroke);
  border-radius:999px;
  padding:14px 18px;
  backdrop-filter:blur(18px);
  box-shadow:0 18px 60px var(--shadow);
  width:min(980px, calc(100% - 0px));
}
@media (max-width:740px){
  .footerInner{border-radius:22px; align-items:flex-start; width:100%;}
}

/* Theme toggle (small glass pill) */
.controls{display:flex; align-items:center; gap:10px;}
.themePill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px;
  border-radius:999px;
  background:var(--pill);
  border:1px solid var(--stroke);
  backdrop-filter:blur(16px);
}
.themeBtn{
  width:36px;
  height:36px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:0;
  background:transparent;
  color:var(--text);
  padding:0;
  border-radius:999px;
  cursor:pointer;
  opacity:.78;
}
.themeBtn.active{
  background:var(--pillHover);
  opacity:1;
}

.themeBtn svg{width:18px;height:18px;display:block;opacity:.92}

/* Centered titles on legal pages */
.pageTitle{ text-align:center; margin:0 0 18px; }

/* Dark mode phone mockup darker */
html[data-theme="dark"] .phone,
html[data-theme="dark"] .iphone,
html[data-theme="dark"] .device{
  background:#0e0f14 !important;
  filter:brightness(.88) contrast(1.05);
}

/* Dark mode screen must be dark too (fix: text visibility + mood) */
html[data-theme="dark"] .screen{
transform:translateZ(0);
background:linear-gradient(180deg,#0f1014,#07080b) !important;
box-shadow:inset 0 2px 10px rgba(0,0,0,.55);
}

html[data-theme="dark"] .bubble{
background:rgba(255,255,255,.10);
border:1px solid rgba(255,255,255,.14);
color:#f2f3f5;
box-shadow:0 20px 60px rgba(0,0,0,.55);
}




/* Page layout (sticky footer without weird bars) */
body.page{min-height:100vh;display:flex;flex-direction:column;}
.main{flex:1;}


/* Legal pages */
.card.legal{padding:22px;}
.legal h3{
  margin:18px 0 8px;
  font-size:14px;
  letter-spacing:-.2px;
}
.legal p{margin:0 0 10px; line-height:1.55;}
.legal ul{margin:0 0 12px 18px; padding:0;}
.legal li{margin:0 0 6px; color:var(--muted);}
.legal .hint{color:var(--muted); font-size:13px;}


/* Contrast block under hero text */
.contrast{margin-top:18px;display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:520px}
.contrastCol{padding:14px 14px;border-radius:18px;background:var(--glass);border:1px solid var(--stroke);box-shadow:0 18px 60px var(--shadow)}
.contrastTitle{font-weight:750;letter-spacing:-.2px;margin-bottom:6px}
.contrastText{color:var(--muted);font-weight:600;line-height:1.35;font-size:13px}
@media (max-width:820px){.contrast{grid-template-columns:1fr;max-width:440px}}

html[data-theme="dark"] .miniTitle{color:#f5f6f7;}
html[data-theme="dark"] .miniSub{color:rgba(255,255,255,.72);}