@font-face{
  font-family:"Tubic";
  src:url("/assets/fonts/tubic/FbTubic-Sans-Regular.otf") format("opentype");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Tubic";
  src:url("/assets/fonts/tubic/FbTubic-Sans-Medium.otf") format("opentype");
  font-weight:600;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Tubic";
  src:url("/assets/fonts/tubic/FbTubic-Sans-Bold.otf") format("opentype");
  font-weight:700;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Tubic";
  src:url("/assets/fonts/tubic/FbTubic-Sans-Black.otf") format("opentype");
  font-weight:900;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"TubicEng";
  src:url("/assets/fonts/tubic/FbTubic-SansEng-Regular.otf") format("opentype");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"TubicEng";
  src:url("/assets/fonts/tubic/FbTubic-SansEng-Bold.otf") format("opentype");
  font-weight:700;
  font-style:normal;
  font-display:swap;
}

:root{
  --case-max:1180px;
  --case-pad:clamp(22px,4vw,44px);
  --case-dark:#4A403A;
  --case-taupe:#A78F7A;
  --case-gold:#FFD967;
  --case-cream:#F6E7B1;
  --case-paper:#F8F6F2;
  --case-ink:#253137;
  --case-muted:#687274;
  --case-line:rgba(74,64,58,.14);
}

body.case-velora{
  --case-dark:#5C3041;
  --case-taupe:#B98295;
  --case-gold:#E7C4CE;
  --case-cream:#F3DCE2;
  --case-paper:#FCF6F7;
  --case-ink:#3D2B31;
  --case-muted:#75666B;
  --case-line:rgba(92,48,65,.16);
  --brand-panel-image:url("/assets/images/brands/velora/logo.jpeg");
  --brand-panel-overlay:linear-gradient(180deg,rgba(92,48,65,.05),rgba(92,48,65,.64));
}

body.case-lumera{
  --case-dark:#112F38;
  --case-taupe:#9EA89A;
  --case-gold:#D8D8C7;
  --case-cream:#E8E5D7;
  --case-paper:#F6F3EA;
  --case-ink:#263335;
  --case-muted:#66706C;
  --case-line:rgba(17,47,56,.15);
  --brand-panel-image:url("/assets/images/brands/lumera/logo.jpeg");
  --brand-panel-overlay:linear-gradient(180deg,rgba(17,47,56,.04),rgba(17,47,56,.62));
}

html[lang="he"] body.case-system{
  font-family:"Tubic","Einstein",system-ui,sans-serif;
  background:#f3eee6;
  color:var(--case-ink);
  letter-spacing:0;
  width:100%;
  max-width:100vw;
  overflow-x:hidden;
}

html[lang="en"] body.case-system{
  font-family:"TubicEng","Tubic",Inter,system-ui,sans-serif;
  background:#f3eee6;
  color:var(--case-ink);
  letter-spacing:0;
  width:100%;
  max-width:100vw;
  overflow-x:hidden;
}

html[data-theme="dark"] body.case-system{
  --case-paper:#211d1a;
  --case-ink:#F8F6F2;
  --case-muted:#D5CBC2;
  --case-line:rgba(248,246,242,.16);
  background:#15120f;
  color:var(--case-ink);
}

html[data-theme="dark"] body.case-velora{
  --case-dark:#F3DCE2;
  --case-taupe:#D9A9B7;
  --case-gold:#F3DCE2;
  --case-cream:#5C3041;
  --case-paper:#22171C;
  --case-ink:#FCF6F7;
  --case-muted:#D9C8CE;
  --case-line:rgba(252,246,247,.16);
}

html[data-theme="dark"] body.case-lumera{
  --case-dark:#E8E5D7;
  --case-taupe:#C7CCBF;
  --case-gold:#D8D8C7;
  --case-cream:#112F38;
  --case-paper:#151F20;
  --case-ink:#F6F3EA;
  --case-muted:#D2D4C9;
  --case-line:rgba(246,243,234,.16);
}

html[data-theme="dark"] .case-system .nav{
  background:rgba(24,21,18,.9);
  border-color:rgba(248,246,242,.12);
  box-shadow:0 18px 54px rgba(0,0,0,.28);
}

html[data-theme="dark"] .case-system .brand,
html[data-theme="dark"] .case-system .nav-logo,
html[data-theme="dark"] .case-system .nav-links a,
html[data-theme="dark"] .case-system .nav-ico,
html[data-theme="dark"] .case-system .nav-toggle{
  color:var(--case-ink);
}

.case-system *{
  min-width:0;
}

html[data-theme="dark"] .project-cover-board,
html[data-theme="dark"] .truth-item,
html[data-theme="dark"] .deliverable,
html[data-theme="dark"] .creative-main,
html[data-theme="dark"] .system-note,
html[data-theme="dark"] .proof-card,
html[data-theme="dark"] .supporting-proof,
html[data-theme="dark"] .content-card,
html[data-theme="dark"] .lead-panel,
html[data-theme="dark"] .lead-steps article,
html[data-theme="dark"] .package-col,
html[data-theme="dark"] .adapt-panel,
html[data-theme="dark"] .adapt-grid article,
html[data-theme="dark"] .final-panel,
html[data-theme="dark"] .next-cases{
  background:rgba(33,29,26,.84);
  border-color:var(--case-line);
  box-shadow:0 22px 70px rgba(0,0,0,.24);
}

html[data-theme="dark"] body.case-velora .project-cover-board,
html[data-theme="dark"] body.case-velora .truth-item,
html[data-theme="dark"] body.case-velora .deliverable,
html[data-theme="dark"] body.case-velora .creative-main,
html[data-theme="dark"] body.case-velora .system-note,
html[data-theme="dark"] body.case-velora .proof-card,
html[data-theme="dark"] body.case-velora .supporting-proof,
html[data-theme="dark"] body.case-velora .content-card,
html[data-theme="dark"] body.case-velora .lead-panel,
html[data-theme="dark"] body.case-velora .lead-steps article,
html[data-theme="dark"] body.case-velora .package-col,
html[data-theme="dark"] body.case-velora .adapt-panel,
html[data-theme="dark"] body.case-velora .adapt-grid article,
html[data-theme="dark"] body.case-velora .final-panel,
html[data-theme="dark"] body.case-velora .next-cases{
  background:rgba(34,23,28,.86);
}

html[data-theme="dark"] body.case-lumera .project-cover-board,
html[data-theme="dark"] body.case-lumera .truth-item,
html[data-theme="dark"] body.case-lumera .deliverable,
html[data-theme="dark"] body.case-lumera .creative-main,
html[data-theme="dark"] body.case-lumera .system-note,
html[data-theme="dark"] body.case-lumera .proof-card,
html[data-theme="dark"] body.case-lumera .supporting-proof,
html[data-theme="dark"] body.case-lumera .content-card,
html[data-theme="dark"] body.case-lumera .lead-panel,
html[data-theme="dark"] body.case-lumera .lead-steps article,
html[data-theme="dark"] body.case-lumera .package-col,
html[data-theme="dark"] body.case-lumera .adapt-panel,
html[data-theme="dark"] body.case-lumera .adapt-grid article,
html[data-theme="dark"] body.case-lumera .final-panel,
html[data-theme="dark"] body.case-lumera .next-cases{
  background:rgba(21,31,32,.86);
}

html[data-theme="dark"] .content-card.large{
  background:linear-gradient(160deg,rgba(74,64,58,.94),rgba(12,63,81,.94));
}

html[data-theme="dark"] body.case-velora .content-card.large{
  background:linear-gradient(160deg,rgba(92,48,65,.94),rgba(44,69,77,.9));
}

html[data-theme="dark"] body.case-lumera .content-card.large{
  background:linear-gradient(160deg,rgba(17,47,56,.94),rgba(67,79,72,.9));
}

