:root {
  --prisma-primary: #DEDBC8;
  --prisma-text: #E1E0CC;
  --prisma-card: #212121;
  --prisma-about: #101010;
}

* { box-sizing: border-box; }
html { background:#000; scroll-behavior:smooth; }
body {
  margin:0;
  min-width:320px;
  background:#000;
  color:var(--prisma-text);
  font-family:'Almarai',-apple-system,BlinkMacSystemFont,'Segoe UI','Roboto','Oxygen','Ubuntu','Cantarell',sans-serif;
  overflow-x:hidden;
}
a { color:inherit; text-decoration:none; }
button,a { -webkit-tap-highlight-color:transparent; }
img,video { display:block; max-width:100%; }
::selection { background:var(--prisma-primary); color:#000; }

.prisma-site { min-height:100vh; overflow-x:hidden; background:#000; }

.noise-overlay,
.bg-noise { position:absolute; inset:0; pointer-events:none; background-repeat:repeat; background-size:180px 180px; }
.noise-overlay {
  opacity:.7;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='1'/%3E%3C/svg%3E");
}
.bg-noise {
  opacity:.15;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='1'/%3E%3C/svg%3E");
}

/* Hero */
.hero { height:100vh; min-height:620px; background:#000; padding:16px; }
.hero__frame { position:relative; height:100%; overflow:hidden; border-radius:16px; }
.hero__video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hero__gradient { position:absolute; inset:0; pointer-events:none; background:linear-gradient(to bottom,rgba(0,0,0,.3),transparent 48%,rgba(0,0,0,.6)); }
.hero__nav {
  position:absolute; z-index:20; left:50%; top:0; transform:translateX(-50%);
  display:flex; align-items:center; gap:12px; white-space:nowrap;
  padding:8px 16px; background:#000; border-radius:0 0 16px 16px;
}
.hero__nav a { font-size:10px; color:rgba(225,224,204,.8); transition:color .2s ease; }
.hero__nav a:hover { color:var(--prisma-text); }
.hero__menu,.hero__nav-fallback { display:flex; align-items:center; gap:12px; list-style:none; margin:0; padding:0; }
.hero__menu li { margin:0; padding:0; }
.hero__content { position:absolute; z-index:10; left:0; right:0; bottom:0; padding:0 16px 20px; }
.hero__grid { display:grid; grid-template-columns:1fr; align-items:end; gap:20px; }
.hero__title-wrap { min-width:0; }
.hero__title {
  margin:0; color:var(--prisma-text); font-weight:500; line-height:.85; letter-spacing:-.07em;
  font-size:26vw; overflow:visible; white-space:nowrap;
}
.hero__side { display:flex; flex-direction:column; align-items:flex-start; gap:20px; }
.hero__description { max-width:448px; margin:0; font-size:12px; line-height:1.2; color:rgba(222,219,200,.7); }
.prisma-cta {
  display:inline-flex; align-items:center; gap:8px; border-radius:999px; background:var(--prisma-primary);
  color:#000; padding:4px 4px 4px 20px; font-size:14px; font-weight:500; transition:gap .25s ease;
}
.prisma-cta:hover { gap:12px; }
.prisma-cta__circle { width:36px; height:36px; border-radius:50%; background:#000; color:var(--prisma-primary); display:grid; place-items:center; transition:transform .3s ease; }
.prisma-cta:hover .prisma-cta__circle { transform:scale(1.1); }

/* Pull-up animation */
.word-clip { display:inline-block; overflow:hidden; padding-right:.22em; vertical-align:bottom; }
.hero__title .word-clip { overflow:visible; padding-right:.18em; }
.word-clip:last-child { padding-right:0; }
.word-rise { position:relative; display:inline-block; transform:translateY(20px); opacity:0; transition:transform .72s cubic-bezier(.16,1,.3,1) var(--word-delay),opacity .72s cubic-bezier(.16,1,.3,1) var(--word-delay); }
.word-rise--serif { font-family:'Instrument Serif',serif; font-style:italic; }
.is-visible .word-rise { transform:translateY(0); opacity:1; }
.hero__title sup { position:absolute; top:.65em; right:-.3em; font-size:.31em; line-height:1; }
.js-fade-up { transform:translateY(20px); opacity:0; transition:transform .8s cubic-bezier(.16,1,.3,1),opacity .8s cubic-bezier(.16,1,.3,1); }
.js-fade-up.is-visible { transform:translateY(0); opacity:1; }

/* About */
.about { background:#000; padding:64px 16px; }
.about__card { max-width:1152px; margin:0 auto; padding:64px 20px; border-radius:29px; background:var(--prisma-about); text-align:center; }
.about__label { margin:0 0 32px; font-size:10px; color:var(--prisma-primary); }
.about__heading { display:inline-flex; flex-wrap:wrap; justify-content:center; max-width:768px; margin:0 auto; font-size:30px; line-height:.95; color:var(--prisma-text); }
.about__body { max-width:672px; margin:48px auto 0; font-size:12px; line-height:1.7; color:var(--prisma-primary); }
.char-reveal { opacity:.2; }

/* Features */
.features { position:relative; min-height:100vh; overflow:hidden; background:#000; padding:64px 16px; }
.features__inner { position:relative; z-index:1; max-width:1600px; margin:0 auto; }
.features__header { max-width:896px; margin:0 0 40px; }
.features__title,.features__subtitle { display:flex; flex-wrap:wrap; justify-content:flex-start; font-size:20px; line-height:1.25; font-weight:400; }
.features__title { color:var(--prisma-text); }
.features__subtitle { color:#6b7280; margin-top:4px; }
.features__grid { display:grid; grid-template-columns:1fr; gap:12px; }
.feature { position:relative; min-height:380px; border-radius:26px; overflow:hidden; }
.js-feature-card { opacity:0; transform:scale(.95); transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1); }
.js-feature-card.is-visible { opacity:1; transform:scale(1); }
.feature--video video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.feature--video__gradient { position:absolute; inset:0; background:linear-gradient(to top,rgba(0,0,0,.65),transparent 56%,rgba(0,0,0,.1)); }
.feature--video p { position:absolute; left:20px; right:20px; bottom:20px; margin:0; font-size:18px; color:var(--prisma-text); }
.feature--info { display:flex; flex-direction:column; justify-content:space-between; background:var(--prisma-card); padding:20px; }
.feature--info > img { width:40px; height:40px; border-radius:8px; object-fit:cover; }
.feature__content { margin-top:48px; }
.feature__heading-row { display:flex; justify-content:space-between; align-items:baseline; gap:16px; margin-bottom:28px; }
.feature__heading-row h3 { margin:0; font-size:18px; line-height:1.2; font-weight:400; color:var(--prisma-text); }
.feature__heading-row > span { font-size:12px; color:#6b7280; }
.feature ul { list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.feature li { display:flex; align-items:flex-start; gap:10px; color:#9ca3af; font-size:12px; line-height:1.6; }
.check-icon { flex:0 0 auto; margin-top:2px; color:var(--prisma-primary); }
.learn-more { display:inline-flex; align-items:center; gap:8px; margin-top:32px; font-size:12px; color:var(--prisma-primary); }
.learn-more svg { transform:rotate(-45deg); transition:transform .3s ease; }
.learn-more:hover svg { transform:rotate(-45deg) translate(3px,-3px); }

.prisma-basic-page { min-height:100vh; background:#000; color:var(--prisma-text); padding:80px 20px; }
.prisma-basic-inner { max-width:900px; margin:0 auto; }

@media (min-width:640px) {
  .hero__nav { gap:24px; }
  .hero__menu,.hero__nav-fallback { gap:24px; }
  .hero__nav a { font-size:12px; }
  .hero__content { padding-left:24px; padding-right:24px; padding-bottom:24px; }
  .hero__title { font-size:24vw; }
  .hero__description { font-size:14px; }
  .prisma-cta { font-size:16px; }
  .prisma-cta__circle { width:40px; height:40px; }
  .about { padding-left:24px; padding-right:24px; }
  .about__card { padding:80px 32px; }
  .about__label { font-size:12px; }
  .about__heading { font-size:36px; line-height:.9; }
  .about__body { font-size:14px; }
  .features { padding-left:24px; padding-right:24px; }
  .features__header { margin-bottom:56px; }
  .features__title,.features__subtitle { font-size:24px; }
  .features__grid { gap:8px; }
  .feature--video p { left:24px; bottom:24px; font-size:20px; }
  .feature--info { padding:24px; }
  .feature--info > img { width:48px; height:48px; }
  .feature__heading-row h3 { font-size:20px; }
  .feature li,.learn-more { font-size:14px; }
}

@media (min-width:768px) {
  .hero { padding:24px; }
  .hero__frame { border-radius:32px; }
  .hero__nav { gap:48px; padding-left:32px; padding-right:32px; border-radius:0 0 24px 24px; }
  .hero__menu,.hero__nav-fallback { gap:48px; }
  .hero__nav a { font-size:14px; }
  .hero__content { padding-left:32px; padding-right:32px; padding-bottom:32px; }
  .hero__grid { grid-template-columns:repeat(12,minmax(0,1fr)); gap:16px; }
  .hero__title-wrap { grid-column:span 8; }
  .hero__side { grid-column:span 4; padding-bottom:8px; }
  .hero__title { font-size:22vw; }
  .hero__description { font-size:16px; }
  .about { padding-top:96px; padding-bottom:96px; }
  .about__card { padding:112px 48px; }
  .about__heading { font-size:48px; }
  .about__body { margin-top:64px; font-size:16px; }
  .features { padding-top:96px; padding-bottom:96px; }
  .features__header { margin-bottom:64px; }
  .features__title,.features__subtitle { font-size:30px; }
  .features__grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (min-width:1024px) {
  .hero__nav { gap:56px; }
  .hero__menu,.hero__nav-fallback { gap:56px; }
  .hero__content { padding-left:40px; padding-right:40px; padding-bottom:40px; }
  .hero__title { font-size:20vw; }
  .hero__side { padding-bottom:16px; }
  .about { padding:128px 32px; }
  .about__card { padding-left:64px; padding-right:64px; }
  .about__heading { font-size:60px; }
  .features { padding:112px 32px; }
  .features__title,.features__subtitle { font-size:36px; }
  .features__grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:4px; height:480px; }
  .feature { min-height:0; height:100%; }
}

@media (min-width:1280px) {
  .hero__title { font-size:19vw; }
  .about__heading { font-size:72px; }
}
@media (min-width:1536px) { .hero__title { font-size:20vw; } }

@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  .word-rise,.js-fade-up,.js-feature-card { opacity:1 !important; transform:none !important; }
  .char-reveal { opacity:1 !important; }
}
