:root{
  --bg:#08090b;
  --bg2:#0d0c0d;
  --panel:#111214;
  --panel2:#161719;
  --text:#f7f7f7;
  --muted:#8f9094;
  --line:rgba(255,255,255,.09);
  --accent:#de5745;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  padding-top:76px;
  background:#08090b;
  color:var(--text);
  font-family:"Tajawal","Segoe UI",sans-serif;
  overflow-x:hidden;
}
.noise{
  position:fixed;inset:0;pointer-events:none;z-index:100;opacity:.025;
  background-image:radial-gradient(circle at 1px 1px,#fff 1px,transparent 0);
  background-size:5px 5px;
}
.page{width:min(1450px,calc(100% - 64px));margin:auto}

/* HEADER */
.site-header{
  height:76px;
  position:fixed;
  top:0;
  left:0;
  right:0;
  width:100%;
  z-index:99999;
  border-bottom:1px solid rgba(255,255,255,.06);
  background:rgba(8,9,11,.24);
  backdrop-filter:blur(24px) saturate(130%);
  -webkit-backdrop-filter:blur(24px) saturate(130%);
  box-shadow:0 8px 30px rgba(0,0,0,.07);
}
.header-inner{
  height:100%;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  direction:ltr;
}
.wordmark{
  justify-self:start;
  color:#df5c4a;
  text-decoration:none;
  font-size:17px;
  letter-spacing:8px;
}
.main-nav{
  display:flex;gap:42px;
  direction:rtl;
}
.main-nav a{
  position:relative;
  color:#d2d2d3;
  text-decoration:none;
  font-size:13px;
  padding:27px 0;
}
.main-nav a.active{color:#df5c4a}
.main-nav a.active:after{
  content:"";position:absolute;bottom:16px;left:0;right:0;height:2px;background:#df5c4a
}
.header-actions{
  justify-self:end;
  display:flex;
  gap:12px;
  direction:rtl;
}
.header-btn,.big-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  text-decoration:none;
  color:#fff;
  border-radius:14px;
  border:1px solid var(--line);
  font-weight:700;
  transition:.2s ease;
}
.header-btn{padding:12px 19px;font-size:12px}
.header-btn.solid,.big-btn.solid{
  background:linear-gradient(135deg,#d64b3e,#e56d4d);
  border-color:rgba(229,109,77,.5);
}
.header-btn.outline,.big-btn.outline{background:rgba(255,255,255,.015)}
.header-btn:hover,.big-btn:hover{transform:translateY(-2px);filter:brightness(1.07)}

/* HERO */
.hero{
  position:relative;
  min-height:842px;
  display:flex;
  align-items:center;
  overflow:hidden;
  background:
    radial-gradient(circle at 30% 45%,rgba(104,50,35,.18),transparent 24%),
    radial-gradient(circle at 73% 38%,rgba(81,32,35,.11),transparent 27%),
    linear-gradient(180deg,#0a090a,#08090b 72%,#090a0c);
}
.ambient{position:absolute;border-radius:50%;filter:blur(100px);pointer-events:none}
.a1{width:500px;height:500px;left:-190px;top:130px;background:rgba(113,48,36,.13)}
.a2{width:400px;height:400px;right:130px;bottom:-130px;background:rgba(91,39,52,.09)}
.hero-grid{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:.92fr .95fr 1.08fr;
  gap:55px;
  align-items:center;
  direction:ltr;
  padding:28px 0 42px;
}

/* LEFT COPY */
.hero-copy{
  position:relative;
  direction:rtl;
  text-align:right;
  align-self:center;
}
.small-label{
  color:#d45b49;
  font-size:11px;
  margin-bottom:20px;
}
.hero-copy h1{
  margin:0 0 22px;
  font-size:74px;
  line-height:1.03;
  letter-spacing:-2px;
}
.hero-copy h1 span{color:#d95b49}
.hero-copy p{
  max-width:455px;
  color:#9c9da0;
  font-size:16px;
  line-height:2;
  margin:0;
}
.hero-buttons{
  display:flex;
  gap:13px;
  margin:31px 0 31px;
  direction:rtl;
}
.big-btn{
  min-width:168px;
  padding:15px 21px;
  font-size:13px;
}
.demo-note{
  display:flex;
  align-items:center;
  gap:13px;
  color:#77797d;
  direction:rtl;
}
.demo-note b{display:block;font-size:10px;color:#9b9da1}
.demo-note small{display:block;font-size:8px;margin-top:4px}
.avatar-stack{display:flex;direction:ltr}
.avatar-stack span{
  width:31px;height:31px;
  display:grid;place-items:center;
  border-radius:50%;
  background:#1c1e21;
  border:2px solid #08090b;
  margin-left:-7px;
  color:#bbb;
  font-size:9px;
}
.decor-phone{
  position:absolute;
  overflow:hidden;
  border-radius:35px;
  border:5px solid #1f2024;
  background:#111;
  opacity:.34;
  pointer-events:none;
  box-shadow:0 25px 75px rgba(0,0,0,.5);
}
.decor-phone img{width:100%;height:100%;object-fit:cover}
.decor-left{
  width:250px;height:480px;
  left:-115px;bottom:-318px;
  transform:rotate(34deg);
}

/* CENTER PHONE */
.phone-column{
  position:relative;
  height:650px;
  display:grid;
  place-items:center;
  direction:ltr;
}
.phone-glow{
  position:absolute;
  width:350px;height:560px;
  border-radius:50%;
  background:rgba(164,72,48,.13);
  filter:blur(70px);
  transition:.45s;
}
.iphone{
  position:relative;
  z-index:5;
  width:305px;height:625px;
  border-radius:48px;
  padding:6px;
  background:linear-gradient(145deg,#aaa 0%,#383a3e 18%,#999 42%,#25272b 72%,#777);
  box-shadow:0 42px 105px rgba(0,0,0,.74);
}
.iphone-inner{
  width:100%;height:100%;
  border-radius:42px;
  overflow:hidden;
  position:relative;
  background:#0d0e10;
  border:2px solid #0a0b0c;
}
.dynamic-island{
  position:absolute;z-index:20;top:13px;left:50%;transform:translateX(-50%);
  width:98px;height:27px;border-radius:999px;background:#020202;
}
.status-bar{
  position:absolute;z-index:19;top:16px;left:0;right:0;padding:0 25px;
  display:flex;justify-content:space-between;
  font-size:10px;color:#fff;
}
.status-bar span:last-child{display:flex;gap:5px}
.phone-cover{
  position:absolute;inset:0 0 auto 0;height:255px;
}
.phone-cover img{width:100%;height:100%;object-fit:cover;transition:.35s}
.cover-fade{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.03) 0%,rgba(13,14,16,.3) 53%,#0d0e10 100%);
}
.phone-body{
  position:relative;
  z-index:4;
  padding:148px 20px 40px;
  text-align:center;
}
.phone-logo{
  width:88px;height:88px;
  margin:auto;
  border-radius:50%;
  display:grid;place-items:center;
  background:rgba(45,29,24,.72);
  border:1.5px solid var(--accent);
  backdrop-filter:blur(12px);
  overflow:hidden;
}
.phone-logo img{width:88%;height:88%;object-fit:contain}
.phone-body h2{font-size:22px;margin:13px 0 3px}
.phone-category{color:#c1c2c4;font-size:10px}
.phone-location{color:#8a8c91;font-size:9px;margin-top:8px}
.phone-location i{color:var(--accent);margin-left:4px}
.social-icons{
  display:flex;justify-content:center;gap:9px;margin:18px 0 20px
}
.social-icons span{
  width:37px;height:37px;border-radius:12px;
  background:#1a1b1e;border:1px solid rgba(255,255,255,.07);
  display:grid;place-items:center;font-size:14px;
}
.phone-links{display:grid;gap:9px}
.phone-link{
  min-height:58px;
  padding:11px 13px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.045);
  display:flex;
  align-items:center;
  justify-content:space-between;
  text-align:right;
  animation:linkin .32s ease both;
}
.phone-link b{font-size:11px}
.phone-link small{display:block;color:#77797e;font-size:8px;margin-top:3px}
.phone-link i{color:var(--accent);font-size:15px}
.phone-credit{
  position:absolute;bottom:16px;left:0;right:0;
  text-align:center;
  letter-spacing:5px;
  color:#65504a;
  font-size:7px;
}
.decor-bottom{
  width:225px;height:430px;
  right:-140px;bottom:-224px;
  transform:rotate(31deg);
}

/* RIGHT EXAMPLES */
.examples{
  direction:rtl;
  align-self:center;
}
.examples-top{
  display:flex;
  justify-content:space-between;
  align-items:end;
  margin-bottom:18px;
}
.examples-top span{
  color:#d85a47;
  font-size:11px;
}
.examples-top h3{
  margin:4px 0 0;
  font-size:20px;
}
.examples-top a{
  color:#d85a47;
  font-size:10px;
  text-decoration:none;
}
.cards-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
}
.example-card{
  height:213px;
  padding:0;
  border-radius:17px;
  overflow:hidden;
  border:1px solid var(--line);
  background:#101113;
  color:#fff;
  cursor:pointer;
  position:relative;
  text-align:right;
  transition:.22s ease;
}
.example-card:hover,.example-card.active{
  transform:translateY(-3px);
  border-color:rgba(217,91,73,.48);
}
.image-box{
  height:133px;
  overflow:hidden;
  position:relative;
}
.image-box:after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,0),rgba(16,17,19,.25) 55%,#101113 100%);
}
.image-box img{width:100%;height:100%;object-fit:cover}
.card-content{
  padding:9px 12px 10px;
  position:relative;
}
.card-logo{
  position:absolute;
  width:52px;height:52px;
  left:9px;top:-34px;
  border-radius:50%;
  display:grid;place-items:center;
  background:rgba(14,14,15,.86);
  border:1px solid rgba(255,255,255,.12);
  overflow:hidden;
}
.card-logo img{width:88%;height:88%;object-fit:contain}
.card-content b{
  display:block;
  font-size:12px;
}
.card-content b i{
  color:#d85a47;font-size:8px
}
.card-content span{
  display:block;color:#a6a7aa;font-size:8px;margin-top:4px;
}
.quote-box{
  margin-top:16px;
  min-height:103px;
  border-radius:18px;
  border:1px solid var(--line);
  background:linear-gradient(135deg,rgba(255,255,255,.035),rgba(255,255,255,.015));
  padding:17px 20px 13px;
}
.quote-main{
  display:flex;
  align-items:flex-start;
  gap:12px;
}
.quote-mark{
  font-size:30px;
  line-height:1;
  color:#d85a47;
}
.quote-main p{
  margin:0;
  color:#d6d7d8;
  font-size:11px;
  line-height:1.8;
  transition:.25s ease;
}
.quote-main small{
  display:block;
  color:#707277;
  font-size:8px;
  margin-top:5px;
}
.quote-dots{
  display:flex;
  justify-content:center;
  gap:6px;
  margin-top:10px;
}
.quote-dots button{
  width:6px;height:6px;
  padding:0;border:0;border-radius:50%;
  background:#55585d;
  cursor:pointer;
}
.quote-dots button.active{background:#d85a47}

/* FEATURE ROW */
.feature-row{
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:#0a0b0c;
}
.feature-grid{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  direction:rtl;
}
.feature-grid>div{
  min-height:80px;
  display:flex;
  align-items:center;
  gap:11px;
  padding:17px 20px;
  border-left:1px solid var(--line);
}
.feature-grid>div:last-child{border-left:0}
.feature-grid i{color:#d85a47;font-size:18px}
.feature-grid b{display:block;font-size:10px}
.feature-grid small{display:block;color:#77797d;font-size:8px;margin-top:4px}

/* BELOW */
.about{padding:90px 0}
.about-inner{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:80px;
  align-items:end;
}
.about-inner span,.contact-box>div>span{color:#d85a47;font-size:11px}
.about-inner h2,.contact-box h2{font-size:38px;margin:8px 0 0}
.about-inner p{color:#909298;line-height:2;font-size:14px}
.contact{padding:0 0 90px}
.contact-box{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:30px;
  padding:38px 42px;
  border-radius:25px;
  border:1px solid rgba(216,90,71,.2);
  background:linear-gradient(120deg,rgba(216,90,71,.09),rgba(255,255,255,.015));
}
.contact-box p{color:#888a90}
footer{border-top:1px solid var(--line);padding:31px 0}
.footer-inner{
  display:grid;grid-template-columns:1fr auto 1fr;
  gap:20px;align-items:center;
  color:#676a70;font-size:9px;
}
.footer-inner div{display:flex;gap:18px}
.footer-inner a{color:#75787e;text-decoration:none}
.footer-inner span:last-child{text-align:left}

@keyframes linkin{
  from{opacity:0;transform:translateY(5px)}
  to{opacity:1;transform:none}
}

@media(max-width:1180px){
  .hero-grid{grid-template-columns:1fr 1fr}
  .examples{grid-column:1/-1}
  .cards-grid{grid-template-columns:repeat(6,1fr)}
  .example-card{height:195px}
}
@media(max-width:900px){
  .header-inner{grid-template-columns:1fr 1fr}
  .main-nav{display:none}
  .hero-grid{grid-template-columns:1fr;text-align:center;direction:rtl}
  .hero-copy{text-align:center}
  .hero-copy p{margin:auto}
  .hero-buttons,.demo-note{justify-content:center}
  .decor-phone{display:none}
  .phone-column{height:650px}
  .examples{width:100%}
  .cards-grid{grid-template-columns:repeat(3,1fr)}
  .feature-grid{grid-template-columns:repeat(3,1fr)}
  .about-inner{grid-template-columns:1fr}
  .contact-box{flex-direction:column;text-align:center}
  .footer-inner{grid-template-columns:1fr;text-align:center}
  .footer-inner div{justify-content:center}
  .footer-inner span:last-child{text-align:center}
}
@media(max-width:620px){
  .page{width:min(100% - 22px,1450px)}
  .header-actions .solid{display:none}
  .header-actions .outline{display:inline-flex;padding:10px 14px;white-space:nowrap;background:rgba(255,255,255,.035)}
  .wordmark{letter-spacing:5px;font-size:14px}
  .hero{min-height:auto}
  .hero-grid{padding-top:40px}
  .hero-copy h1{font-size:52px}
  .phone-column{height:610px}
  .iphone{width:275px;height:560px}
  .phone-cover{height:225px}
  .phone-body{padding:132px 16px 38px}
  .phone-logo{width:74px;height:74px}
  .cards-grid{grid-template-columns:1fr 1fr}
  .example-card{height:190px}
  .quote-box{min-height:112px}
  .feature-grid{grid-template-columns:1fr 1fr}
  .about-inner h2,.contact-box h2{font-size:32px}
}


/* V6 phone RTL cleanup */
.phone-body{
  direction:rtl;
}
.phone-body h2,
.phone-category,
.phone-location{
  text-align:center;
}
.phone-links{
  direction:rtl;
}
.phone-link{
  direction:rtl;
  text-align:right;
}
.phone-link > div{
  flex:1;
}
.phone-link > i{
  margin-right:10px;
  margin-left:0;
}
.social-icons{
  direction:rtl;
}
.phone-credit{
  bottom:11px;
}

/* Keep hero physically: examples left, phone center, copy right */
.hero-grid > .examples{grid-column:1}
.hero-grid > .phone-column{grid-column:2}
.hero-grid > .hero-copy{grid-column:3}

/* Support buttons */
.contact-actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  justify-content:flex-start;
}
.contact-actions .big-btn{
  min-width:190px;
}

@media(max-width:900px){
  .hero-grid > .hero-copy{grid-column:1;order:1}
  .hero-grid > .phone-column{grid-column:1;order:2}
  .hero-grid > .examples{grid-column:1;order:3}
  .contact-actions{justify-content:center}
}


/* ================================
   V7 coded decorative phones
   ================================ */

.hero{
  min-height:760px !important;
  padding-bottom:0 !important;
}

.hero-grid{
  position:relative;
  padding-top:18px !important;
  padding-bottom:18px !important;
  min-height:720px;
}

/* Pull lower section upward by reducing empty hero tail */
.feature-row{
  position:relative;
  z-index:8;
  margin-top:-8px;
}

/* Main phone: keep full phone visible */
.phone-column{
  height:610px !important;
  align-self:center;
}
.iphone{
  width:286px !important;
  height:586px !important;
}
.phone-cover{
  height:232px !important;
}
.phone-body{
  padding:132px 18px 48px !important;
}
.phone-logo{
  width:78px !important;
  height:78px !important;
}
.phone-body h2{
  font-size:20px !important;
  margin-top:10px !important;
}
.phone-category{
  font-size:9px !important;
}
.phone-location{
  font-size:8px !important;
}
.social-icons{
  margin:13px 0 15px !important;
}
.social-icons span{
  width:33px !important;
  height:33px !important;
  font-size:13px !important;
}
.phone-links{
  gap:8px !important;
}
.phone-link{
  min-height:54px !important;
  padding:10px 12px !important;
}
.phone-link b{
  font-size:10px !important;
}
.phone-link small{
  font-size:7px !important;
}

/* Reserve a dedicated footer area for ONWAN so it never sits inside a link */
.phone-credit{
  position:absolute !important;
  bottom:7px !important;
  height:16px;
  line-height:16px;
  z-index:12;
  background:linear-gradient(180deg,rgba(13,14,16,0),#0d0e10 35%);
  padding-top:2px;
  pointer-events:none;
}
.phone-links{
  padding-bottom:18px;
}

/* Decorative coded phones */
.decor-coded-phone{
  position:absolute;
  z-index:1;
  width:205px;
  height:410px;
  border-radius:36px;
  padding:5px;
  background:linear-gradient(145deg,#44474d,#181a1f 55%,#2f3238);
  box-shadow:0 28px 70px rgba(0,0,0,.42);
  opacity:.25;
  pointer-events:none;
  overflow:hidden;
  transition:opacity .35s ease, transform .45s ease;
}
.decor-coded-inner{
  width:100%;
  height:100%;
  border-radius:31px;
  overflow:hidden;
  background:#0d0e10;
  position:relative;
}
.decor-coded-inner > img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  transition:.45s ease;
}
.decor-mini-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.06),rgba(0,0,0,.36) 48%,rgba(5,6,8,.94));
}
.decor-mini-island{
  position:absolute;
  z-index:5;
  top:10px;
  left:50%;
  transform:translateX(-50%);
  width:76px;
  height:19px;
  border-radius:999px;
  background:#020202;
}
.decor-mini-content{
  position:absolute;
  z-index:4;
  left:12px;
  right:12px;
  bottom:34px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:7px;
}
.decor-mini-content img{
  width:66px;
  height:66px;
  object-fit:contain;
  border-radius:50%;
  background:rgba(8,9,11,.68);
  border:1px solid rgba(255,255,255,.13);
}
.decor-mini-content b{
  font-size:11px;
  color:#fff;
}
.decor-coded-left{
  left:34%;
  bottom:-215px;
  transform:rotate(31deg);
}
.decor-coded-right{
  right:19%;
  top:190px;
  transform:rotate(-29deg);
}
.decor-coded-phone.switch{
  opacity:.34;
}

/* Fictional client logos */
.client-proof{
  margin-top:18px;
}
.client-logo-stack{
  display:flex;
  direction:ltr;
  align-items:center;
}
.client-logo-stack span{
  width:37px;
  height:37px;
  margin-left:-7px;
  border-radius:50%;
  background:#17191d;
  border:2px solid #08090b;
  display:grid;
  place-items:center;
  overflow:hidden;
}
.client-logo-stack img{
  width:68%;
  height:68%;
  object-fit:contain;
}
.client-logo-stack .client-more{
  color:#eee;
  font-size:9px;
  font-weight:700;
  background:#202227;
}

/* Keep examples and quote slightly tighter to avoid empty vertical area */
.examples{
  transform:translateY(-3px);
}
.quote-box{
  margin-top:12px !important;
}
.feature-grid > div{
  min-height:72px !important;
  padding-top:14px !important;
  padding-bottom:14px !important;
}

/* Prevent old decorative image phones from showing if present */
.decor-phone{
  display:none !important;
}

@media(max-width:1180px){
  .decor-coded-left{left:3%;bottom:-185px}
  .decor-coded-right{right:3%;top:150px}
}
@media(max-width:900px){
  .decor-coded-phone{display:none}
  .hero{
    min-height:auto !important;
  }
  .hero-grid{
    min-height:auto;
  }
}


/* ONWAN: مساحة إضافية بين شعار بطاقة المثال واسم المشروع */
.demo-card .demo-name{
  margin-top:10px !important;
}


/* ================================
   FIX: فصل اللوجو عن اسم المشروع
   ================================ */

/* اللوجو يظل في مكانه */
.card-logo{
  top:-34px !important;
}

/* ننزل محتوى النص كله لتحت حتى ما يدخل في اللوجو */
.card-content{
  padding-top:30px !important;
  padding-right:12px !important;
  padding-left:12px !important;
  padding-bottom:12px !important;
}

/* مسافة إضافية بسيطة تحت اللوجو */
.card-content b{
  margin-top:4px !important;
  line-height:1.35 !important;
}

/* الوصف تحت الاسم */
.card-content span{
  margin-top:6px !important;
}


/* =========================================
   ONWAN Smooth Example Transitions
   ========================================= */

.iphone,
.iphone-inner,
.phone-cover,
.phone-cover img,
.phone-logo,
.phone-logo img,
.phone-body h2,
.phone-category,
.phone-location,
.social-icons,
.phone-links,
.phone-glow,
.decor-coded-phone,
.decor-coded-inner > img,
.decor-mini-content img,
.decor-mini-content b{
  transition:
    opacity .38s cubic-bezier(.22,.61,.36,1),
    transform .48s cubic-bezier(.22,.61,.36,1),
    filter .42s cubic-bezier(.22,.61,.36,1),
    background .45s ease,
    border-color .45s ease;
  will-change:opacity,transform,filter;
}

/* main phone change-out */
.iphone.is-switching .phone-cover img{
  opacity:.18;
  transform:scale(1.045);
  filter:blur(3px);
}

.iphone.is-switching .phone-logo{
  opacity:0;
  transform:translateY(8px) scale(.92);
}

.iphone.is-switching .phone-body h2,
.iphone.is-switching .phone-category,
.iphone.is-switching .phone-location,
.iphone.is-switching .social-icons{
  opacity:0;
  transform:translateY(8px);
}

.iphone.is-switching .phone-links{
  opacity:0;
  transform:translateY(12px);
}

/* smooth selected project card */
.example-card{
  transition:
    transform .32s cubic-bezier(.22,.61,.36,1),
    border-color .32s ease,
    box-shadow .32s ease,
    opacity .32s ease !important;
}

.example-card:hover{
  transform:translateY(-4px) scale(1.01) !important;
}

.example-card.active{
  transform:translateY(-3px) scale(1.015) !important;
  box-shadow:0 12px 35px rgba(0,0,0,.28);
}

/* softly animate card logo/photo */
.example-card .image-box img,
.example-card .card-logo{
  transition:transform .45s cubic-bezier(.22,.61,.36,1), filter .45s ease;
}
.example-card.active .image-box img{
  transform:scale(1.035);
}
.example-card.active .card-logo{
  transform:scale(1.045);
}

/* links animate back in naturally */
.phone-link{
  opacity:1;
  transform:translateY(0);
}

.phone-link.smooth-enter{
  animation:onwanLinkIn .46s cubic-bezier(.22,.61,.36,1) both;
}

@keyframes onwanLinkIn{
  from{
    opacity:0;
    transform:translateY(10px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}

/* decorative coded phones */
.decor-coded-phone.is-switching{
  opacity:.12 !important;
  filter:blur(1.2px);
}
.decor-coded-phone.is-switching .decor-coded-inner > img{
  transform:scale(1.055);
}

/* reduced-motion accessibility */
@media (prefers-reduced-motion: reduce){
  .iphone,
  .iphone *,
  .example-card,
  .example-card *,
  .decor-coded-phone,
  .decor-coded-phone *{
    transition:none !important;
    animation:none !important;
  }
}
/* ONWAN V22 pricing */
.pricing-section{padding:110px 0;background:linear-gradient(180deg,#090a0c,#0d090a);border-top:1px solid rgba(255,255,255,.06);border-bottom:1px solid rgba(255,255,255,.06)}
.pricing-heading{text-align:center;max-width:760px;margin:0 auto 44px}.pricing-heading>span{color:#e75d4b;font-weight:800}.pricing-heading h2{font-size:clamp(32px,4vw,54px);line-height:1.2;margin:12px 0;color:#fff}.pricing-heading p{color:#909097;font-size:17px;line-height:1.8}
.billing-switch{width:max-content;max-width:100%;display:flex;gap:6px;margin:-20px auto 38px;padding:6px;border:1px solid rgba(255,255,255,.1);border-radius:16px;background:rgba(255,255,255,.045);direction:rtl}.billing-switch button{border:0;border-radius:11px;padding:11px 24px;background:transparent;color:#aaa;font-family:inherit;font-weight:800;cursor:pointer;transition:.2s}.billing-switch button.active{background:#e75d4b;color:#fff;box-shadow:0 8px 25px rgba(231,93,75,.25)}.billing-switch button span{margin-right:6px;padding:3px 7px;border-radius:999px;background:rgba(255,255,255,.14);font-size:10px}.dashboard-billing{margin:18px auto 28px}
.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:stretch}.price-card{position:relative;padding:28px;border:1px solid rgba(255,255,255,.1);border-radius:28px;background:linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.018));box-shadow:0 22px 65px rgba(0,0,0,.2);color:#fff;overflow:hidden}.price-card.featured{border-color:rgba(231,93,75,.65);transform:translateY(-12px);background:radial-gradient(circle at 80% 0,rgba(231,93,75,.18),transparent 42%),rgba(255,255,255,.035)}.price-card.ultra{background:radial-gradient(circle at 20% 0,rgba(174,102,255,.16),transparent 44%),rgba(255,255,255,.035)}.popular-pill{position:absolute;top:14px;left:14px;background:#e75d4b;color:#fff;border-radius:999px;padding:6px 10px;font-size:11px;font-weight:800}.plan-name{display:flex;align-items:center;gap:13px}.plan-name>i{width:44px;height:44px;display:grid;place-items:center;border-radius:14px;background:rgba(231,93,75,.13);color:#e75d4b}.plan-name span{display:grid}.plan-name b{font-size:21px}.plan-name small{color:#85858d;margin-top:3px}.plan-price{display:flex;align-items:center;gap:10px;margin:27px 0}.plan-price strong{font-size:43px;letter-spacing:-1px}.plan-price span{font-weight:700;color:#b6b6bc;line-height:1.15}.plan-price small{font-weight:500;font-size:11px}.price-card ul{list-style:none;padding:0;margin:0 0 25px;display:grid;gap:12px}.price-card li{color:#c5c5ca;font-size:14px}.price-card li:before{content:'✓';display:inline-grid;place-items:center;width:20px;height:20px;margin-left:8px;border-radius:50%;background:rgba(231,93,75,.13);color:#e75d4b;font-weight:900}.plan-cta{display:flex;justify-content:center;padding:13px 17px;border:1px solid rgba(255,255,255,.15);border-radius:14px;color:#fff;text-decoration:none;font-weight:800}.plan-cta.solid{background:#e75d4b;border-color:#e75d4b}.pricing-note{display:flex;justify-content:center;align-items:center;gap:9px;margin-top:28px;color:#86868d;font-size:13px}.pricing-note i{color:#e75d4b}
@media(max-width:900px){.pricing-grid{grid-template-columns:1fr}.price-card.featured{transform:none}.pricing-section{padding:75px 0}.pricing-heading h2{font-size:34px}}
.site-promo-bar{position:relative;z-index:1001;background:linear-gradient(90deg,#7f1d1d,#df5c4a 48%,#8e2521);color:#fff;border-bottom:1px solid rgba(255,255,255,.2)}.site-promo-bar.hidden{display:none}.site-promo-inner{min-height:52px;display:flex;align-items:center;justify-content:center;gap:13px;padding-top:8px;padding-bottom:8px}.site-promo-type{padding:5px 9px;border-radius:999px;background:rgba(255,255,255,.18);font-size:12px;font-weight:800;white-space:nowrap}.site-promo-copy{display:flex;align-items:center;gap:9px;min-width:0}.site-promo-copy b{font-size:15px;white-space:nowrap}.site-promo-copy span{font-size:14px;color:rgba(255,255,255,.85);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.site-promo-code{direction:ltr;border:1px dashed rgba(255,255,255,.65);border-radius:9px;background:rgba(0,0,0,.17);color:#fff;padding:7px 11px;font:800 13px Arial;letter-spacing:1px;cursor:pointer;white-space:nowrap}.site-promo-link{border-radius:9px;background:#fff;color:#731d1d;text-decoration:none;padding:7px 12px;font-size:13px;font-weight:800;white-space:nowrap}.site-promo-close{position:absolute;left:14px;border:0;background:transparent;color:#fff;font-size:24px;cursor:pointer;opacity:.78}.site-promo-close:hover{opacity:1}.site-promo-bar .hidden{display:none!important}@media(max-width:760px){.site-promo-inner{justify-content:flex-start;padding-left:42px;gap:8px;overflow-x:auto}.site-promo-copy{display:grid;gap:0;min-width:170px}.site-promo-copy b,.site-promo-copy span{font-size:12px}.site-promo-type{font-size:10px}.site-promo-close{position:absolute;left:7px}.site-promo-link{font-size:11px}.site-promo-code{font-size:11px}}