.case-system .nav{
  font-family:"Tubic","Einstein",system-ui,sans-serif;
  background:rgba(248,246,242,.9);
  border-color:rgba(74,64,58,.1);
  box-shadow:0 18px 54px rgba(74,64,58,.12);
}

.case-system .brand,
.case-system .nav-logo,
.case-system .nav-links a,
.case-system .nav-ico{
  color:var(--teal)!important;
  opacity:1!important;
  text-shadow:none!important;
}

.case-system .brand .mark,
.case-system .nav-logo .mark,
.case-system .brand *,
.case-system .nav-logo *{
  color:var(--teal)!important;
  opacity:1!important;
}

.case-system .nav-ico{
  background:rgba(12,63,81,.06);
  border-color:rgba(12,63,81,.12);
}

html[data-theme="dark"] .case-system .brand,
html[data-theme="dark"] .case-system .nav-logo,
html[data-theme="dark"] .case-system .nav-links a,
html[data-theme="dark"] .case-system .nav-ico,
html[data-theme="dark"] .case-system .nav-toggle,
html[data-theme="dark"] .case-system .brand *,
html[data-theme="dark"] .case-system .nav-logo *{
  color:var(--case-ink)!important;
}

html[data-theme="dark"] .case-system .nav-ico,
html[data-theme="dark"] .case-system .nav-toggle{
  background:rgba(248,246,242,.08);
  border-color:rgba(248,246,242,.22);
}

.case-shell{
  overflow:hidden;
  max-width:100vw;
  direction:ltr;
  background:
    linear-gradient(180deg,rgba(248,246,242,.92),rgba(241,238,232,.96) 18%,rgba(248,246,242,.98) 100%);
}

html[data-theme="dark"] .case-shell{
  background:
    radial-gradient(circle at 20% 0,color-mix(in srgb,var(--case-gold) 8%,transparent),transparent 34%),
    linear-gradient(180deg,rgba(18,15,13,.96),rgba(14,12,10,.98) 28%,rgba(18,15,13,.98) 100%);
}

html[data-theme="dark"] body.case-velora .case-shell{
  background:
    radial-gradient(circle at 20% 0,rgba(231,196,206,.1),transparent 34%),
    linear-gradient(180deg,rgba(28,18,23,.96),rgba(18,12,15,.98) 28%,rgba(28,18,23,.98) 100%);
}

html[data-theme="dark"] body.case-lumera .case-shell{
  background:
    radial-gradient(circle at 20% 0,rgba(216,216,199,.1),transparent 34%),
    linear-gradient(180deg,rgba(18,27,28,.96),rgba(11,18,19,.98) 28%,rgba(18,27,28,.98) 100%);
}

.case-wrap{
  width:min(var(--case-max),calc(100% - 40px));
  margin-inline:auto;
}

.case-hero{
  position:relative;
  min-height:92svh;
  display:grid;
  align-items:end;
  padding:clamp(116px,14vw,164px) 0 clamp(44px,7vw,78px);
  isolation:isolate;
  color:#fff;
  background:#211b18;
}

.case-hero::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:var(--hero-image);
  background-size:cover;
  background-position:center;
  transform:scale(1.02);
  z-index:-2;
}

.case-hero::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg,rgba(20,14,11,.16),rgba(20,14,11,.18) 34%,rgba(20,14,11,.72) 100%),
    linear-gradient(90deg,rgba(20,14,11,.68),rgba(20,14,11,.18) 54%,rgba(20,14,11,.52));
  z-index:-1;
}

.case-back{
  display:inline-flex;
  align-items:center;
  gap:9px;
  min-height:42px;
  padding:0 16px;
  border:1px solid rgba(255,255,255,.36);
  border-radius:999px;
  background:rgba(255,255,255,.14);
  color:#fff;
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  font-size:14px;
  font-weight:700;
  margin-bottom:clamp(18px,3vw,30px);
}

.case-back svg{
  width:17px;
  height:17px;
  fill:none;
  stroke:currentColor;
  stroke-width:2.2;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.case-hero-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(310px,.42fr);
  gap:clamp(28px,5vw,68px);
  align-items:end;
}

html[lang="he"] .case-hero-grid{
  direction:rtl;
}

html[lang="he"] .case-hero-grid > *{
  direction:rtl;
}

.case-kicker{
  display:inline-flex;
  align-items:center;
  min-height:38px;
  padding:0 18px;
  border-radius:999px;
  background:rgba(248,246,242,.2);
  border:1px solid rgba(255,255,255,.44);
  -webkit-backdrop-filter:blur(16px);
  backdrop-filter:blur(16px);
  font-size:13px;
  font-weight:800;
  color:rgba(255,255,255,.92);
}

.case-title{
  margin:clamp(18px,2.6vw,28px) 0 0;
  max-width:12ch;
  font-size:clamp(58px,8.6vw,124px);
  line-height:.92;
  letter-spacing:0;
  color:#fff;
  text-wrap:balance;
  direction:ltr;
  text-align:start;
}

html[lang="he"] .case-title{
  text-align:right;
}

.case-subtitle{
  max-width:760px;
  margin-top:clamp(16px,2vw,22px);
  color:rgba(255,255,255,.82);
  font-size:clamp(19px,2.1vw,28px);
  line-height:1.45;
}

.case-tags{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:clamp(22px,3vw,34px);
}

.case-tag{
  display:inline-flex;
  align-items:center;
  min-height:38px;
  padding:0 15px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.34);
  background:rgba(255,255,255,.13);
  color:#fff;
  font-size:13px;
  font-weight:700;
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
}

.case-hero-card{
  border:1px solid rgba(255,255,255,.34);
  background:rgba(248,246,242,.18);
  -webkit-backdrop-filter:blur(18px);
  backdrop-filter:blur(18px);
  border-radius:24px;
  padding:22px;
  box-shadow:0 28px 70px rgba(0,0,0,.22);
}

.case-hero-card p{
  margin:0;
  color:rgba(255,255,255,.82);
  font-size:15px;
  line-height:1.65;
}

.case-hero-card strong{
  display:block;
  color:#fff;
  font-size:18px;
  margin-bottom:8px;
}

.case-section{
  padding:clamp(52px,7vw,96px) 0;
  position:relative;
  direction:rtl;
  text-align:right;
}

.case-section.compact{
  padding:clamp(34px,5vw,66px) 0;
}

.project-cover-section{
  padding-block:clamp(28px,5vw,70px) clamp(42px,6vw,82px);
}

.project-cover-board{
  margin:0;
  overflow:hidden;
  border-radius:34px;
  background:#ece3d9;
  border:1px solid rgba(255,255,255,.72);
  box-shadow:0 30px 90px rgba(74,64,58,.16);
}

.project-cover-board img{
  display:block;
  width:100%;
  height:auto;
}

.section-lede{
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(300px,.52fr);
  gap:clamp(24px,5vw,70px);
  align-items:end;
  margin-bottom:clamp(26px,5vw,58px);
}

.section-label{
  display:inline-flex;
  align-items:center;
  min-height:34px;
  padding:0 14px;
  border-radius:999px;
  background:color-mix(in srgb,var(--case-gold) 24%,transparent);
  color:var(--case-dark);
  border:1px solid color-mix(in srgb,var(--case-dark) 12%,transparent);
  font-size:12px;
  font-weight:900;
}

.case-section h2{
  color:var(--case-dark);
  font-size:clamp(38px,5.4vw,82px);
  line-height:1.02;
  letter-spacing:0;
  margin-top:14px;
  text-wrap:balance;
}

.case-section h2 .mark-line{
  background:linear-gradient(transparent 62%,color-mix(in srgb,var(--case-gold) 54%,transparent) 0);
}

.section-lede p{
  color:var(--case-muted);
  font-size:clamp(17px,1.45vw,21px);
  line-height:1.75;
}

