@font-face {
    font-family: "Heebo";
    src: local("Heebo"),
    url("https://fonts.googleapis.com/css2?family=Heebo:wght@400;600;800&display=swap");
}

/* ---------- Theme ---------- */
:root{
    --bg-a:#0f1018;     /* dark */
    --bg-b:#121529;     /* brandish dark blue */
    --fg:#eef1f7;
    --muted:#bac3d6;
    --brand:#e3344e;
    --brand2:#e95a23;
    --glass: rgba(255,255,255,0.01);
    --stroke: rgba(255,255,255,0.12);
    --shadow: 0 20px 50px rgba(0,0,0,.45);
}

/* ---------- Base ---------- */
*{ box-sizing:border-box; }

/* Let body grow with content, make both html & body dark by default */
html, body{
    margin:0;
    padding:0;
    min-height:100dvh;

}

html{
    background: linear-gradient(135deg, var(--bg-b) 0%, var(--brand) 50%, var(--bg-b) 100%);
    scroll-behavior:auto; /* JS handles smooth scrolling */
}

body{
    color:var(--fg);
    font-family:"Heebo",system-ui,Arial;
    line-height:1.5;
    -webkit-font-smoothing:antialiased;
    padding-top:72px; /* fixed header offset */
    position:relative;
    overflow-x:hidden; /* prevents tiny horizontal scroll that can reveal background */
    background-color:transparent;
}





/* GPU nudge for hairline artifacts inside sections */
.section, .why-grid, .looks-row { will-change: opacity, transform; }


/* ---------- Nav (fixed + mobile hamburger) ---------- */
.nav{
    position:fixed; top:0; left:0; right:0; z-index:50;
    backdrop-filter: blur(10px);
    background:linear-gradient(180deg, var(--glass), rgba(10,10,16,.1));
    border-bottom:1px solid var(--stroke);
}
.nav-inner{
    height:72px; max-width:1100px; margin:0 auto; padding:0 20px;
    display:flex; align-items:center; justify-content:space-between;
}
.brand{
    display:flex;
    align-items:center;
    gap:8px;
    font-weight:800;
    letter-spacing:.5px;
}

/* constrain logo size */
.brand-logo{
    height:100px;          /* tweak to taste */
    width:auto;
    display:block;
}

/* keep text for screen readers, hide visually */
.brand-text{
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0;
}


/* desktop links */
.nav-links{ display:flex; gap:18px; }
.nav-link{ color:var(--fg); text-decoration:none; opacity:.9; padding:8px 10px; border-radius:10px; }
.nav-link:hover{ opacity:1; background:var(--glass); }
/* hamburger button */
.nav-toggle{
    display:none;
    width:42px;
    height:42px;
    border:0;
    border-radius:10px;
    background:var(--glass);
    cursor:pointer;
    align-items:center;
    justify-content:center;
}

/* three simple lines */
.nav-toggle span{
    display:block;
    width:22px;
    height:2px;
    background:#fff;
    margin:3px auto;
    border-radius:999px;
}


/* mobile drawer */
.nav-drawer{
    display:none; position:fixed; top:72px; left:0; right:0; z-index:49;
    background:rgba(12,12,18,.96); backdrop-filter: blur(8px);
    border-bottom:1px solid var(--stroke);
    padding:10px 16px 16px;
}
.nav-drawer.open{ display:block; }
.drawer-link{
    display:block; padding:12px; color:#fff; text-decoration:none; border-radius:10px;
}
.drawer-link:hover{ background:var(--glass); }

/* responsive: switch to hamburger */
@media (max-width: 900px){
    .nav-links{ display:none; }
    .nav-toggle{ display:flex; }
}

/* ---------- Sections ---------- */
.section{ padding:80px 20px; }
.section-tight{ padding:60px 20px; }
.section-title{
    max-width:1100px; margin:0 auto 30px; padding:0 6px;
    font-size:32px; font-weight:800; letter-spacing:.3px;
}
.section-subtitle{
    max-width:1100px; margin:0 auto 30px; padding:0 6px;
    font-size:22px; font-weight:500; letter-spacing:.3px;
}

/* ---------- Hero ---------- */
.hero-section{ min-height:60vh; display:grid; place-items:center; }
.hero-content{ text-align:center; max-width:800px; display:grid; align-items:center; place-items:center; }
.h1{ font-size:40px; margin:0 0 12px; }
.lead{ color:var(--muted); margin:0 0 20px; }
.btn-primary{
    display:inline-block; padding:14px 24px; border-radius:14px;
    background:linear-gradient(135deg, var(--brand)50%, var(--brand2));
    color:white; text-decoration:none; font-weight:700; box-shadow:var(--shadow);
    max-width: 250px;
}

