/* Shared look for the Brixa concept pages: same tokens as the live site. */
:root{color-scheme:dark;--ink:#fff;--bg:#020916;--muted:#9aa2c8}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--bg);color:var(--ink)}
body{font-family:Tajawal,system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button,input,select{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
svg.i{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.shell{position:relative;min-height:100vh;display:flex;flex-direction:column;isolation:isolate;overflow:hidden}
.bg{position:absolute;inset:0 0 auto;height:min(1200px,100%);z-index:-1;pointer-events:none}
.bg img{display:block;width:100%;height:100%;object-fit:cover;object-position:center top}
.bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgb(0 7 18/.6),rgb(0 7 18/.3) 35%,rgb(1 6 17/.45) 70%,#020916 100%)}

/* header (same as live) */
.hbar{border-bottom:1px solid rgb(255 255 255/.04);position:relative;z-index:20}
.header{height:clamp(68px,5.73vw,110px);max-width:1920px;margin:auto;padding:0 3.6% 0 2.6%;display:flex;align-items:center;justify-content:space-between;gap:clamp(18px,2vw,38px);direction:ltr}
.logo{display:flex;align-items:center;gap:8px;font-weight:700;direction:ltr}
.logo svg{width:clamp(38px,3.65vw,70px);height:clamp(38px,3.65vw,70px)}
.logo span{font-size:clamp(29px,2.5vw,48px);line-height:1;letter-spacing:-1.5px}
.lang{display:flex;align-items:center;gap:2px;border:1px solid #674b94;border-left-color:#23587b;border-radius:30px;background:#030b1bd9;padding:0 clamp(4px,.5vw,10px);font-weight:700;font-size:clamp(13px,.95vw,18px)}
.lang button{min-width:clamp(34px,2.4vw,46px);min-height:clamp(44px,3.4vw,64px);padding:4px 6px;color:#e2e8ff}
.lang span{color:#566790}
.lang button[aria-pressed=true]{color:#f0b3ff;text-shadow:0 0 12px #b748e9}
.hl{display:flex;align-items:center;gap:clamp(14px,1.5vw,28px)}
.nav{display:flex;align-items:center;gap:clamp(14px,1.7vw,34px)}
.nav a{position:relative;padding:clamp(12px,.85vw,16px) 0;color:#e5e8fa;font-weight:500;font-size:clamp(14px,1.04vw,20px);white-space:nowrap}
.nav a:hover{color:#fff;text-shadow:0 0 12px #7386e2}
.nav a[aria-current=page]{color:#9bdcff}
.nav a[aria-current=page]::after{content:"";position:absolute;bottom:0;inset-inline:0;height:2px;background:#83b7ff;box-shadow:0 0 10px 2px #4331f8}
.nav a .new{position:absolute;top:2px;inset-inline-end:-9px;width:6px;height:6px;border-radius:50%;background:var(--c);box-shadow:0 0 8px var(--c)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:clamp(44px,3.47vw,66px);padding:7px clamp(20px,1.9vw,36px);border-radius:clamp(12px,.75vw,14px);border:1px solid #9ca8e5;font-weight:700;font-size:clamp(14px,1.08vw,20.5px);line-height:1.55;white-space:nowrap;transition:box-shadow .18s,translate .18s}
.btn:hover{translate:0 -1px;box-shadow:0 0 24px #7353ff6e}
.btn svg{width:clamp(16px,1.15vw,22px);height:clamp(16px,1.15vw,22px)}
.start{min-width:clamp(140px,11vw,210px);border-color:#7150ff;background:linear-gradient(105deg,#4330ee,#a316e1);box-shadow:0 5px 22px #6e17c52c}
.login{min-width:clamp(124px,10.85vw,206px);background:#07132ba6}
.hr{display:flex;align-items:center;gap:clamp(12px,1.15vw,22px)}
.menu{display:none;width:44px;height:44px;border:1px solid #3b4a7a;border-radius:12px;align-items:center;justify-content:center;background:#07132ba6}
.menu svg{width:22px;height:22px}
.drawer{display:none}

/* footer (same as live, with the new products) */
.site-footer{position:relative;z-index:1;margin-top:clamp(40px,3vw,64px);border-top:1px solid rgb(255 255 255/.05);background:#050817b3;backdrop-filter:blur(8px)}
.f-inner{width:90vw;max-width:1710px;margin-inline:auto}
.f-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:32px;padding:clamp(40px,2.6vw,50px) 0}
.f-about{display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.f-logo svg{width:clamp(32px,2.3vw,44px);height:clamp(32px,2.3vw,44px)}
.f-logo span{font-size:clamp(24px,1.6vw,31px);letter-spacing:-1px}
.f-about p{max-width:26em;font-size:clamp(14px,.85vw,16px);line-height:1.7;color:var(--muted)}
.f-badges{display:flex;flex-wrap:wrap;gap:20px;font-size:clamp(12px,.75vw,14px);color:var(--muted)}
.f-badges span{display:flex;align-items:center;gap:6px}
.f-badges svg{width:20px;height:20px;color:#8f7bff}
.f-col{display:flex;flex-direction:column;gap:12px;font-size:clamp(14px,.85vw,16px)}
.f-col p{font-size:clamp(15px,.95vw,18px);font-weight:700}
.f-col a{color:var(--muted);transition:color .2s;display:flex;align-items:center;gap:8px}
.f-col a:hover{color:#fff}
.f-col em{font-style:normal;font-size:11px;font-weight:700;line-height:1;padding:4px 7px 3px;border-radius:20px;color:#04131a;background:linear-gradient(90deg,#22e3d3,#ffb547)}
.f-bottom{border-top:1px solid rgb(255 255 255/.05)}
.f-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;padding:20px 0;font-size:clamp(12px,.75vw,14px);color:var(--muted)}
.f-row nav{display:flex;flex-wrap:wrap;gap:4px 16px}
.f-row a:hover{color:#fff}
.f-help{display:flex;align-items:center;gap:6px}
.f-help svg{width:20px;height:20px}

.toast{position:fixed;left:50%;bottom:22px;transform:translate(-50%,20px);opacity:0;background:#0b1430f2;border:1px solid #3b4a7a;padding:10px 16px;border-radius:12px;font-size:14px;transition:.3s;pointer-events:none;z-index:50;max-width:92vw;text-align:center}
.toast.on{opacity:1;transform:translate(-50%,0)}

@media (max-width:1250px){.header{padding-inline:24px;gap:16px}.nav{gap:13px}.btn{padding-inline:16px;min-width:0}}
@media (max-width:1100px){
 .nav{display:none}.menu{display:inline-flex}
 .drawer.on{display:grid;position:absolute;inset:100% 12px auto;background:#050c22f5;border:1px solid #2b3a66;border-radius:16px;padding:8px;z-index:30}
 .drawer a{padding:13px 14px;border-radius:10px;font-weight:500;display:flex;align-items:center;gap:8px}
 .drawer a:hover{background:#ffffff0d}
 .drawer a .new{width:6px;height:6px;border-radius:50%;background:var(--c);box-shadow:0 0 8px var(--c)}
 .f-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
 .lang,.login{display:none}
 .header{padding-inline:14px;gap:10px}
 .start{padding-inline:14px;font-size:14px}
 .f-inner{width:auto;margin-inline:18px}
 .f-grid{grid-template-columns:1fr 1fr;gap:28px 16px}
 .f-about{grid-column:1/-1}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* inside the platform page: no own header, footer or background */
.embed,.embed body,.embed .shell{background:transparent!important;min-height:0}
.embed .bg,.embed .hbar,.embed .site-footer,.embed .aura{display:none!important}
.embed .stepbar{position:static}
.embed main{padding-top:14px}
.embed .hero h1{font-size:clamp(28px,2.4vw,46px)!important;line-height:1.15}
.embed .hero p{font-size:clamp(14px,.95vw,17px)!important}
.embed .crumb{font-size:13px}
.embed .sec-h h2{font-size:clamp(20px,1.45vw,28px)!important}
.embed .wrap{width:min(1200px,100%)}