.truth-band{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1px;
  overflow:hidden;
  border-radius:26px;
  border:1px solid var(--case-line);
  background:var(--case-line);
  box-shadow:0 22px 70px rgba(74,64,58,.08);
}

.truth-item{
  min-height:250px;
  padding:clamp(24px,3vw,34px);
  background:rgba(248,246,242,.88);
}

.truth-item b{
  display:block;
  color:var(--case-dark);
  font-size:clamp(22px,2.2vw,31px);
  line-height:1.13;
  margin-bottom:12px;
}

.truth-item p{
  color:var(--case-muted);
  font-size:16px;
  line-height:1.7;
}

.creative-board{
  display:grid;
  grid-template-columns:minmax(0,.88fr) minmax(0,1fr);
  gap:clamp(18px,3vw,34px);
  align-items:stretch;
}

.creative-main{
  padding:clamp(28px,4vw,46px);
  border-radius:30px;
  border:1px solid var(--case-line);
  background:
    linear-gradient(150deg,rgba(248,246,242,.94),rgba(246,231,177,.34)),
    radial-gradient(circle at 18% 18%,color-mix(in srgb,var(--case-gold) 28%,transparent),transparent 32%);
  box-shadow:0 26px 78px rgba(74,64,58,.08);
}

.creative-main h2{
  font-size:clamp(36px,4.6vw,68px);
}

.creative-main p{
  margin-top:18px;
  color:var(--case-muted);
  font-size:17px;
  line-height:1.85;
}

.creative-points{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
}

.creative-points article{
  min-height:210px;
  padding:24px;
  border-radius:24px;
  border:1px solid var(--case-line);
  background:rgba(248,246,242,.78);
  box-shadow:0 18px 58px rgba(74,64,58,.055);
}

.creative-points b{
  display:block;
  color:var(--case-dark);
  font-size:24px;
  line-height:1.12;
  margin-bottom:10px;
}

.creative-points p{
  color:var(--case-muted);
  font-size:15px;
  line-height:1.7;
}

.deliverables{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:12px;
}

.deliverable{
  min-height:220px;
  padding:22px;
  border-radius:22px;
  border:1px solid var(--case-line);
  background:rgba(255,255,255,.55);
  box-shadow:0 20px 56px rgba(74,64,58,.06);
}

.deliverable:nth-child(2n){
  background:rgba(246,231,177,.34);
}

.deliverable .num{
  color:var(--case-taupe);
  font-size:12px;
  font-weight:900;
}

.deliverable h3{
  color:var(--case-dark);
  font-size:22px;
  line-height:1.15;
  margin:48px 0 10px;
  letter-spacing:0;
}

.deliverable p{
  color:var(--case-muted);
  font-size:14.5px;
  line-height:1.62;
}

.brand-core{
  display:grid;
  grid-template-columns:minmax(360px,.48fr) minmax(0,1fr);
  gap:clamp(24px,4vw,54px);
  align-items:stretch;
}

.brand-logo-panel{
  display:grid;
  align-content:end;
  min-height:560px;
  padding:clamp(24px,3vw,36px);
  border-radius:30px;
  overflow:hidden;
  background:
    var(--brand-panel-overlay,linear-gradient(180deg,rgba(74,64,58,.08),rgba(74,64,58,.56))),
    var(--brand-panel-image,url("/assets/images/brands/lumiere/logo.jpeg")) center/cover;
  color:#fff;
  box-shadow:0 26px 78px rgba(74,64,58,.18);
}

.brand-logo-panel h3{
  max-width:10ch;
  color:#fff;
  font-size:clamp(34px,4vw,58px);
  letter-spacing:0;
  line-height:.98;
}

.brand-logo-panel p{
  max-width:38ch;
  margin-top:14px;
  color:rgba(255,255,255,.78);
  font-size:15px;
  line-height:1.65;
}

.brand-system-grid{
  display:grid;
  gap:16px;
}

.palette{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:10px;
}

.swatch{
  min-height:170px;
  padding:16px;
  border-radius:22px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  border:1px solid rgba(0,0,0,.04);
  box-shadow:0 14px 42px rgba(74,64,58,.08);
}

.swatch span{
  display:block;
  color:currentColor;
  font-size:12px;
  font-weight:900;
  direction:ltr;
  text-align:start;
}

.system-note-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
}

.system-note{
  padding:24px;
  min-height:178px;
  border-radius:22px;
  border:1px solid var(--case-line);
  background:rgba(248,246,242,.78);
}

.system-note h3{
  color:var(--case-dark);
  font-size:24px;
  line-height:1.15;
  letter-spacing:0;
  margin-bottom:10px;
}

.system-note p{
  color:var(--case-muted);
  font-size:15px;
  line-height:1.7;
}

.showcase-stack{
  display:grid;
  gap:clamp(22px,3vw,36px);
}

.showcase-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(280px,.34fr);
  gap:clamp(22px,4vw,46px);
  align-items:center;
}

.showcase-row.flip{
  grid-template-columns:minmax(280px,.34fr) minmax(0,1fr);
}

.showcase-row.flip .showcase-visual{
  order:2;
}

.showcase-row.flip .showcase-copy{
  order:1;
}

.showcase-visual{
  border-radius:30px;
  overflow:hidden;
  background:#eee7dc;
  border:1px solid rgba(255,255,255,.7);
  box-shadow:0 24px 76px rgba(74,64,58,.14);
}

.showcase-visual img{
  width:100%;
  height:auto;
}

.showcase-copy{
  padding-inline:clamp(0px,2vw,18px);
}

.showcase-copy .mini{
  display:inline-flex;
  align-items:center;
  min-height:32px;
  padding:0 12px;
  border-radius:999px;
  background:color-mix(in srgb,var(--case-gold) 26%,transparent);
  color:var(--case-dark);
  font-size:12px;
  font-weight:900;
}

.showcase-copy h3{
  margin:16px 0 12px;
  color:var(--case-dark);
  font-size:clamp(30px,3.2vw,48px);
  line-height:1.04;
  letter-spacing:0;
}

.showcase-copy p{
  color:var(--case-muted);
  font-size:16px;
  line-height:1.75;
}

.digital-demo-stage{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(320px,.46fr);
  gap:18px;
  align-items:start;
}

.demo-card{
  border-radius:30px;
  border:1px solid var(--case-line);
  background:rgba(248,246,242,.84);
  box-shadow:0 28px 82px rgba(74,64,58,.09);
  overflow:hidden;
}

.demo-card .demo-copy{
  padding:clamp(22px,3vw,34px);
}

.demo-copy .mini{
  display:inline-flex;
  align-items:center;
  min-height:32px;
  padding:0 12px;
  border-radius:999px;
  background:color-mix(in srgb,var(--case-gold) 26%,transparent);
  color:var(--case-dark);
  font-size:12px;
  font-weight:900;
}

.demo-copy h3{
  margin:16px 0 12px;
  color:var(--case-dark);
  font-size:clamp(30px,3.4vw,50px);
  line-height:1.04;
  letter-spacing:0;
}

.demo-copy p{
  color:var(--case-muted);
  font-size:16px;
  line-height:1.75;
}

.digital-demo-stage.real-system{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:clamp(20px,3.2vw,38px);
}

.system-hero-demo,
.proof-card{
  border-radius:34px;
  border:1px solid rgba(74,64,58,.12);
  background:
    linear-gradient(135deg,rgba(248,246,242,.94),rgba(248,246,242,.78)),
    rgba(255,255,255,.54);
  box-shadow:0 28px 88px rgba(74,64,58,.10);
  overflow:hidden;
}

.system-hero-demo{
  display:grid;
  grid-template-columns:minmax(330px,.34fr) minmax(0,1fr);
  gap:clamp(18px,3vw,34px);
  align-items:center;
  padding:clamp(18px,3vw,30px);
}

