@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@700;800;900&family=Inter:wght@400;500;600&family=Rajdhani:wght@600;700&family=Space+Mono:wght@400;700&display=swap');

:root{
  --ink:#0f1115;
  --paper:#ebecee;
  --page:#d6d8dc;
  --row:#e2e4e8;
  --red:#e5402a;
  --blue:#78a8e8;
  --line:rgba(15,17,21,.14);
  --line2:rgba(15,17,21,.28);
  --mute:rgba(15,17,21,.52);
  --faint:rgba(15,17,21,.32);
  --space:'Space Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --inter:'Inter',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --archivo:'Archivo','Arial Black',sans-serif;
  --raj:'Rajdhani','Arial Narrow',sans-serif;
}

*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:#08090b}
body{
  min-height:100svh;
  overflow:hidden;
  color:var(--paper);
  font-family:var(--inter);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  background:
    radial-gradient(circle at 72% 18%,rgba(91,76,132,.27),transparent 30%),
    radial-gradient(circle at 26% 79%,rgba(229,64,42,.075),transparent 35%),
    linear-gradient(137deg,#07080a 0%,#0d0f16 54%,#151426 100%);
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:.12;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.30'/%3E%3C/svg%3E");
  mix-blend-mode:soft-light;
}

.stage{
  position:relative;
  width:min(1180px,100vw);
  min-height:100svh;
  margin:0 auto;
  display:grid;
  place-items:center;
  perspective:1900px;
}

.shadow-ambient,
.shadow-contact{
  position:absolute;
  left:50%;
  top:76.5%;
  border-radius:50%;
  pointer-events:none;
  transform-origin:center;
}
.shadow-ambient{
  width:500px;
  height:134px;
  transform:translate(-47%,-50%) rotate(-7deg);
  background:radial-gradient(ellipse at center,rgba(0,0,0,.62),rgba(0,0,0,.18) 53%,transparent 74%);
  filter:blur(28px);
  opacity:.82;
  animation:shadowEnter 1.25s cubic-bezier(.18,.78,.22,1) .72s both;
}
.shadow-contact{
  width:328px;
  height:58px;
  transform:translate(-43%,-50%) rotate(-7deg);
  background:radial-gradient(ellipse at center,rgba(0,0,0,.82),rgba(0,0,0,.30) 48%,transparent 75%);
  filter:blur(10px);
  opacity:.8;
  animation:shadowEnter 1.25s cubic-bezier(.18,.78,.22,1) .72s both;
}

.phone-scene{
  --rx:.45deg;
  --ry:-3.9deg;
  --rz:5.15deg;
  position:relative;
  width:clamp(330px,28.5vw,446px);
  aspect-ratio:393/852;
  transform-style:preserve-3d;
  transform:translateY(0) rotateX(var(--rx)) rotateY(var(--ry)) rotateZ(var(--rz));
  animation:phoneEnter 1.25s cubic-bezier(.16,.82,.22,1) .72s both,phoneBreathe 14s ease-in-out 1.97s infinite;
  will-change:transform;
}

.device{
  position:absolute;
  inset:0;
  transform-style:preserve-3d;
}

/* Rear body and narrow side wall create real depth without a bulky bezel. */
.device-back{
  position:absolute;
  inset:1.5px;
  border-radius:57px;
  transform:translateZ(-13px);
  background:
    linear-gradient(156deg,#777b83 0%,#40444b 13%,#111318 45%,#1a1d24 72%,#656972 100%);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.11),
    0 46px 92px rgba(0,0,0,.48),
    0 14px 28px rgba(0,0,0,.26);
}
.device-side{
  position:absolute;
  inset:3px -7px 3px 8px;
  border-radius:56px;
  transform:translateZ(-7px);
  background:linear-gradient(95deg,#0b0c10 0%,#494c54 53%,#14171d 100%);
  opacity:.94;
}

/* Titanium rail: restrained highlights, subtle brushed grain. */
.rail{
  position:absolute;
  inset:0;
  padding:4.5px;
  border-radius:58px;
  transform:translateZ(0);
  background:
    repeating-linear-gradient(96deg,rgba(255,255,255,.024) 0 1px,rgba(0,0,0,.014) 1px 2px),
    linear-gradient(112deg,
      #c2c6ce 0%,
      #6e737c 4%,
      #23262d 12%,
      #9a9fa8 22%,
      #13151a 36%,
      #373b43 57%,
      #0f1115 72%,
      #90959e 89%,
      #2d3036 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.24),
    inset 0 0 0 2px rgba(0,0,0,.64),
    0 0 0 1px rgba(255,255,255,.05),
    0 12px 36px rgba(0,0,0,.18);
}
.rail::before{
  content:"";
  position:absolute;
  inset:1.5px;
  border-radius:56.5px;
  pointer-events:none;
  background:
    linear-gradient(105deg,
      rgba(255,255,255,.46) 0%,
      rgba(255,255,255,.075) 5%,
      transparent 13% 77%,
      rgba(255,255,255,.2) 90%,
      transparent 100%);
  mix-blend-mode:screen;
  opacity:.72;
}
.rail::after{
  content:"";
  position:absolute;
  inset:4px;
  border-radius:53px;
  pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.86);
}

.glass{
  position:relative;
  height:100%;
  overflow:hidden;
  padding:3px;
  border-radius:54px;
  background:linear-gradient(180deg,#08090e 0%,#020304 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.18),
    inset 0 0 24px rgba(255,255,255,.065),
    inset 0 -12px 26px rgba(0,0,0,.2),
    0 1px 0 rgba(255,255,255,.10),
    0 0 0 1px rgba(0,0,0,.3);
}
.screen{
  position:relative;
  height:100%;
  overflow:hidden;
  border-radius:51px;
  background:
    radial-gradient(circle at 92% 0%,rgba(229,64,42,.085),transparent 23%),
    linear-gradient(180deg,rgba(255,255,255,.42),rgba(255,255,255,0) 9%),
    var(--paper);
  color:var(--ink);
  isolation:isolate;
}
.screen::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:30;
  pointer-events:none;
  border-radius:51px;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.24),
    inset 0 0 16px rgba(0,0,0,.07);
}

.reflection-main,
.reflection-soft,
.edge-glint{
  position:absolute;
  z-index:40;
  pointer-events:none;
}
.reflection-main{
  inset:-12%;
  border-radius:64px;
  background:linear-gradient(116deg,transparent 0 25%,rgba(255,255,255,.15) 32%,rgba(255,255,255,.034) 38%,transparent 46% 100%);
  mix-blend-mode:screen;
  opacity:.72;
}
.reflection-soft{
  width:46%;
  height:74%;
  left:-10%;
  top:-11%;
  transform:rotate(18deg);
  border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(255,255,255,.09),transparent 70%);
  filter:blur(6px);
  opacity:.78;
}
.edge-glint{
  top:4%;
  right:1px;
  width:1.8px;
  height:60%;
  border-radius:4px;
  background:linear-gradient(to bottom,transparent,rgba(255,255,255,.62),transparent);
  opacity:.56;
}

.side-button{
  position:absolute;
  z-index:2;
  width:4px;
  border-radius:2px;
  background:linear-gradient(90deg,#101216,#4b4e55 62%,#17191e);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 0 0 1px rgba(0,0,0,.55);
}
.side-button.action{left:-5px;top:132px;height:31px}
.side-button.vol-up{left:-5px;top:188px;height:66px}
.side-button.vol-down{left:-5px;top:270px;height:66px}
.side-button.power{right:-5px;top:217px;height:101px}

.island{
  position:absolute;
  z-index:18;
  left:50%;
  top:13px;
  transform:translateX(-50%);
  width:112px;
  height:31px;
  border-radius:20px;
  background:linear-gradient(180deg,#0a0b0e 0%,#020304 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),inset 0 0 0 1px rgba(255,255,255,.03),0 0 0 1px rgba(0,0,0,.84);
}
.island::before{
  content:"";
  position:absolute;
  left:17px;
  top:13px;
  width:37px;
  height:4px;
  border-radius:3px;
  background:linear-gradient(90deg,#08090b,#11131a 46%,#090a0c);
}
.island::after{
  content:"";
  position:absolute;
  right:10px;
  top:10px;
  width:10px;
  height:10px;
  border-radius:50%;
  background:radial-gradient(circle at 32% 32%,rgba(78,126,200,.95),#152033 42%,#050608 78%);
  box-shadow:0 0 8px rgba(72,120,196,.10);
  opacity:.82;
}