*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#f5f6fa;--bg2:#fff;--bg3:#eef0f8;
  --accent:#d0303f;--accent2:#1a6fad;
  --text:#1a1a2e;--text2:#444460;--border:#d8dae8;
  --radius:10px;--ui:'Rubik',sans-serif;--shadow:0 2px 12px rgba(0,0,0,.09);
}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:var(--ui);line-height:1.6}
[lang="he"] body{direction:rtl}
[lang="en"] body{direction:ltr}

/* custom elements — display defaults */
site-header,header-inner,site-logo,main-nav,nav-item,drop-menu,
hero-section,hero-text,hero-tag,hero-cta,hero-img,
features-section,section-inner,features-grid,feature-card,feat-icon,
install-section,install-placeholder,page-section,page-lead,
about-block,about-features,about-feature,
site-footer,footer-inner,logo-small,footer-copy,
main-wrap,bread-crumb,demo-header,demo-num,demo-img-frame,
demo-view,demo-actions,action-btn,demo-nav,nav-disabled{display:block}
ce-p{display:block}
ce-span{display:inline}
accent-text{display:inline;color:var(--accent)}

/* header */
site-header{position:sticky;top:0;z-index:100;background:rgba(245,246,250,.96);backdrop-filter:blur(10px);border-bottom:1px solid var(--border)}
header-inner{max-width:1100px;margin:0 auto;padding:6px 24px;display:flex;align-items:center;flex-wrap:wrap}
site-logo{order:1;flex:1}
a.lang-switch{order:2;color:var(--accent2);font-size:.82rem;font-weight:600;text-decoration:none;border:1px solid var(--accent2);border-radius:12px;padding:3px 10px;flex-shrink:0;white-space:nowrap;transition:background .2s,color .2s}
a.lang-switch:hover{background:var(--accent2);color:#fff}
main-nav{order:3;width:100%;display:flex;align-items:center;gap:28px;padding:4px 0 6px}
main-nav>a{color:var(--text2);text-decoration:none;font-size:.9rem;font-weight:500;transition:color .2s}
main-nav>a:hover,main-nav>a.active{color:var(--accent)}

/* dropdown */
nav-item{position:relative;display:flex;align-items:center}
nav-item>ce-span{color:var(--text2);font-size:.9rem;font-weight:500;cursor:pointer;padding:6px 0;user-select:none;transition:color .2s}
nav-item:hover>ce-span,nav-item.open>ce-span{color:var(--accent)}
drop-menu{position:absolute;top:100%;right:0;left:auto;background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);box-shadow:0 4px 20px rgba(0,0,0,.12);min-width:220px;padding:10px 0 6px;opacity:0;pointer-events:none;transition:opacity .15s;z-index:200}
nav-item:hover drop-menu,nav-item.open drop-menu{opacity:1;pointer-events:auto}
drop-menu a{display:block;padding:9px 18px;font-size:.88rem;color:var(--text2);text-decoration:none;white-space:nowrap;transition:background .12s,color .12s}
drop-menu a:hover{background:var(--bg3);color:var(--accent)}
[lang="en"] drop-menu{left:0;right:auto}

/* logo */
#logo{display:block;height:44px;width:220px;direction:ltr}

/* sections */
section-inner{max-width:1100px;margin:0 auto;padding:60px 24px;display:block}
@media(max-width:600px){section-inner{padding:40px 16px}}
section-title{display:block;font-size:1.6rem;font-weight:800;margin-bottom:32px}
page-section{display:block}

/* demo shared */
demo-view{display:flex;flex-direction:row;align-items:flex-start;gap:16px;margin:24px 0 28px}
demo-actions{display:flex;flex-direction:column;align-items:stretch;gap:8px;flex-shrink:0;order:-1}
demo-img-frame{display:block;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);flex:1;min-width:0;max-width:100%;background-color:var(--bg3)}
@media(max-width:600px){demo-view{flex-direction:column}demo-actions{flex-direction:row;flex-wrap:wrap;order:0}}
action-btn a{display:block;padding:7px 18px;border:1px solid var(--border);border-radius:20px;background:var(--bg2);color:var(--accent2);font-family:var(--ui);font-size:.84rem;font-weight:600;text-decoration:none;white-space:nowrap;transition:border-color .2s,color .2s,background .2s;text-align:center}
action-btn a:hover{border-color:var(--accent);color:var(--accent);background:var(--bg)}
demo-nav{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;border-top:1px solid var(--border);padding-top:20px;margin-top:8px;clear:both}
demo-nav a{display:inline-flex;align-items:center;gap:6px;color:var(--text2);text-decoration:none;font-size:.87rem;font-weight:500;padding:7px 14px;border:1px solid var(--border);border-radius:var(--radius);transition:border-color .2s,color .2s}
demo-nav a:hover{border-color:var(--accent2);color:var(--accent2)}
nav-disabled{display:inline-block;padding:7px 14px;font-size:.87rem;color:var(--border);border:1px solid var(--border);border-radius:var(--radius);opacity:.4}

/* footer */
site-footer{border-top:1px solid var(--border);background:var(--bg2);display:block}
footer-inner{max-width:1100px;margin:0 auto;padding:20px 24px;display:flex;align-items:center;justify-content:space-between;gap:16px}
logo-small{font-size:.85rem;color:var(--text2)}
footer-copy{font-size:.75rem;color:var(--text2)}

/* LTR layout */
[lang="en"] features-grid,
[lang="en"] features-section,
[lang="en"] feature-card,
[lang="en"] section-inner,
[lang="en"] about-block,
[lang="en"] about-features,
[lang="en"] about-feature,
[lang="en"] page-section,
[lang="en"] footer-inner,
[lang="en"] install-section,
[lang="en"] bread-crumb,
[lang="en"] demo-header,
[lang="en"] demo-nav,
[lang="en"] main-wrap{direction:ltr;text-align:left}

/* mobile */
@media(max-width:720px){
  site-logo #logo{width:130px !important;height:36px !important}
  .lang-switch{font-size:.72rem;padding:2px 7px}
  main-nav{flex-wrap:wrap;gap:6px 12px}
  drop-menu{right:0;left:auto;min-width:200px;width:auto}
  drop-menu a{white-space:nowrap}
}