.system-hero-demo .demo-copy,
.proof-card .demo-copy{
  padding:clamp(22px,3vw,38px);
}

.proof-card{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(320px,.38fr);
  align-items:center;
}

.proof-card:nth-child(odd){
  grid-template-columns:minmax(320px,.38fr) minmax(0,1fr);
}

.proof-card:nth-child(odd) .demo-copy{
  order:1;
}

.proof-card:nth-child(odd) figure{
  order:2;
}

.wide-proof-image,
.tall-proof-image,
.landing-proof-image{
  margin:0;
  overflow:hidden;
  background:#ebe3d8;
}

.wide-proof-image{
  border-radius:26px;
  box-shadow:0 24px 74px rgba(74,64,58,.13);
}

.system-hero-demo .wide-proof-image{
  border-radius:28px;
}

.proof-card > .wide-proof-image{
  border-radius:0;
  box-shadow:none;
  align-self:stretch;
}

.wide-proof-image img,
.tall-proof-image img,
.landing-proof-image img{
  display:block;
  width:100%;
  height:100%;
}

.wide-proof-image img{
  object-fit:cover;
}

.system-hero-demo .wide-proof-image img,
.proof-card > .wide-proof-image img{
  min-height:100%;
}

.tall-proof-image{
  align-self:stretch;
  min-height:680px;
}

.tall-proof-image img{
  object-fit:cover;
  object-position:center top;
}

.landing-proof-image{
  align-self:stretch;
  max-height:860px;
  background:#f2eee7;
}

.landing-proof-image img{
  object-fit:cover;
  object-position:center top;
}

.proof-instagram{
  grid-template-columns:minmax(0,.76fr) minmax(360px,.36fr);
}

.proof-posts .wide-proof-image img,
.proof-stories .wide-proof-image img,
.proof-ads .wide-proof-image img{
  aspect-ratio:3/2;
}

.proof-landing{
  grid-template-columns:minmax(320px,.34fr) minmax(0,1fr);
}

.proof-landing .landing-proof-image{
  order:2;
}

.proof-landing .demo-copy{
  order:1;
}

.instagram-demo,
.landing-demo,
.real-mockup-scene,
.carousel-demo{
  grid-column:1 / -1;
}

.real-mockup-scene{
  position:relative;
  min-height:clamp(650px,62vw,860px);
  border-radius:36px;
  overflow:hidden;
  background:#d7c8b6;
  border:1px solid rgba(255,255,255,.76);
  box-shadow:0 34px 96px rgba(74,64,58,.18);
  isolation:isolate;
  direction:ltr;
}

.real-scene-bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:-2;
}

.real-mockup-scene::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 26% 26%,rgba(255,255,255,.12),transparent 32%),
    linear-gradient(180deg,rgba(23,18,16,.02),rgba(23,18,16,.14));
  z-index:-1;
  pointer-events:none;
}

.scene-screen{
  position:absolute;
  margin:0;
  overflow:hidden;
  background:#fff;
  border:1px solid rgba(255,255,255,.86);
  box-shadow:0 28px 84px rgba(0,0,0,.28);
}

.scene-screen img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.scene-laptop{
  top:10%;
  right:4.8%;
  width:min(43%,540px);
  aspect-ratio:16/10;
  border-radius:15px;
  transform:perspective(950px) rotateX(1deg) rotateY(-8deg) rotateZ(2deg);
  transform-origin:center;
}

.scene-tablet{
  top:47%;
  left:39%;
  width:min(33%,410px);
  aspect-ratio:3/4.2;
  border-radius:24px;
  transform:perspective(900px) rotateX(54deg) rotateZ(-17deg);
  transform-origin:center;
}

.scene-phone{
  bottom:8.6%;
  right:8%;
  width:min(13.5%,178px);
  aspect-ratio:9/16;
  border-radius:24px;
  transform:perspective(800px) rotateX(55deg) rotateZ(7deg);
}

.scene-note{
  position:absolute;
  bottom:8%;
  left:5.8%;
  width:min(36%,430px);
  padding:24px;
  border-radius:24px;
  background:rgba(248,246,242,.78);
  border:1px solid rgba(255,255,255,.75);
  -webkit-backdrop-filter:blur(16px);
  backdrop-filter:blur(16px);
  box-shadow:0 24px 70px rgba(74,64,58,.16);
  direction:rtl;
}

.scene-note span{
  display:inline-flex;
  min-height:30px;
  align-items:center;
  padding:0 11px;
  border-radius:999px;
  background:color-mix(in srgb,var(--case-gold) 34%,transparent);
  color:var(--case-dark);
  font-size:11px;
  font-weight:900;
}

.scene-note b{
  display:block;
  margin-top:12px;
  color:var(--case-dark);
  font-size:clamp(24px,2.4vw,36px);
  line-height:1.08;
}

.instagram-demo{
  display:grid;
  grid-template-columns:minmax(0,.68fr) minmax(310px,.42fr);
  gap:clamp(18px,3vw,34px);
  align-items:center;
  padding:clamp(18px,3vw,30px);
  background:
    linear-gradient(135deg,rgba(248,246,242,.94),rgba(246,231,177,.34)),
    #fff;
}

.instagram-demo .demo-copy{
  padding:0 clamp(6px,2vw,16px);
}

.device-photo{
  margin:0;
  border-radius:38px;
  background:#111;
  padding:10px;
  box-shadow:0 32px 90px rgba(35,28,24,.26);
}

.device-photo img{
  width:100%;
  height:auto;
  display:block;
  border-radius:28px;
  background:#fff;
}

.phone-photo{
  width:min(100%,390px);
  margin-inline:auto;
}

.phone-frame{
  position:relative;
  width:min(100%,365px);
  margin-inline:auto;
  padding:20px 14px 16px;
  border-radius:38px;
  background:#fff;
  border:9px solid #191513;
  box-shadow:0 28px 78px rgba(36,29,24,.24);
  direction:rtl;
}

.phone-speaker{
  width:72px;
  height:5px;
  margin:0 auto 16px;
  border-radius:999px;
  background:#191513;
  opacity:.22;
}

.ig-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  min-height:32px;
  border-bottom:1px solid rgba(74,64,58,.12);
  color:#211b18;
  font-size:13px;
}

.ig-profile{
  display:grid;
  grid-template-columns:64px minmax(0,1fr);
  gap:12px;
  align-items:center;
  padding:14px 0 10px;
}

.ig-profile img{
  width:64px;
  height:64px;
  object-fit:cover;
  border-radius:50%;
  border:2px solid var(--case-cream);
}

.ig-profile b{
  color:var(--case-dark);
  font-size:16px;
  line-height:1.15;
}

.ig-profile p{
  margin-top:4px;
  color:var(--case-muted);
  font-size:12px;
  line-height:1.35;
}

.ig-stats{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:6px;
  padding-bottom:10px;
}

.ig-stats span,
.ig-actions span,
.ig-highlights span{
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  border-radius:999px;
  background:#F8F6F2;
  color:var(--case-muted);
  font-size:11px;
  min-height:31px;
  padding-inline:8px;
}

.ig-stats b{
  color:var(--case-dark);
  margin-inline-end:3px;
}

.ig-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:6px;
  margin-bottom:10px;
}

.ig-actions span{
  background:#4A403A;
  color:#fff;
  font-weight:800;
}

.ig-highlights{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:6px;
  margin-bottom:12px;
}

.ig-highlights span{
  border-radius:12px;
  background:var(--case-cream);
  color:var(--case-dark);
  font-weight:800;
}

.ig-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:4px;
}

.ig-grid img,
.feed-tile{
  width:100%;
  aspect-ratio:1;
  border-radius:9px;
  overflow:hidden;
}

.ig-grid img{
  object-fit:cover;
}