/* ---------- למה דווקא אנחנו ---------- */
.why-grid{
    max-width:1100px; margin:0 auto;
    display:grid; grid-template-columns:1fr 420px 1fr; gap:20px; align-items:center;
}
.why-col{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:20px; }
.why-col h3{ margin:0 0 6px; font-size:22px; }
.why-col p{ margin:0; color:var(--muted); padding-bottom: 10px }
.why-col p::before{
    content:"•"; margin-left:8px; color:var(--brand2); font-weight:800;
}

/* Center column in "why us" */
.why-col-center{
    align-items:center;
    box-shadow: 20px 20px 5px rgba(15,16,24,0.5);/* center children in the column */
}



/* Make the phone stack truly centered in that column */
.looks-phones-center{
    width:100%;
    display:flex;
    align-items:center;
    justify-content:center;
}

.phone-stack{ align-self:center; justify-self:center; filter: drop-shadow(0 40px 50px rgba(0,0,0,.45)); }
.phone-stack img{ width:100%; max-width:420px; }

/* ---------- ככה זה נראה ---------- */
.looks-row{
    max-width:1100px; margin:40px auto; display:grid; gap:26px;
    grid-template-columns: 1fr 1fr; align-items:center;
}
.looks-owner .looks-phones{ order:1; }
.looks-owner .looks-list{ order:2; }
.looks-client .looks-list{ order:1; }
.looks-client .looks-phones{ order:2; }


.looks-phones{ position:relative; height:690px; width:330px; border-radius:70px;box-shadow: 20px 20px 5px rgba(15,16,24,0.5);}
video.phone-video{height:inherit; width:inherit;}
.looks-phone .mockup-phone{ position:absolute; height:inherit; object-fit:contain;}
.phone-a{ right:0; transform:translateY(10px) rotate(-2deg); }
.phone-b{ left:6%; transform:translateY(40px) rotate(4deg); height:90%; }

.w-full .mockup-phone{box-shadow: 20px 20px 5px rgba(15,16,24,0.5);}
/* Composite phone frame with video inside */
.phone-frame{
    position:absolute;
    height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    filter: drop-shadow(0 30px 45px rgba(0,0,0,.45));
    z-index:100;
}

/* Reuse existing transforms for placement/tilt */
.phone-frame.phone-a{ right:0; transform:translateY(10px) rotate(-2deg); }
.phone-frame.phone-b{ left:6%; transform:translateY(40px) rotate(4deg); height:90%; }

/* The visible screen area (masked) */
.phone-screen{
    position:relative;
    width:100%;
    max-width:230px;      /* tweak if needed */
    aspect-ratio:9/19;
    border-radius:24px;
    overflow:hidden;

}


/* The frame overlay */
.phone-shell{
    position:absolute;
    width:100%;
    height:100%;
    object-fit:contain;
    pointer-events:none;
}



.looks-list{
    list-style:none; padding:0; margin:0;
    display:flex; flex-direction:column; gap:14px; font-size:18px;
}
.looks-list li::before{
    content:"•"; margin-left:8px; color:var(--brand2); font-weight:800;
}

/* ---------- Fade-up (reveal all) ---------- */
.reveal{
    opacity:0; transform: translateY(18px) scale(.995);
    transition: opacity .6s ease, transform .6s ease; will-change: opacity, transform;
}
.reveal.show{ opacity:1; transform: translateY(0) scale(1); }

/* ---------- Contact & Footer ---------- */
#contact{ text-align:center; }
.contact-line a{ color:#fff; text-decoration:none; border-bottom:1px dotted var(--brand2); }
.footer{ border-top:1px solid var(--stroke); text-align:center; padding:18px; color:var(--muted); }

/* ---------- Responsive polish ---------- */
@media (max-width: 1100px){
    .why-grid{ grid-template-columns:1fr; gap:30px; text-align:center; }
    .phone-stack img{max-width:360px;}
    .looks-row{ grid-template-columns:1fr; place-items: center;}
    .phone-b{ left:12%; }
}
@media (max-width: 720px){
    .h1{ font-size:32px; }
    .section{ padding:64px 16px; }
    .looks-row{ grid-template-columns:1fr; place-items:center;}
    .phone-b{ left:16%; }
}
@media (max-width: 480px){
    .looks-row{ grid-template-columns:1fr; place-items:center;}
    .phone-b{ left:18%; }
}



.faq{ max-width:1100px; margin:10px auto; background:var(--glass); border:1px solid var(--stroke); border-radius:12px; padding:12px 16px; }
.faq summary{ cursor:pointer; font-weight:700; }
.faq[open]{ background:rgba(255,255,255,0.08); }

/* Phone video + frame stack */
.phone-wrap{
    position:relative;
    height:100%;
    margin:0 auto;
    aspect-ratio:9/19;
}

.phone-video{
    width:90%;
    height:90%;
    display:block;
    object-fit:cover;
    border-radius:24px;   /* match the inner radius of your frame */
    background:#000;
}

.phone-frame{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:contain;
    pointer-events:none;  /* clicks go to video if needed */
}