/* ---------------------------------------------------------------------------
   Amal — hero page
   Rebuilt 1:1 from the original Framer design: same tokens, type, layout and
   motion curves. No framework and no build step — this file plus /assets is
   the whole site.
   --------------------------------------------------------------------------- */

/* --- Inter, self-hosted (the same font files the original served) --------- */
@font-face{font-family:Inter;font-style:normal;font-weight:400;font-display:swap;
  src:url(inter-400-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Inter;font-style:normal;font-weight:400;font-display:swap;
  src:url(inter-400-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Inter;font-style:normal;font-weight:700;font-display:swap;
  src:url(inter-700-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Inter;font-style:normal;font-weight:700;font-display:swap;
  src:url(inter-700-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* --- design tokens (same values as the original) -------------------------- */
:root{
  --ink:#171717;              /* page background          */
  --white:#fff;
  --clear:rgba(0,0,0,0);
  --ember:#3d1d06;            /* corner glow, beam mid    */
  --ember-warm:#3d2013;       /* inner beam head          */
  --gold:#d89b02;             /* beam head                */
  --glass:rgba(138,138,138,.3);
  --glass-edge:rgba(255,255,255,.38);

  /* springs, resolved from the original's motion settings */
  --spring-heading:linear(0, 0.0054, 0.0204, 0.043, 0.0717, 0.1052, 0.1421, 0.1816, 0.2227, 0.2648, 0.3072, 0.3494, 0.3911, 0.4318, 0.4713, 0.5094, 0.546, 0.5809, 0.6141, 0.6455, 0.6751, 0.7029, 0.7289, 0.7532, 0.7758, 0.7968, 0.8162, 0.8342, 0.8507, 0.8659, 0.8798, 0.8926, 0.9042, 0.9148, 0.9244, 0.9331, 0.941, 0.9481, 0.9545, 0.9603, 0.9654, 0.9701, 0.9742, 0.9778, 0.9811, 0.984, 0.9865, 0.9888, 0.9907, 0.9924, 0.9939, 0.9952, 0.9963, 0.9973, 0.9981, 0.9988, 0.9994, 0.9999, 1.0003, 1.0006, 1.0009, 1.0011, 1.0012, 1.0013, 1);
  --spring-button:linear(0, 0.0061, 0.0229, 0.0485, 0.0811, 0.1192, 0.1613, 0.2063, 0.2532, 0.3012, 0.3494, 0.3973, 0.4444, 0.4902, 0.5344, 0.5767, 0.617, 0.6551, 0.691, 0.7245, 0.7558, 0.7847, 0.8113, 0.8358, 0.8581, 0.8784, 0.8967, 0.9132, 0.928, 0.9412, 0.9529, 0.9631, 0.9722, 0.98, 0.9868, 0.9926, 0.9975, 1.0016, 1.0051, 1.0079, 1.0101, 1.0118, 1.0132, 1.0141, 1.0147, 1.0151, 1.0152, 1.0151, 1.0148, 1.0144, 1.0139, 1.0134, 1.0127, 1.012, 1.0113, 1.0106, 1.0099, 1.0091, 1.0084, 1.0077, 1.0071, 1.0064, 1.0058, 1.0052, 1.0047, 1.0042, 1.0037, 1.0033, 1.0029, 1.0025, 1.0022, 1.0018, 1.0016, 1.0013, 1.0011, 1.0009, 1.0007, 1.0006, 1.0004, 1.0003, 1.0002, 1);
  --spring-grid:linear(0, 0.0041, 0.0154, 0.0326, 0.0545, 0.0802, 0.1088, 0.1396, 0.172, 0.2055, 0.2395, 0.2738, 0.308, 0.3419, 0.3753, 0.4079, 0.4396, 0.4704, 0.5002, 0.5289, 0.5564, 0.5827, 0.6079, 0.6319, 0.6547, 0.6764, 0.697, 0.7165, 0.7349, 0.7522, 0.7686, 0.7841, 0.7986, 0.8122, 0.825, 0.837, 0.8483, 0.8589, 0.8687, 0.878, 0.8866, 0.8947, 0.9022, 0.9092, 0.9158, 0.9219, 0.9275, 0.9328, 0.9378, 0.9423, 0.9466, 0.9505, 0.9542, 0.9576, 0.9608, 0.9637, 0.9665, 0.969, 0.9713, 0.9735, 0.9755, 0.9774, 0.9791, 0.9807, 0.9822, 0.9836, 0.9848, 0.986, 0.9871, 0.9881, 0.989, 0.9899, 0.9907, 0.9914, 0.9921, 0.9927, 0.9933, 0.9938, 0.9943, 0.9947, 0.9951, 0.9955, 0.9959, 0.9962, 0.9965, 0.9968, 0.997, 0.9973, 0.9975, 0.9977, 0.9979, 0.998, 0.9982, 0.9983, 0.9985, 0.9986, 0.9987, 0.9988, 1);
  --spring-word:linear(0, 0.0156, 0.0553, 0.1103, 0.1743, 0.2425, 0.3115, 0.3792, 0.4439, 0.5047, 0.561, 0.6125, 0.6593, 0.7014, 0.7391, 0.7727, 0.8024, 0.8286, 0.8516, 0.8718, 0.8894, 0.9048, 0.9181, 0.9297, 0.9397, 0.9483, 0.9558, 0.9622, 0.9677, 0.9724, 0.9765, 0.98, 0.983, 0.9855, 0.9877, 0.9895, 0.9911, 0.9925, 0.9936, 0.9946, 0.9954, 0.9961, 0.9967, 0.9972, 0.9976, 0.998, 0.9983, 0.9986, 0.9988, 0.999, 0.9991, 0.9993, 0.9994, 1);
  --spring-word-phone:linear(0, 0.0136, 0.0491, 0.0996, 0.1598, 0.2256, 0.2938, 0.3619, 0.4282, 0.4915, 0.5509, 0.606, 0.6565, 0.7023, 0.7435, 0.7803, 0.8129, 0.8415, 0.8666, 0.8884, 0.9072, 0.9234, 0.9372, 0.9489, 0.9588, 0.9671, 0.974, 0.9798, 0.9845, 0.9883, 0.9914, 0.994, 0.9959, 0.9975, 0.9987, 0.9996, 1.0003, 1.0008, 1.0011, 1.0013, 1.0015, 1);
  --spring-hover:linear(0, 0.0363, 0.1218, 0.2308, 0.3462, 0.4578, 0.5596, 0.649, 0.725, 0.7881, 0.8394, 0.8803, 0.9124, 0.9371, 0.9559, 0.9699, 0.9801, 0.9875, 0.9927, 0.9962, 0.9985, 1, 1.0009, 1.0013, 1.0015, 1);
  --beam-ease:cubic-bezier(.12,.23,.5,1);

  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
:root body{background:var(--ink)}
body{font-family:Inter,"Inter Placeholder",sans-serif}

.site{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  align-content:center;
  gap:0;
  width:100%;
  height:min-content;
  background-color:var(--ink);
  overflow:visible;
}

/* --- top fade bar --------------------------------------------------------- */
.topbar{
  position:fixed;
  top:0;
  left:50%;
  transform:translateX(-50%);
  z-index:10;
  width:100%;
  height:70px;
  background:linear-gradient(0deg,var(--clear) 0%,var(--ink) 100%);
}

/* --- hero ----------------------------------------------------------------- */
.hero{
  position:relative;
  display:flex;
  flex:none;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  align-content:center;
  gap:11px;
  width:100%;
  height:100vh;
  padding:80px 0 0;
  overflow:hidden;
  background:radial-gradient(22% 34% at 0% 26.8%,var(--ember) 10.4448%,var(--clear) 100%);
}

.hero-body{
  position:relative;
  display:flex;
  flex:none;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  align-content:center;
  gap:111px;
  width:100%;
  height:min-content;
  overflow:visible;
}

.hero-heading-container{
  position:relative;
  display:flex;
  flex:none;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  align-content:center;
  gap:15px;
  width:100%;
  height:min-content;
  overflow:visible;
}

.hero-heading-content{
  position:relative;
  z-index:2;
  display:flex;
  flex:none;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  align-content:center;
  gap:25px;
  width:800px;
  max-width:800px;
  height:min-content;
  padding:43px 0;
  overflow:visible;
}

.hero-copy{
  position:relative;
  display:flex;
  flex:none;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  align-content:center;
  gap:10px;
  width:100%;
  height:min-content;
  overflow:visible;
}

/* --- headline ------------------------------------------------------------- */
.heading{
  position:relative;
  z-index:1;
  flex:none;
  width:100%;
  height:auto;
  will-change:transform;
  animation:heading-in 650ms var(--spring-heading) both;
}
.heading h1{
  margin:0;
  white-space:pre-wrap;
  word-break:break-word;
  word-wrap:break-word;
  font-family:Inter,"Inter Placeholder",sans-serif;
  font-size:75px;
  font-weight:700;
  font-style:normal;
  line-height:1em;
  letter-spacing:-.02em;
  text-align:center;
  color:var(--white);
}
@keyframes heading-in{
  from{opacity:.001;transform:translateY(100px) scale(1.1)}
  to  {opacity:1;transform:translateY(0) scale(1)}
}
/* above 1200px the headline flows on its own; below it, it breaks by hand.
   The two spans must stay whitespace-free in the markup: the h1 preserves
   whitespace, so a newline between them would print as a blank line. */
.wide-line{display:none}
.broken-line{display:inline}
@media (min-width:1200px){
  .wide-line{display:inline}
  .broken-line{display:none}
}

/* --- supporting line, revealed word by word ------------------------------- */
.supporting{
  position:relative;
  z-index:1;
  flex:none;
  width:100%;
  max-width:91%;
  height:auto;
  will-change:transform;
  animation:supporting-in 650ms var(--spring-heading) both;
}
.supporting p{
  margin:0;
  white-space:pre-wrap;
  word-break:break-word;
  word-wrap:break-word;
  font-family:Inter,sans-serif;
  font-size:18px;
  font-weight:400;
  font-style:normal;
  line-height:1.4em;
  letter-spacing:0;
  text-align:center;
  color:var(--white);
}
.supporting p span{
  display:inline-block;
  animation:word-in 540ms var(--spring-word) both;
  animation-delay:calc(var(--i) * .05s);
}
@keyframes supporting-in{
  from{opacity:0;transform:perspective(1200px) translateY(80px) scale(1.2)}
  to  {opacity:1;transform:perspective(1200px) translateY(0) scale(1)}
}
@keyframes word-in{
  from{opacity:.001;filter:blur(10px);transform:translateY(10px)}
  to  {opacity:1;filter:blur(0);transform:translateY(0)}
}

/* --- button --------------------------------------------------------------- */
.cta{
  position:relative;
  z-index:2;
  display:flex;
  flex:none;
  flex-direction:row;
  align-items:center;
  justify-content:center;
  align-content:center;
  gap:7px;
  width:min-content;
  height:min-content;
  overflow:visible;
}
.cta-appear{
  position:relative;
  z-index:3;
  flex:none;
  width:auto;
  height:auto;
  will-change:transform;
  animation:button-in 820ms var(--spring-button) 1s both;
}
@keyframes button-in{
  from{opacity:.001;transform:translateY(35px)}
  to  {opacity:1;transform:translateY(0)}
}

.btn{
  position:relative;
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:center;
  align-content:center;
  gap:10px;
  width:min-content;
  height:min-content;
  padding:8px 18px;
  border-radius:20px;
  text-decoration:none;
  cursor:pointer;
  overflow:hidden;
  background-color:var(--glass);
  box-shadow:inset 0 0 6px 3px var(--glass);
  -webkit-backdrop-filter:blur(5px);
  backdrop-filter:blur(5px);
  transition:background-color 260ms var(--spring-hover);
}
.btn::after{                      /* border sits on top, as in the original */
  content:"";
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:1px solid var(--glass-edge);
  border-radius:inherit;
  pointer-events:none;
}
.btn-row{
  position:relative;
  display:flex;
  flex:none;
  flex-direction:row;
  align-items:center;
  justify-content:flex-start;
  align-content:center;
  gap:8px;
  width:min-content;
  height:24px;
  overflow:hidden;
}
.btn-text-wrap{
  position:relative;
  display:flex;
  flex:none;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  align-content:center;
  gap:10px;
  width:min-content;
  height:min-content;
  overflow:visible;
}
.btn-text{
  position:relative;
  z-index:1;
  flex:none;
  width:auto;
  height:auto;
  white-space:pre;
}
.btn-text p{
  margin:0;
  font-family:Inter,sans-serif;
  font-size:14px;
  font-weight:400;
  font-style:normal;
  line-height:1.2em;
  letter-spacing:0;
  text-align:left;
  color:var(--white);
  transition:color 260ms var(--spring-hover);
}
.btn:hover{background-color:var(--white)}
.btn:hover .btn-text p{color:var(--ember)}
.btn:hover .btn-row{justify-content:flex-end}

/* one button per breakpoint, the way the original swaps them */
.btn--small{display:none}
@media (max-width:1199.98px){
  .btn--desktop{display:none}
  .btn--small{display:flex}
}

/* --- light beams ---------------------------------------------------------- */
.shimmer{
  position:absolute;
  top:calc(50% - 50vh);
  left:calc(50% - min(1200px,100%)/2);
  z-index:1;
  display:flex;
  flex:none;
  flex-direction:row;
  align-items:center;
  justify-content:center;
  align-content:center;
  gap:10px;
  width:100%;
  max-width:1200px;
  height:100vh;
  padding:0 35px;
  overflow:hidden;
}
.shimmer-clip{
  position:relative;
  display:flex;
  flex:1 0 0;
  flex-direction:row;
  align-items:center;
  justify-content:center;
  align-content:center;
  gap:10px;
  width:1px;
  height:100vh;
  overflow:hidden;
}
.beam{position:absolute;z-index:1;flex:none;width:2px;overflow:hidden}
.beam--left{
  height:100px;
  bottom:100px;
  left:calc(.0892857% - 1px);
  background:linear-gradient(180deg,var(--gold) 0%,var(--ember) 23.1313%,var(--clear) 100%);
  animation:beam-800 2s linear infinite;             /* 1.0s rise + 1.0s hold */
}
.beam--right{
  height:200px;
  top:calc(50% - 100px);
  left:calc(99.9029% - 1px);
  background:linear-gradient(180deg,var(--gold) 0%,var(--ember) 23.1313%,var(--clear) 100%);
  animation:beam-500 2.7s linear infinite;           /* 1.2s rise + 1.5s hold */
}
.beam--inner{
  height:50px;
  top:calc(50% - 25px);
  left:calc(9.01786% - 1px);
  background:linear-gradient(180deg,var(--ember-warm) 0%,var(--ember) 35.5856%,var(--clear) 100%);
  animation:beam-450 1.7s linear infinite;           /* 1.5s rise + 0.2s hold */
}
@keyframes beam-800{
  0%{transform:translateY(0);opacity:1;animation-timing-function:var(--beam-ease)}
  50%{transform:translateY(-800px);opacity:0}
  100%{transform:translateY(-800px);opacity:0}
}
@keyframes beam-500{
  0%{transform:translateY(0);opacity:1;animation-timing-function:var(--beam-ease)}
  44.4444%{transform:translateY(-500px);opacity:0}
  100%{transform:translateY(-500px);opacity:0}
}
@keyframes beam-450{
  0%{transform:translateY(0);opacity:1;animation-timing-function:var(--beam-ease)}
  88.2353%{transform:translateY(-450px);opacity:0}
  100%{transform:translateY(-450px);opacity:0}
}

/* --- empty slot, kept so the paint order matches -------------------------- */
.visual{
  position:absolute;
  top:0;
  left:0;
  z-index:0;
  display:flex;
  flex:none;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  width:100%;
  height:100vh;
  overflow:hidden;
}

/* --- ruled frame ---------------------------------------------------------- */
.grid-layer{
  position:absolute;
  top:0;
  right:0;
  z-index:1;
  display:flex;
  flex:none;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  width:100%;
  height:100vh;
  overflow:hidden;
}
.grid-appear{
  position:absolute;
  top:0;
  left:0;
  z-index:1;
  flex:none;
  width:100%;
  height:100vh;
  will-change:transform;
  animation:grid-in 990ms var(--spring-grid) both;
}
@keyframes grid-in{from{opacity:.001}to{opacity:1}}
.grid-stage{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  align-content:center;
  gap:10px;
  width:100%;
  height:100%;
  padding:70px 100px 65px;
  overflow:hidden;
}
.grid-frame{
  position:relative;
  flex:1 0 0;
  width:100%;
  max-width:1100px;
  height:1px;
  opacity:.6;
  overflow:visible;
}
.grid-line{position:absolute;z-index:1;background-color:var(--white);opacity:.2}
.grid-line--top{top:0;left:-950%;width:2000%;height:1px}
.grid-line--bottom{bottom:0;left:-950%;width:2000%;height:1px}
.grid-line--left{top:-950.065%;left:0;width:1px;height:2000%}
.grid-line--right{top:-950.065%;right:0;width:1px;height:2000%}
.grid-line--center{top:-950.065%;left:calc(50% - .5px);width:1px;height:2000%}
.grid-dot{position:absolute;z-index:1;width:8px;height:8px;background-color:var(--white);opacity:.2;overflow:hidden}
.grid-dot--tl{top:0;left:0}
.grid-dot--tr{top:0;right:0}
.grid-dot--bl{bottom:0;left:0}
.grid-dot--br{bottom:0;right:0}

/* --- film grain ----------------------------------------------------------- */
/* Paint order matches the original exactly: the hero's own background, then
   the dot pattern (z 0), then grain / beams / frame (z 1), then the text
   block (z 2, which is also what keeps the button clickable), then the bar. */
.noise{
  position:absolute;
  top:0;
  left:0;
  z-index:1;
  width:100%;
  height:100vh;
  opacity:.05;
  mix-blend-mode:screen;
  -webkit-mask-image:linear-gradient(#000 91%,rgba(0,0,0,0) 100%);
  mask-image:linear-gradient(#000 91%,rgba(0,0,0,0) 100%);
}
.noise-clip{position:relative;width:100%;height:100%;overflow:hidden}
.noise-tile{
  position:absolute;
  inset:-200%;
  width:400%;
  height:400%;
  opacity:.8;
  background:url(noise.png);
  background-size:256px 256px;
  background-repeat:repeat;
  animation:noise-drift 8s step-end infinite;
}
@keyframes noise-drift{
  0%{transform:translate(0%,0%)}
  10%{transform:translate(-5%,-10%)}
  20%{transform:translate(-15%,5%)}
  30%{transform:translate(7%,-25%)}
  40%{transform:translate(-5%,25%)}
  50%{transform:translate(-15%,10%)}
  60%{transform:translate(15%,0%)}
  70%{transform:translate(0%,15%)}
  80%{transform:translate(3%,35%)}
  90%{transform:translate(-10%,10%)}
  100%{transform:translate(0%,0%)}
}

/* --- dot pattern ---------------------------------------------------------- */
.dots{
  position:absolute;
  top:0;
  left:0;
  z-index:0;
  width:100%;
  height:100%;
  mix-blend-mode:screen;
  background-image:url(dots.png);
  background-repeat:repeat;
  background-position:left top;
  background-size:65px auto;
  will-change:transform;
  animation:dots-in 990ms var(--spring-grid) both;
}
@keyframes dots-in{from{opacity:.001}to{opacity:.8}}

/* ===== tablet: 810px – 1199.98px ========================================== */
@media (min-width:810px) and (max-width:1199.98px){
  .hero{padding:0}
  .hero-body{gap:75px}
  .hero-heading-container{order:0;gap:17px}
  .hero-heading-content{gap:49px;width:100%;max-width:730px}
  .heading h1{font-size:60px}
  .supporting p{font-size:16px}
  .shimmer{padding:0 40px}
  .visual{padding:0 0 80px}
  .grid-stage{padding:70px 40px 65px}
  .grid-line--left,.grid-line--right{top:-950%}
}

/* ===== phone: up to 809.98px ============================================== */
@media (max-width:809.98px){
  .hero{padding:0}
  .hero-body{flex:1 0 0;gap:41px;height:1px;padding:0 20px 10px}
  .hero-heading-container{gap:16px}
  .hero-heading-content{gap:17px;width:100%}
  .hero-copy{gap:12px}
  .heading{max-width:580px}
  .heading h1{font-size:36px}
  /* on phones the line arrives a beat later and the words land together */
  .supporting{max-width:500px;animation-delay:.1s}
  .supporting p{font-size:16px}
  .supporting p span{
    animation-duration:420ms;
    animation-timing-function:var(--spring-word-phone);
    animation-delay:0s;
  }
  .btn--small{padding:10px 18px;border-radius:27px;transition:none}
  .btn--small .btn-text p{transition:none}
  .btn--small:hover{background-color:var(--glass)}
  .btn--small:hover .btn-text p{color:var(--white)}
  .grid-stage{padding:70px 20px}
  .grid-line--center{top:-950.116%}
  .grid-line--left,.grid-line--right{top:-950.087%}
}