.feed-tile{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:8px;
  text-align:center;
  color:var(--case-dark);
  background:#F8F6F2;
  font-size:12px;
  font-weight:900;
  line-height:1.12;
}

.feed-tile.dark{
  background:#4A403A;
  color:#fff;
}

.feed-tile.soft{
  background:var(--case-cream);
}

.feed-tile.gold{
  background:var(--case-gold);
}

.landing-demo{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(280px,.38fr);
  gap:clamp(20px,4vw,44px);
  align-items:center;
  padding:clamp(18px,3vw,30px);
  background:
    linear-gradient(135deg,color-mix(in srgb,var(--case-dark) 8%,transparent),color-mix(in srgb,var(--case-gold) 16%,transparent)),
    rgba(248,246,242,.92);
}

.browser-photo{
  margin:0;
  border-radius:26px;
  overflow:hidden;
  background:#fff;
  border:1px solid rgba(74,64,58,.12);
  box-shadow:0 28px 84px rgba(74,64,58,.15);
}

.browser-photo img{
  width:100%;
  height:auto;
  display:block;
}

.browser-frame{
  border-radius:24px;
  overflow:hidden;
  background:#fff;
  border:1px solid rgba(74,64,58,.12);
  box-shadow:0 26px 76px rgba(74,64,58,.14);
}

.browser-bar{
  display:flex;
  align-items:center;
  gap:7px;
  min-height:42px;
  padding-inline:14px;
  background:#F8F6F2;
  border-bottom:1px solid rgba(74,64,58,.1);
  color:rgba(74,64,58,.58);
  font-size:12px;
}

.browser-bar span{
  width:9px;
  height:9px;
  border-radius:50%;
  background:#D8C9B8;
}

.browser-bar b{
  margin-inline-start:8px;
  font-weight:700;
}

.landing-preview{
  display:grid;
  grid-template-columns:minmax(0,.95fr) minmax(220px,.7fr);
  gap:22px;
  align-items:center;
  padding:26px;
}

.landing-copy span,
.ad-preview span{
  display:inline-flex;
  min-height:28px;
  align-items:center;
  padding:0 10px;
  border-radius:999px;
  background:color-mix(in srgb,var(--case-gold) 34%,transparent);
  color:var(--case-dark);
  font-size:11px;
  font-weight:900;
}

.landing-copy h3{
  margin:14px 0 10px;
  color:var(--case-dark);
  font-size:clamp(30px,3.2vw,52px);
  line-height:1.02;
}

.landing-copy p{
  color:var(--case-muted);
  font-size:15px;
  line-height:1.65;
}

.landing-buttons{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:20px;
}

.landing-buttons b,
.landing-buttons i{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:40px;
  padding:0 15px;
  border-radius:999px;
  font-size:12px;
  font-style:normal;
  font-weight:900;
}

.landing-buttons b{
  background:#4A403A;
  color:#fff;
}

.landing-buttons i{
  background:#F8F6F2;
  color:#4A403A;
}

.landing-preview figure{
  border-radius:22px;
  overflow:hidden;
  aspect-ratio:4/5;
  background:#efe6d8;
}

.landing-preview img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.landing-modules{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1px;
  border-top:1px solid rgba(74,64,58,.1);
  background:rgba(74,64,58,.1);
}

.landing-modules span{
  min-height:58px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#fff;
  color:var(--case-dark);
  font-size:13px;
  font-weight:900;
}

.landing-demo .demo-copy{
  padding:0;
}

.ads-demo,
.story-demo{
  min-height:720px;
}

.ads-demo{
  background:#fff;
}

.ad-board{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  padding:0 22px 24px;
}

.asset-frame{
  margin:0;
  border-radius:24px;
  overflow:hidden;
  background:#fff;
  border:1px solid rgba(74,64,58,.1);
  box-shadow:0 22px 68px rgba(74,64,58,.13);
}

.asset-frame img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.ad-preview{
  display:grid;
  grid-template-columns:118px minmax(0,1fr);
  gap:14px;
  padding:12px;
  border-radius:20px;
  background:#F8F6F2;
  border:1px solid rgba(74,64,58,.1);
}

.ad-preview img{
  width:100%;
  aspect-ratio:1;
  object-fit:cover;
  border-radius:16px;
}

.ad-preview b{
  display:block;
  margin-top:9px;
  color:var(--case-dark);
  font-size:20px;
  line-height:1.08;
}

.ad-preview p{
  margin-top:6px;
  color:var(--case-muted);
  font-size:13px;
  line-height:1.45;
}

.ad-preview i{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:32px;
  margin-top:10px;
  padding:0 12px;
  border-radius:999px;
  background:#4A403A;
  color:#fff;
  font-style:normal;
  font-size:11px;
  font-weight:900;
}

.compact-ad{
  grid-template-columns:1fr;
  background:#4A403A;
}

.compact-ad span{
  background:rgba(255,255,255,.12);
  color:#fff;
}

.compact-ad b,
.compact-ad p{
  color:#fff;
}

.compact-ad p{
  opacity:.78;
}

.compact-ad i{
  background:#fff;
  color:#4A403A;
}

.story-demo{
  display:grid;
  align-content:start;
  background:
    linear-gradient(180deg,rgba(248,246,242,.95),rgba(246,231,177,.25)),
    #fff;
}

.story-set{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
  padding:22px 22px 0;
}

.story-device{
  margin:0;
  border-radius:26px;
  overflow:hidden;
  background:#111;
  padding:7px;
  box-shadow:0 22px 68px rgba(74,64,58,.16);
}

.story-device img{
  width:100%;
  height:auto;
  display:block;
  border-radius:20px;
}

.story-preview{
  position:relative;
  display:grid;
  align-content:end;
  min-height:380px;
  margin:0;
  padding:16px;
  border-radius:24px;
  overflow:hidden;
  color:#fff;
  background:#4A403A;
  box-shadow:0 20px 58px rgba(74,64,58,.16);
  isolation:isolate;
}

.story-preview::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:linear-gradient(180deg,rgba(33,25,21,.08),rgba(33,25,21,.72)),var(--story-bg);
  background-size:cover;
  background-position:center;
  z-index:-2;
}

.story-preview.light::before{
  background-image:linear-gradient(180deg,rgba(248,246,242,.25),rgba(74,64,58,.58)),var(--story-bg);
}

.story-preview.dark::before{
  background-image:linear-gradient(180deg,rgba(33,25,21,.14),rgba(33,25,21,.8)),var(--story-bg);
}

.story-bars{
  position:absolute;
  inset-block-start:12px;
  inset-inline:12px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:4px;
}

.story-bars span{
  height:3px;
  border-radius:999px;
  background:rgba(255,255,255,.78);
}

.story-preview small{
  display:inline-flex;
  width:max-content;
  max-width:100%;
  min-height:28px;
  align-items:center;
  padding:0 10px;
  border-radius:999px;
  background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.24);
  font-size:11px;
  font-weight:900;
  margin-bottom:10px;
}

.story-preview b{
  font-size:clamp(23px,2.3vw,30px);
  line-height:1.02;
  color:#fff;
}

.story-preview i{
  margin-top:12px;
  color:rgba(255,255,255,.82);
  font-style:normal;
  font-size:12px;
  line-height:1.4;
}

.carousel-demo{
  display:grid;
  grid-template-columns:minmax(270px,.36fr) minmax(0,1fr);
  gap:clamp(18px,3vw,38px);
  align-items:center;
  padding:clamp(18px,3vw,30px);
  background:
    linear-gradient(135deg,color-mix(in srgb,var(--case-dark) 8%,transparent),color-mix(in srgb,var(--case-gold) 16%,transparent)),
    rgba(248,246,242,.9);
}

.carousel-demo .demo-copy{
  padding:0;
}

.carousel-spread{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
}

