/* ShieldKin home — a dark, cinematic product page. Single deliberate theme (the product lives on a dark stage). */
:root {
  --night: #070909; --night-2: #0c1110; --card: #101615; --line: rgb(255 255 255 / .08); --line-2: rgb(255 255 255 / .14);
  --text: #eef1ee; --dim: #9aa7a3; --mint: #6dc6b4; --teal: #0d5c53; --amber: #f2b661;
  --ease: cubic-bezier(.32, .72, 0, 1);
}
html.home { background: var(--night); color-scheme: dark; }
.home body { background: var(--night); color: var(--text); font-family: var(--body); }
.home ::selection { background: var(--amber); color: #1b1f1d; }
.home a { color: var(--mint); }

/* Floating island navigation */
.island { position: fixed; z-index: 20; top: max(14px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 4px; padding: 6px; border-radius: 999px; width: max-content; max-width: calc(100vw - 24px);
  background: rgb(12 17 16 / .62); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4);
  border: 1px solid var(--line); box-shadow: inset 0 1px 0 rgb(255 255 255 / .06), 0 10px 40px -18px rgb(0 0 0 / .8); }
.island .brand { display: flex; align-items: center; gap: 8px; padding: 6px 12px 6px 8px; color: var(--text); text-decoration: none; font: 600 1rem/1 var(--display); letter-spacing: -.01em; }
.island .brand img { width: 26px; height: 26px; }
.island a.nav { color: var(--dim); text-decoration: none; font-size: .875rem; padding: 9px 12px; border-radius: 999px; transition: color .4s var(--ease), background-color .4s var(--ease); }
.island a.nav:hover { color: var(--text); background: rgb(255 255 255 / .06); }
.island a.lang { color: #1b1f1d; background: var(--text); font-weight: 600; font-size: .8125rem; padding: 9px 14px; border-radius: 999px; text-decoration: none; }
@media (max-width: 760px) { .island a.nav { display: none; } }

/* Shared type */
.home h1, .home h2, .home h3 { font-family: var(--display); letter-spacing: -.035em; font-weight: 600; }
html[lang="ar"].home h1, html[lang="ar"].home h2, html[lang="ar"].home h3 { letter-spacing: 0; font-weight: 700; }
.pill { display: inline-flex; align-items: center; gap: 8px; border-radius: 999px; padding: 6px 12px; font: 600 .6875rem/1 var(--body);
  letter-spacing: .18em; text-transform: uppercase; color: var(--amber); background: rgb(242 182 97 / .1); border: 1px solid rgb(242 182 97 / .22); }
html[lang="ar"] .pill { letter-spacing: 0; font-size: .8125rem; }
.pill i { width: 6px; height: 6px; border-radius: 50%; background: var(--amber); animation: blink 2.4s var(--ease) infinite; }
@keyframes blink { 50% { opacity: .3; } }

/* The story: a tall section whose stage sticks while the band turns */
.story { position: relative; height: 560vh; }
.stage { position: sticky; top: 0; height: 100vh; height: 100dvh; overflow: hidden;
  background: radial-gradient(60% 55% at 70% 48%, rgb(13 92 83 / .45) 0%, rgb(13 92 83 / 0) 70%), radial-gradient(40% 40% at 76% 60%, rgb(242 182 97 / .08), transparent 70%), var(--night); }
html[dir="rtl"] .stage { background: radial-gradient(60% 55% at 30% 48%, rgb(13 92 83 / .45) 0%, rgb(13 92 83 / 0) 70%), radial-gradient(40% 40% at 24% 60%, rgb(242 182 97 / .08), transparent 70%), var(--night); }
@media (max-width: 900px) { .stage, html[dir="rtl"] .stage { background: radial-gradient(80% 45% at 50% 34%, rgb(13 92 83 / .5), transparent 70%), var(--night); } }
.stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.stage .grain { position: absolute; inset: 0; pointer-events: none; opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.chapters { position: absolute; inset: 0; pointer-events: none; }
.chapter { position: absolute; top: 50%; inset-inline-start: max(6vw, 24px); translate: 0 -50%; width: min(36rem, 44vw); opacity: 0; will-change: opacity, transform; pointer-events: auto; }
.chapter h1 { font-size: clamp(2.75rem, 6.4vw, 5.75rem); line-height: .98; margin: 22px 0 0; text-wrap: balance; }
html[lang="ar"] .chapter h1 { line-height: 1.25; }
.chapter h1 em, .chapter h2 em { font-style: normal; color: var(--mint); }
.chapter h2 { font-size: clamp(2.1rem, 4.2vw, 3.75rem); line-height: 1.02; margin: 18px 0 0; text-wrap: balance; }
html[lang="ar"] .chapter h2 { line-height: 1.3; }
.chapter p { color: var(--dim); font-size: clamp(1.0625rem, 1.25vw, 1.25rem); line-height: 1.6; margin: 20px 0 0; max-width: 32em; }
html[lang="ar"] .chapter p { line-height: 1.9; }
.chapter .actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
@media (max-width: 900px) {
  .chapter { top: auto; bottom: max(28px, env(safe-area-inset-bottom)); translate: none; inset-inline: 20px; width: auto; }
  .chapter h1 { font-size: clamp(2.4rem, 11vw, 3.5rem); }
  .chapter h2 { font-size: clamp(1.75rem, 8vw, 2.5rem); }
  .chapter p { font-size: 1rem; margin-top: 12px; }
}
.callout { position: absolute; top: 0; left: 0; opacity: 0; pointer-events: none; will-change: transform, opacity; }
.callout i { position: absolute; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 0 5px rgb(242 182 97 / .22), 0 0 18px rgb(242 182 97 / .6); }
.callout span { position: absolute; top: -12px; left: 18px; white-space: nowrap; font: 600 .875rem/1 var(--body); color: var(--text);
  padding: 7px 12px; border-radius: 999px; background: rgb(12 17 16 / .72); border: 1px solid var(--line-2); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.callout span::before { content: ""; position: absolute; top: 50%; right: 100%; width: 12px; height: 1px; background: var(--line-2); }
.callout.left span { left: auto; right: 18px; }
.callout.left span::before { right: auto; left: 100%; }
@media (max-width: 900px) { .callout span { font-size: .75rem; padding: 6px 10px; } }
.progress { position: absolute; left: 50%; bottom: 18px; width: min(220px, 40vw); height: 2px; translate: -50% 0; background: var(--line); border-radius: 2px; overflow: hidden; }
.progress i { display: block; height: 100%; background: linear-gradient(90deg, var(--mint), var(--amber)); transform-origin: left; transform: scaleX(0); }
html[dir="rtl"] .progress i { transform-origin: right; }
@media (max-width: 900px) { .progress { display: none; } }
.cue { display: inline-flex; align-items: center; gap: 10px; color: var(--dim); font-size: .8125rem; margin-top: 34px; }
.cue b { width: 22px; height: 34px; border-radius: 12px; border: 1.5px solid var(--line-2); position: relative; }
.cue b::after { content: ""; position: absolute; left: 50%; top: 7px; width: 3px; height: 7px; margin-left: -1.5px; border-radius: 2px; background: var(--text); animation: wheel 1.8s var(--ease) infinite; }
@keyframes wheel { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(10px); opacity: 0; } 100% { opacity: 0; } }

/* Buttons: pill with a nested circular icon */
.btn2 { display: inline-flex; align-items: center; gap: 12px; padding: 6px 6px 6px 20px; border-radius: 999px; font: 600 .9375rem/1 var(--body); text-decoration: none;
  transition: transform .5s var(--ease), background-color .5s var(--ease); }
html[dir="rtl"] .btn2 { padding: 6px 20px 6px 6px; }
.btn2:active { transform: scale(.98); }
.btn2 .ico { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; transition: transform .5s var(--ease); }
.btn2:hover .ico { transform: translate(2px, -2px) scale(1.05); }
html[dir="rtl"] .btn2:hover .ico { transform: translate(-2px, -2px) scale(1.05); }
html[dir="rtl"] .btn2 .ico svg { transform: scaleX(-1); }
.btn2.solid { background: var(--text); color: #101514; }
.btn2.solid .ico { background: #101514; color: var(--text); }
.btn2.glass { color: var(--text); background: rgb(255 255 255 / .06); border: 1px solid var(--line-2); }
.btn2.glass .ico { background: rgb(255 255 255 / .1); }
.home a.btn2:hover { text-decoration: none; }

/* Sections after the story */
.sec { padding-block: clamp(96px, 14vw, 180px); }
.sec .wrap { max-width: 1200px; }
.head2 { max-width: 46rem; }
.head2 h2 { font-size: clamp(2.25rem, 5vw, 4.25rem); line-height: 1.02; margin-top: 18px; text-wrap: balance; }
html[lang="ar"] .head2 h2 { line-height: 1.3; }
.head2 p { color: var(--dim); font-size: 1.125rem; margin-top: 20px; max-width: 36em; }
[data-reveal] { opacity: 0; transform: translate3d(0, 48px, 0); filter: blur(8px); transition: opacity 1s var(--ease), transform 1.1s var(--ease), filter 1s var(--ease); }
[data-reveal].in { opacity: 1; transform: none; filter: none; }
[data-reveal][data-delay="1"] { transition-delay: .08s; } [data-reveal][data-delay="2"] { transition-delay: .16s; } [data-reveal][data-delay="3"] { transition-delay: .24s; }

/* Double-bezel cards */
.bezel { padding: 6px; border-radius: 30px; background: rgb(255 255 255 / .03); border: 1px solid var(--line); }
.bezel > .core { border-radius: 24px; background: linear-gradient(180deg, #121a18, #0d1211); box-shadow: inset 0 1px 1px rgb(255 255 255 / .08); height: 100%; }

/* Spec bento */
.bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 14px; margin-top: 64px; }
.bento > * { min-width: 0; }
.bento .b1 { grid-column: span 7; } .bento .b2 { grid-column: span 5; } .bento .b3, .bento .b4, .bento .b5 { grid-column: span 4; }
@media (max-width: 860px) { .bento .b1, .bento .b2, .bento .b3, .bento .b4, .bento .b5 { grid-column: span 12; } }
.bento .core { padding: clamp(24px, 3vw, 36px); display: flex; flex-direction: column; justify-content: space-between; gap: 28px; min-height: 220px; }
.bento .big { font: 600 clamp(2.5rem, 5vw, 4.5rem)/1 var(--display); letter-spacing: -.04em; color: var(--text); }
html[lang="ar"] .bento .big { letter-spacing: 0; }
.bento .big small { font-size: .38em; color: var(--dim); letter-spacing: 0; margin-inline-start: 6px; }
.bento h3 { font-size: 1.25rem; letter-spacing: -.01em; }
.bento p { color: var(--dim); margin-top: 6px; font-size: .9375rem; }
.bento .b1 .core { background: radial-gradient(90% 120% at 100% 0%, rgb(13 92 83 / .55), transparent 60%), linear-gradient(180deg, #121a18, #0d1211); }
.bento .still { width: 100%; max-width: 360px; align-self: center; }
.note-small { color: var(--dim); font-size: .8125rem; margin-top: 18px; }

/* Phones */
.phones { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 3vw, 40px); margin-top: 72px; align-items: end; }
.phones figure { margin: 0; display: grid; gap: 18px; justify-items: center; text-align: center; }
.phones figure:nth-child(2) { transform: translateY(-48px); }
.phone { width: 100%; max-width: 300px; aspect-ratio: 390 / 844; border-radius: 44px; padding: 10px; background: linear-gradient(160deg, #2a3331, #121716); border: 1px solid var(--line-2);
  box-shadow: 0 40px 80px -40px rgb(0 0 0 / .9), inset 0 1px 1px rgb(255 255 255 / .12); }
.phone img { width: 100%; height: 100%; object-fit: cover; border-radius: 35px; display: block; }
.phones figcaption strong { display: block; font: 600 1.125rem/1.3 var(--display); }
.phones figcaption span { color: var(--dim); font-size: .9375rem; }
@media (max-width: 860px) {
  .phones { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 72%; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 16px; margin-inline: -20px; padding-inline: 20px; }
  .phones figure { scroll-snap-align: center; } .phones figure:nth-child(2) { transform: none; }
}

/* Ring */
.ring .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: center; }
@media (max-width: 860px) { .ring .wrap { grid-template-columns: 1fr; } }
.ring .canvas-box { position: relative; aspect-ratio: 1 / 1; width: 100%; max-width: 560px; justify-self: center; border-radius: 40px;
  background: radial-gradient(60% 60% at 50% 50%, rgb(13 92 83 / .4), transparent 70%); }
.ring canvas, .ring .canvas-box img { position: absolute; inset: 0; width: 100%; height: 100%; }
.ring .canvas-box img { display: none; object-fit: contain; }

/* Circle steps */
.steps2 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 64px; counter-reset: s; list-style: none; padding: 0; }
@media (max-width: 860px) { .steps2 { grid-template-columns: 1fr; } }
.steps2 li { counter-increment: s; }
.steps2 .core { padding: 32px; min-height: 240px; display: flex; flex-direction: column; gap: 14px; }
.steps2 .core::before { content: counter(s, decimal-leading-zero); font: 600 .875rem/1 var(--body); color: var(--amber); letter-spacing: .1em; }
html[lang="ar"] .steps2 .core::before { content: counter(s, arabic-indic); }
.steps2 h3 { font-size: 1.5rem; }
.steps2 p { color: var(--dim); }

/* Promise */
.promise2 { background: linear-gradient(180deg, var(--night), #0a1110 30%, var(--night)); }
.vows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin-top: 56px; border-top: 1px solid var(--line); }
@media (max-width: 760px) { .vows { grid-template-columns: 1fr; } }
.vows div { padding: 36px 0; border-bottom: 1px solid var(--line); padding-inline-end: 32px; }
.vows h3 { font-size: clamp(1.75rem, 3vw, 2.5rem); line-height: 1.08; }
.vows p { color: var(--dim); margin-top: 10px; max-width: 28em; }

/* Status + contact */
.status2 .core { padding: clamp(28px, 4vw, 48px); display: grid; grid-template-columns: auto 1fr; gap: 24px; align-items: start; }
@media (max-width: 640px) { .status2 .core { grid-template-columns: 1fr; } }
.status2 svg { width: 34px; height: 34px; color: var(--amber); }
.status2 h2 { font-size: 1.5rem; letter-spacing: -.01em; }
.status2 p { color: var(--dim); margin-top: 10px; max-width: 46em; }
.contact2 { text-align: center; }
.contact2 h2 { font-size: clamp(2.25rem, 5vw, 4rem); line-height: 1.05; text-wrap: balance; }
.contact2 p { color: var(--dim); margin-top: 16px; }
.contact2 .actions { display: flex; justify-content: center; margin-top: 32px; }
.home footer { border-top: 1px solid var(--line); color: var(--dim); }
.home footer a { color: var(--dim); }

/* No 3D (reduced motion, no WebGL): the story becomes ordinary sections with still images */
.no3d .story { height: auto; }
.no3d .stage { position: relative; height: auto; overflow: visible; background: none; }
.no3d .stage canvas, .no3d .callout, .no3d .progress, .no3d .stage .grain, .no3d .cue { display: none; }
.no3d .chapters { position: static; display: grid; gap: 0; }
.no3d .chapter { position: static; translate: none; opacity: 1 !important; transform: none !important; width: auto; max-width: 1200px; margin: 0 auto;
  padding: 120px max(20px, env(safe-area-inset-left)) 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: center; }
.no3d .chapter .still { display: block; width: 100%; max-width: 520px; justify-self: center; }
@media (max-width: 860px) { .no3d .chapter { grid-template-columns: 1fr; padding-top: 88px; } }
.chapter .still { display: none; }
.no3d .ring canvas { display: none; } .no3d .ring .canvas-box img { display: block; }
.story.still .chapters, .story.still .progress, .story.still .grain { display: none; }

.home .story { padding-block: 0; }
.home h2 em, .home h1 em { font-style: normal; color: var(--mint); }
.bento .b3 .big, .bento .b4 .big, .bento .b5 .big { font-size: clamp(2rem, 3.4vw, 3.25rem); }
html[lang="ar"] .chapter h1 { font-size: clamp(2.4rem, 5vw, 4.6rem); }
@media (max-width: 900px) {
  .stage::after { content: ""; position: absolute; inset: auto 0 0 0; height: 62%; pointer-events: none; z-index: 1;
    background: linear-gradient(180deg, rgb(7 9 9 / 0) 0%, rgb(7 9 9 / .86) 38%, rgb(7 9 9 / .96) 100%); }
  .chapters { z-index: 2; }
  .callout { z-index: 3; }
}
@media (max-width: 520px) { .callout span { white-space: normal; width: max-content; max-width: 140px; line-height: 1.25; top: -14px; } }
.chapter .still, .ring .canvas-box img { height: auto; }