.carousel-card{
  display:grid;
  align-content:space-between;
  min-height:260px;
  padding:20px;
  border-radius:24px;
  border:1px solid rgba(74,64,58,.12);
  box-shadow:0 22px 64px rgba(74,64,58,.1);
}

.carousel-card span{
  width:44px;
  height:44px;
  border-radius:50%;
  background:rgba(255,255,255,.42);
  border:1px solid rgba(255,255,255,.5);
}

.carousel-card b{
  color:var(--case-dark);
  font-size:clamp(24px,2.4vw,34px);
  line-height:1.04;
}

.carousel-card p{
  color:var(--case-muted);
  font-size:13px;
  line-height:1.5;
}

.carousel-card div{
  display:flex;
  justify-content:center;
  gap:5px;
}

.carousel-card i{
  width:7px;
  height:7px;
  border-radius:50%;
  background:rgba(74,64,58,.24);
}

.carousel-card.c1{
  background:#4A403A;
}

.carousel-card.c1 b,
.carousel-card.c1 p{
  color:#fff;
}

.carousel-card.c1 p{
  opacity:.78;
}

.carousel-card.c1 i{
  background:rgba(255,255,255,.42);
}

.carousel-card.c2{
  background:var(--case-cream);
}

.carousel-card.c3{
  background:#fff;
}

.carousel-card.c4{
  background:var(--case-gold);
}

.content-lab{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
}

.content-card{
  min-height:300px;
  padding:24px;
  border-radius:24px;
  border:1px solid var(--case-line);
  background:rgba(255,255,255,.58);
  box-shadow:0 20px 64px rgba(74,64,58,.06);
}

.content-card.large{
  grid-column:span 2;
  grid-row:span 2;
  min-height:440px;
  background:
    linear-gradient(160deg,rgba(74,64,58,.92),rgba(12,63,81,.92)),
    var(--case-dark);
  color:#fff;
}

.content-card span{
  display:inline-flex;
  align-items:center;
  min-height:32px;
  padding:0 12px;
  border-radius:999px;
  background:color-mix(in srgb,var(--case-gold) 22%,transparent);
  color:var(--case-dark);
  font-size:12px;
  font-weight:900;
}

.content-card.large span{
  background:rgba(255,255,255,.14);
  color:#fff;
  border:1px solid rgba(255,255,255,.18);
}

.content-card h3{
  margin:18px 0 12px;
  color:var(--case-dark);
  font-size:clamp(24px,2.4vw,36px);
  line-height:1.1;
  letter-spacing:0;
}

.content-card.large h3{
  color:#fff;
  font-size:clamp(34px,4vw,58px);
}

.content-card p{
  color:var(--case-muted);
  font-size:15px;
  line-height:1.7;
}

.content-card.large p{
  color:rgba(255,255,255,.78);
  font-size:17px;
  line-height:1.75;
}

.content-card ul{
  display:grid;
  gap:10px;
  margin:24px 0 0;
  padding:0;
  list-style:none;
}

.content-card li{
  position:relative;
  padding-inline-start:18px;
  color:rgba(255,255,255,.78);
  font-size:15px;
  line-height:1.6;
}

.content-card li::before{
  content:"";
  position:absolute;
  inset-inline-start:0;
  top:.72em;
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--case-gold);
}

.supporting-proof-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(300px,.42fr);
  gap:18px;
  align-items:stretch;
}

.supporting-proof{
  display:grid;
  grid-template-rows:auto 1fr;
  overflow:hidden;
  border-radius:30px;
  border:1px solid rgba(74,64,58,.12);
  background:rgba(248,246,242,.86);
  box-shadow:0 26px 78px rgba(74,64,58,.09);
}

.supporting-proof.large{
  grid-template-columns:minmax(0,1fr);
}

.supporting-proof figure{
  margin:0;
  overflow:hidden;
  background:#ece3d9;
}

.supporting-proof img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}

.supporting-proof.large figure{
  aspect-ratio:16/8.4;
}

.supporting-proof:not(.large) figure{
  aspect-ratio:1/1.28;
}

.supporting-proof div{
  padding:clamp(22px,3vw,34px);
}

.supporting-proof span{
  display:inline-flex;
  align-items:center;
  min-height:32px;
  padding:0 12px;
  border-radius:999px;
  background:color-mix(in srgb,var(--case-gold) 26%,transparent);
  color:var(--case-dark);
  font-size:12px;
  font-weight:900;
}

.supporting-proof h3{
  margin:16px 0 10px;
  color:var(--case-dark);
  font-size:clamp(26px,2.6vw,42px);
  line-height:1.08;
}

.supporting-proof p{
  color:var(--case-muted);
  font-size:15.5px;
  line-height:1.75;
}

.lead-panel{
  display:grid;
  grid-template-columns:minmax(300px,.58fr) minmax(0,1fr);
  gap:clamp(22px,4vw,50px);
  align-items:stretch;
  padding:clamp(28px,5vw,56px);
  border-radius:34px;
  background:
    linear-gradient(135deg,rgba(248,246,242,.94),rgba(246,231,177,.24)),
    #fff;
  border:1px solid var(--case-line);
  box-shadow:0 30px 88px rgba(74,64,58,.09);
}

.lead-copy{
  align-self:center;
}

.lead-copy h2{
  font-size:clamp(38px,4.9vw,72px);
}

.lead-copy p{
  margin-top:18px;
  color:var(--case-muted);
  font-size:17px;
  line-height:1.8;
}

.lead-steps{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}

.lead-steps article{
  min-height:230px;
  padding:24px;
  border-radius:24px;
  border:1px solid var(--case-line);
  background:rgba(248,246,242,.72);
}

.lead-steps span{
  display:block;
  color:var(--case-taupe);
  font-size:12px;
  font-weight:900;
  margin-bottom:34px;
}

.lead-steps b{
  display:block;
  color:var(--case-dark);
  font-size:23px;
  line-height:1.15;
  margin-bottom:10px;
}

.lead-steps p{
  color:var(--case-muted);
  font-size:15px;
  line-height:1.68;
}

.mockup-scene{
  position:relative;
  min-height:clamp(520px,58vw,740px);
  border-radius:34px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.74);
  box-shadow:0 30px 90px rgba(74,64,58,.16);
  background:#1d1714;
}

.mockup-scene img{
  width:100%;
  height:100%;
  min-height:inherit;
  object-fit:cover;
  opacity:.92;
}

.floating-ui{
  position:absolute;
  border-radius:22px;
  overflow:hidden;
  background:rgba(248,246,242,.88);
  border:1px solid rgba(255,255,255,.84);
  box-shadow:0 24px 72px rgba(30,23,17,.22);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
}

.floating-ui img{
  width:100%;
  height:100%;
  min-height:0;
  object-fit:cover;
  opacity:1;
}

.floating-ui.feed{
  inset-block-start:8%;
  inset-inline-start:7%;
  width:min(36%,410px);
  aspect-ratio:1/1.22;
}

.floating-ui.story{
  inset-block-end:7%;
  inset-inline-end:8%;
  width:min(25%,270px);
  aspect-ratio:9/16;
}

.floating-ui.caption{
  inset-block-end:12%;
  inset-inline-start:9%;
  width:min(39%,430px);
  padding:22px;
  color:var(--case-dark);
}

.floating-ui.caption strong{
  display:block;
  font-size:24px;
  line-height:1.1;
  margin-bottom:8px;
}

.floating-ui.caption span{
  color:var(--case-muted);
  font-size:14px;
  line-height:1.55;
}

.package-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
}

.package-col{
  min-height:330px;
  padding:24px;
  border-radius:24px;
  background:rgba(248,246,242,.82);
  border:1px solid var(--case-line);
}

.package-col h3{
  color:var(--case-dark);
  font-size:25px;
  margin-bottom:18px;
}

.package-col ul{
  display:grid;
  gap:11px;
  padding:0;
  margin:0;
  list-style:none;
}

.package-col li{
  color:var(--case-muted);
  font-size:15px;
  line-height:1.45;
  padding-inline-start:18px;
  position:relative;
}

.package-col li::before{
  content:"";
  position:absolute;
  inset-inline-start:0;
  top:.7em;
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--case-gold);
}

.adapt-panel{
  display:grid;
  grid-template-columns:minmax(0,.72fr) minmax(0,1fr);
  gap:clamp(22px,4vw,48px);
  align-items:start;
  padding:clamp(28px,5vw,58px);
  border-radius:34px;
  background:rgba(248,246,242,.86);
  border:1px solid var(--case-line);
  box-shadow:0 26px 76px rgba(74,64,58,.08);
}

.adapt-panel p{
  margin-top:16px;
  color:var(--case-muted);
  font-size:17px;
  line-height:1.8;
}

.adapt-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}

.adapt-grid article{
  min-height:170px;
  padding:22px;
  border-radius:22px;
  border:1px solid var(--case-line);
  background:#fff;
}

.adapt-grid b{
  display:block;
  color:var(--case-dark);
  font-size:21px;
  line-height:1.15;
  margin-bottom:10px;
}

.adapt-grid p{
  margin:0;
  color:var(--case-muted);
  font-size:14.5px;
  line-height:1.62;
}

.final-panel{
  display:grid;
  grid-template-columns:minmax(0,.84fr) minmax(320px,.5fr);
  gap:clamp(24px,4vw,52px);
  align-items:center;
  padding:clamp(28px,5vw,64px);
  border-radius:34px;
  background:linear-gradient(135deg,var(--case-dark),color-mix(in srgb,var(--case-dark) 78%,#14323b 22%));
  color:#fff;
  box-shadow:0 34px 90px color-mix(in srgb,var(--case-dark) 28%,transparent);
}

.final-panel h2{
  color:#fff;
  font-size:clamp(38px,5vw,76px);
}

.final-panel p{
  max-width:62ch;
  color:rgba(255,255,255,.76);
  font-size:17px;
  line-height:1.75;
  margin-top:16px;
}

.final-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:24px;
}

.case-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:52px;
  padding:0 24px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.38);
  font-weight:900;
  background:rgba(255,255,255,.14);
  color:#fff;
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
}

.case-btn.primary{
  background:#fff;
  color:var(--case-dark);
}

.next-cases{
  display:grid;
  gap:12px;
  padding:24px;
  border-radius:24px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.16);
}

.next-cases b{
  display:block;
  font-size:20px;
  margin-bottom:2px;
}

.next-cases a{
  display:grid;
  grid-template-columns:92px minmax(0,1fr);
  gap:12px;
  align-items:center;
  min-height:86px;
  padding:8px;
  border-radius:18px;
  color:#fff;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
  transition:transform .22s ease,background .22s ease,border-color .22s ease;
}

.next-cases a:hover{
  transform:translateY(-2px);
  background:rgba(255,255,255,.13);
  border-color:rgba(255,255,255,.24);
}

.next-cases img{
  display:block;
  width:100%;
  aspect-ratio:4/3;
  height:auto;
  object-fit:cover;
  border-radius:13px;
}

.next-cases span,
.next-cases small,
.next-cases strong{
  display:block;
}

.next-cases span{
  color:rgba(255,255,255,.7);
  font-size:14px;
  line-height:1.55;
}

.next-cases strong{
  color:#fff;
  font-size:15px;
  letter-spacing:0;
  margin-bottom:2px;
}

.next-cases small{
  color:rgba(255,255,255,.66);
  font-size:12px;
  line-height:1.35;
}

.case-foot{
  padding:30px 0 42px;
  color:var(--case-muted);
  text-align:center;
  font-size:14px;
  direction:rtl;
}

@media(max-width:1080px){
  .case-hero-grid,
  .section-lede,
  .brand-core,
  .creative-board,
  .digital-demo-stage,
  .system-hero-demo,
  .proof-card,
  .proof-card:nth-child(odd),
  .proof-instagram,
  .proof-landing,
  .supporting-proof-grid,
  .instagram-demo,
  .landing-demo,
  .carousel-demo,
  .lead-panel,
  .adapt-panel,
  .final-panel{
    grid-template-columns:1fr;
  }

  .deliverables{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }

  .package-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .content-lab{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .instagram-demo,
  .landing-demo,
  .carousel-demo{
    grid-column:auto;
  }

  .landing-demo .demo-copy,
  .carousel-demo .demo-copy{
    order:-1;
  }

  .proof-card:nth-child(odd) .demo-copy,
  .proof-card:nth-child(odd) figure,
  .proof-landing .landing-proof-image,
  .proof-landing .demo-copy{
    order:initial;
  }

  .proof-card .demo-copy{
    order:-1;
  }

  .tall-proof-image,
  .landing-proof-image{
    min-height:auto;
    max-height:none;
  }

  .tall-proof-image img,
  .landing-proof-image img{
    height:auto;
    object-fit:contain;
  }

  .showcase-row,
  .showcase-row.flip{
    grid-template-columns:1fr;
  }

  .showcase-row.flip .showcase-visual,
  .showcase-row.flip .showcase-copy{
    order:initial;
  }
}

@media(max-width:760px){
  .case-system .nav{
    width:auto;
    left:10px;
    right:10px;
    margin-inline:0;
    top:10px;
    padding:9px 10px;
    direction:ltr;
  }

  .case-system .brand{
    display:none;
  }

  .case-system .nav::after{
    content:"Studio Asaf";
    position:absolute;
    left:50%;
    transform:translateX(-50%);
    color:var(--teal);
    font-weight:900;
    font-size:14px;
    white-space:nowrap;
    pointer-events:none;
  }

  html[data-theme="dark"] .case-system .nav::after{
    color:var(--case-ink);
  }

  .case-system .nav-cta .btn-primary{
    display:none;
  }

  .case-system .nav-links:not(.open){
    visibility:hidden;
  }

  .case-system .nav-links.open{
    visibility:visible;
  }

  .case-system .nav-ico{
    width:38px;
    height:38px;
  }

  .case-wrap{
    width:min(100% - 28px,var(--case-max));
  }

  .project-cover-section{
    padding-block:24px 42px;
  }

  .project-cover-board{
    border-radius:24px;
  }

  .case-hero{
    min-height:86svh;
    padding-top:110px;
    align-items:end;
    overflow:hidden;
    max-width:100vw;
    direction:ltr;
  }

  .case-hero .case-wrap{
    width:100vw;
    max-width:100vw;
    margin:0;
    padding-inline:14px;
  }

  .case-hero-grid{
    direction:ltr;
  }

  .case-back,
  .case-kicker,
  .case-subtitle{
    direction:rtl;
    text-align:center;
    max-width:calc(100vw - 28px);
    margin-inline:auto;
  }

  .case-hero-card{
    display:none;
  }

  .case-back,
  .case-kicker{
    display:none;
  }

  .case-title{
    max-width:100%;
    font-size:clamp(42px,13vw,58px);
    line-height:.96;
    word-break:normal;
    overflow-wrap:normal;
    text-align:center;
    margin-inline:auto;
  }

  .case-subtitle{
    font-size:17px;
    line-height:1.55;
    max-width:100%;
  }

  .case-tags{
    display:grid;
    grid-template-columns:1fr;
    gap:8px;
    width:min(100%,260px);
    margin-inline:auto;
  }

  .case-tag{
    min-height:34px;
    padding-inline:12px;
    font-size:12px;
    justify-content:center;
    text-align:center;
    white-space:normal;
  }

  .truth-band,
  .deliverables,
  .creative-points,
  .content-lab,
  .landing-preview,
  .carousel-spread,
  .lead-steps,
  .palette,
  .system-note-grid,
  .adapt-grid,
  .package-grid,
  .supporting-proof-grid{
    grid-template-columns:1fr;
  }

  .case-section,
  .section-lede,
  .section-lede p,
  .creative-main,
  .creative-points article,
  .demo-card .demo-copy,
  .system-hero-demo .demo-copy,
  .proof-card .demo-copy,
  .supporting-proof div,
  .landing-copy,
  .content-card,
  .lead-copy,
  .lead-steps article,
  .adapt-panel,
  .adapt-grid article,
  .final-panel{
    text-align:center;
  }

  .section-lede{
    justify-items:center;
  }

  .truth-item,
  .deliverable,
  .creative-points article,
  .content-card,
  .lead-steps article,
  .adapt-grid article,
  .package-col{
    min-height:auto;
  }

  .creative-main,
  .system-hero-demo,
  .proof-card,
  .instagram-demo,
  .landing-demo,
  .carousel-demo,
  .lead-panel,
  .adapt-panel{
    padding:24px;
    border-radius:26px;
  }

  .system-hero-demo,
  .proof-card,
  .supporting-proof{
    border-radius:24px;
  }

  .wide-proof-image,
  .system-hero-demo .wide-proof-image{
    border-radius:20px;
  }

  .proof-card > .wide-proof-image{
    border-radius:0 0 20px 20px;
  }

  .proof-posts .wide-proof-image img,
  .proof-stories .wide-proof-image img,
  .proof-ads .wide-proof-image img{
    aspect-ratio:auto;
  }

  .supporting-proof.large figure,
  .supporting-proof:not(.large) figure{
    aspect-ratio:auto;
  }

  .real-mockup-scene{
    min-height:760px;
    border-radius:26px;
  }

  .real-scene-bg{
    object-position:center;
  }

  .scene-note{
    inset-block-start:18px;
    inset-block-end:auto;
    inset-inline:18px;
    width:auto;
    text-align:center;
    padding:18px;
  }

  .scene-laptop{
    inset-block-start:30%;
    inset-inline:8%;
    width:auto;
    transform:none;
    border-radius:16px;
  }

  .scene-tablet{
    inset-block-start:55%;
    inset-inline-start:auto;
    inset-inline-end:8%;
    width:52%;
    transform:rotate(-8deg);
    border-radius:18px;
  }

  .scene-phone{
    inset-block-end:7%;
    inset-inline-end:auto;
    inset-inline-start:9%;
    width:29%;
    transform:rotate(7deg);
    border-radius:18px;
  }

  .phone-frame{
    width:min(100%,340px);
  }

  .ig-grid,
  .landing-preview,
  .landing-modules,
  .ad-preview,
  .carousel-spread{
    direction:rtl;
  }

  .landing-preview{
    gap:16px;
    padding:18px;
  }

  .landing-preview figure{
    aspect-ratio:16/11;
  }

  .ad-board{
    grid-template-columns:1fr;
    padding-inline:16px;
  }

  .ad-preview{
    grid-template-columns:92px minmax(0,1fr);
    text-align:right;
  }

  .story-set{
    grid-template-columns:1fr;
    padding:16px 16px 0;
  }

  .story-preview{
    min-height:420px;
  }

  .carousel-card{
    min-height:220px;
  }

  .content-card.large{
    grid-column:auto;
    grid-row:auto;
    min-height:auto;
  }

  .content-card li{
    padding-inline-start:0;
  }

  .content-card li::before{
    position:static;
    display:block;
    margin:0 auto 6px;
  }

  .brand-logo-panel{
    min-height:420px;
  }

  .next-cases{
    padding:18px;
  }

  .final-actions{
    justify-content:center;
  }

  .next-cases b{
    text-align:center;
  }

  .next-cases a{
    grid-template-columns:82px minmax(0,1fr);
    text-align:start;
  }

  .mockup-scene{
    min-height:620px;
  }

  .floating-ui.feed{
    inset-block-start:6%;
    inset-inline:7% auto;
    width:72%;
  }

  .floating-ui.story{
    inset-block-end:7%;
    inset-inline-end:8%;
    width:42%;
  }

  .floating-ui.caption{
    inset-block-end:auto;
    inset-block-start:49%;
    inset-inline-start:7%;
    width:76%;
  }
}

html[lang="en"] .case-section,
html[lang="en"] .case-foot{
  direction:ltr;
  text-align:left;
}

html[lang="en"] .section-lede,
html[lang="en"] .truth-item,
html[lang="en"] .creative-main,
html[lang="en"] .creative-points article,
html[lang="en"] .deliverable,
html[lang="en"] .system-note,
html[lang="en"] .demo-copy,
html[lang="en"] .content-card,
html[lang="en"] .lead-copy,
html[lang="en"] .lead-steps article,
html[lang="en"] .supporting-proof,
html[lang="en"] .package-col,
html[lang="en"] .adapt-grid article,
html[lang="en"] .final-panel,
html[lang="en"] .next-cases{
  direction:ltr;
  text-align:left;
}

html[lang="en"] .case-back svg{
  transform:rotate(180deg);
}

html[lang="en"] .content-card li{
  padding-inline-start:26px;
}

html[lang="en"] .content-card li::before,
html[lang="en"] .package-col li::before{
  inset-inline-start:0;
  inset-inline-end:auto;
}

html[lang="en"] .next-cases a{
  direction:ltr;
  text-align:left;
}

@media (max-width:640px){
  html[lang="en"] .case-section,
  html[lang="en"] .section-lede,
  html[lang="en"] .truth-item,
  html[lang="en"] .creative-main,
  html[lang="en"] .creative-points article,
  html[lang="en"] .deliverable,
  html[lang="en"] .demo-copy,
  html[lang="en"] .content-card,
  html[lang="en"] .lead-steps article,
  html[lang="en"] .supporting-proof,
  html[lang="en"] .next-cases{
    text-align:left;
  }
}

@media(max-width:760px){
  html[lang="he"] .case-hero,
  html[lang="he"] .case-hero-grid{
    direction:ltr;
  }

  html[lang="he"] .case-title{
    text-align:center;
  }

  html[lang="he"] .case-section,
  html[lang="he"] .section-lede,
  html[lang="he"] .section-lede p,
  html[lang="he"] .creative-main,
  html[lang="he"] .creative-points article,
  html[lang="he"] .demo-card .demo-copy,
  html[lang="he"] .system-hero-demo .demo-copy,
  html[lang="he"] .proof-card .demo-copy,
  html[lang="he"] .supporting-proof div,
  html[lang="he"] .landing-copy,
  html[lang="he"] .content-card,
  html[lang="he"] .lead-copy,
  html[lang="he"] .lead-steps article,
  html[lang="he"] .adapt-panel,
  html[lang="he"] .adapt-grid article,
  html[lang="he"] .final-panel,
  html[lang="he"] .truth-item,
  html[lang="he"] .deliverable,
  html[lang="he"] .package-col,
  html[lang="he"] .showcase-copy,
  html[lang="he"] .next-cases{
    direction:rtl;
    text-align:start;
  }

  html[lang="he"] .section-lede{
    justify-items:stretch;
  }

  html[lang="he"] .section-label,
  html[lang="he"] .demo-copy .mini,
  html[lang="he"] .showcase-copy .mini{
    align-self:flex-start;
    margin-inline-end:0;
  }

  html[lang="he"] .case-section h2{
    text-align:start;
    text-wrap:balance;
  }

  html[lang="he"] .final-actions{
    justify-content:flex-start;
  }

  html[lang="he"] .next-cases b{
    text-align:start;
  }

  html[lang="he"] .content-card li{
    padding-inline-start:26px;
  }

  html[lang="he"] .content-card li::before{
    position:absolute;
    inset-inline-start:0;
    margin:0;
  }

  html[lang="he"] .scene-note,
  html[lang="he"] .ad-preview{
    text-align:start;
  }
}