:root{
  --dark: #242533;
  --gray: #85889e;
  --gray-2: #4a4a4a;
  --black: #141414;
  --orange: #ffa819;
  --yellow: #ffcb30;
  --off-white: #f9f9f9;
  --border: #d0d3e5;
  --max: 1200px;
}

*{box-sizing:border-box;margin:0;padding:0;}

html{scroll-behavior:smooth;}

body{
  font-family:'Sora', sans-serif;
  color:var(--dark);
  background:#fff;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{max-width:100%;display:block;}

a{color:inherit;text-decoration:none;}

ul{list-style:none;}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:48px;
  padding:0 24px;
  border-radius:10px;
  font-size:16px;
  font-weight:600;
  letter-spacing:-0.16px;
  white-space:nowrap;
  border:1px solid transparent;
  cursor:pointer;
  transition:opacity .2s ease, transform .2s ease;
}
.btn:hover{opacity:.88;}

.btn-outline{
  border-color:var(--black);
  color:var(--black);
  background:transparent;
}
.btn-dark{
  background:var(--black);
  color:#fff;
}
.btn-orange{
  background:var(--orange);
  color:#fff;
}
.btn-block{width:100%;}

/* ---------- Header ---------- */
.site-header{
  position:fixed;
  top:0;left:50%;
  transform:translateX(-50%);
  width:100%;
  max-width:1440px;
  z-index:100;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:32px 80px 24px;
  background:#fff;
}
.logo img{width:146px;height:48px;}
.header-nav{display:flex;align-items:center;gap:12px;}

/* ---------- Hero ---------- */
.hero{
  position:relative;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  overflow:hidden;
  padding-top:clamp(112px, 12vh, 120px);
}
.hero-road{
  position:absolute;
  left:0;right:0;bottom:0;
  height:497px;
  z-index:0;
}
.hero-road img{width:100%;height:100%;object-fit:fill;}

.hero-inner{
  position:relative;
  z-index:1;
  max-width:558px;
  width:100%;
  padding:0 16px;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:24px;
}
.hero-title{
  font-family:'Sora', sans-serif;
  font-size:52px;
  font-weight:800;
  line-height:112%;
  letter-spacing:-2.08px;
  color:var(--dark);
}
.hero-title span{color:var(--yellow);}
.hero-subtitle{
  max-width:70%;
  margin:0 auto;
  font-size:16px;
  font-weight:500;
  line-height:151%;
  letter-spacing:-0.32px;
  color:var(--gray);
}
.hero-image{
  position:absolute;
  z-index:1;
  bottom:clamp(16px, 8vh, 96px);
  left:50%;
  transform:translateX(-50%);
  height:min(49%, 40vh);
  aspect-ratio:809/602;
  max-width:90vw;
}
.hero-image img{width:100%;height:100%;object-fit:contain;display:block;}
.store-badges{
  position:relative;
  z-index:1;
  margin-top:auto;
  margin-bottom:40px;
  display:flex;
  gap:16px;
  justify-content:center;
  align-self:flex-end;
  width:100%;
  padding:0 80px;
}
.badge-link{width:90px;height:26px;flex-shrink:0;}
.badge-link svg{width:100%;height:100%;display:block;}

/* ---------- Why iRaay ---------- */
.why-iraay{
  position:relative;
  padding:80px 16px 0;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:48px;
  overflow:hidden;
}
.section-title{
  font-size:44px;
  font-weight:800;
  line-height:112%;
  letter-spacing:-1.76px;
  text-align:center;
  color:var(--dark);
}

.why-row{
  width:100%;
  max-width:960px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:40px;
}
.why-row .why-copy{
  max-width:482px;
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:16px;
  text-align:left;
  padding-bottom:0;
}
.why-image{
  width:357px;
  flex-shrink:0;
}
.why-image img{width:100%;height:auto;display:block;}

.cards-row{
  width:100%;
  max-width:960px;
  display:flex;
  flex-wrap:wrap;
  gap:16px;
  justify-content:center;
  padding-bottom:80px;
}
.feature-card{
  position:relative;
  flex:1 1 300px;
  max-width:340px;
  aspect-ratio:.78;
  border-radius:14px;
  border:12.5px solid var(--off-white);
  background:#fff;
  overflow:hidden;
}
.card-glow{position:absolute;inset:0;overflow:hidden;}
.card-glow .blob{position:absolute;}
.feature-card:nth-child(1) .b1{width:74%;top:-22%;left:34%;}
.feature-card:nth-child(1) .b2{width:120%;top:29%;left:-51%;}
.feature-card:nth-child(2) .b1{width:96%;top:7%;left:19%;}
.feature-card:nth-child(2) .b2{width:124%;top:-43%;left:-72%;}
.feature-card:nth-child(3) .b1{width:74%;top:-20%;left:10%;}
.feature-card:nth-child(3) .b2{width:93%;top:50%;left:-6%;}

.card-glass{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:16px;
  padding:24px 16px 0;
  background:rgba(255,255,255,.2);
  backdrop-filter:blur(40px);
  -webkit-backdrop-filter:blur(40px);
}
.card-caption{
  font-family:'Poppins', sans-serif;
  font-size:15.5px;
  font-weight:500;
  letter-spacing:-0.02em;
  line-height:150%;
  text-align:center;
  max-width:90%;
}
.card-shot{
  flex:1;
  width:100%;
  border-radius:8px;
  overflow:hidden;
}
.card-shot img{width:100%;height:100%;object-fit:cover;}

.eyebrow{
  font-size:14px;
  font-weight:600;
  letter-spacing:0.64px;
  text-transform:uppercase;
  color:var(--gray);
}
.feature-headline{
  font-size:24px;
  font-weight:700;
  letter-spacing:-0.02em;
  line-height:139%;
  color:var(--dark);
}
.feature-body{
  font-size:16px;
  font-weight:600;
  letter-spacing:-0.02em;
  line-height:151%;
  color:var(--gray);
}

/* ---------- CTA ---------- */
.cta-section{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:52px;
  padding:80px 16px;
  flex-wrap:wrap;
}
.cta-image{width:271px;flex-shrink:0;}
.cta-image img{width:100%;height:auto;border-radius:14px;}
.cta-content{
  max-width:482px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:16px;
}
.cta-title{
  font-size:40px;
  font-weight:700;
  letter-spacing:-0.02em;
  line-height:127%;
  color:var(--dark);
}
.cta-body{
  font-size:16px;
  font-weight:400;
  letter-spacing:-0.02em;
  line-height:151%;
  color:var(--gray-2);
}
.cta-badges{
  display:flex;
  gap:16px;
  margin-top:8px;
}
.cta-badges .badge-link{width:90px;height:26px;}

/* ---------- Footer ---------- */
.site-footer{background:var(--off-white);}
.footer-top{
  max-width:1280px;
  margin:0 auto;
  padding:56px 80px 32px;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:40px;
  flex-wrap:wrap;
}
.footer-left{display:flex;flex-direction:column;align-items:flex-start;gap:32px;max-width:600px;}
.footer-brand{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.footer-wordmark{
  font-family:'Poppins', sans-serif;
  font-size:36px;
  font-weight:600;
  letter-spacing:-0.02em;
  color:var(--orange);
}
.footer-logo-mark{width:28px;height:36px;}
.footer-tagline{
  font-size:24px;
  font-weight:600;
  letter-spacing:-0.04em;
  color:var(--dark);
  margin-left:16px;
}

.footer-links{
  display:flex;
  align-items:center;
  gap:16px;
  flex-wrap:wrap;
}
.footer-links a{
  font-size:16px;
  font-weight:600;
  line-height:140%;
  color:#5d5d5d;
}
.footer-links a:hover{color:var(--dark);}
.footer-links .divider{width:1px;height:18px;background:#8c8c8c;display:inline-block;}

.footer-subscribe{width:100%;max-width:392px;flex-shrink:0;}
.footer-subscribe h3{
  font-size:20px;
  font-weight:700;
  letter-spacing:-0.02em;
  line-height:127%;
  color:var(--dark);
  margin-bottom:16px;
}
.footer-subscribe form{display:flex;flex-direction:column;gap:10px;}
.email-field{display:flex;flex-direction:column;gap:6px;}
.email-label{font-size:12px;font-weight:500;color:#888;}
.email-field input{
  height:44px;
  border-radius:10px;
  border:1px solid rgba(136,136,136,.1);
  background:rgba(187,187,187,.15);
  padding:0 14px;
  font-family:inherit;
  font-size:14px;
  color:#333;
}
.email-field input::placeholder{color:#999;}
.email-field input:focus{outline:2px solid var(--orange);outline-offset:1px;}
.footer-badges{display:flex;gap:10px;margin-top:4px;}
.footer-badges .badge-link{width:90px;height:26px;}

.footer-bottom{
  border-top:1px solid var(--border);
  padding:32px 80px;
  max-width:var(--max);
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:4px;
  flex-wrap:wrap;
}
.copyright, .designed-by{
  font-size:14px;
  line-height:140%;
  color:var(--gray);
}
.designed-by a{font-weight:600;color:var(--gray);}
.designed-by a:hover{color:var(--dark);}

/* ---------- Tablet ---------- */
@media (min-width:810px) and (max-width:1199.98px){
  .site-header{padding:28px 40px;}
  .hero-title{font-size:32px;}
  .hero-subtitle{font-size:14px;max-width:80%;}
  .hero-image{height:30%;aspect-ratio:809/602;bottom:167px;max-width:80vw;}
  .store-badges{padding:0 40px;}
  .section-title{font-size:32px;}
  .why-row{gap:24px;}
  .why-image{width:240px;}
  .card-caption{font-size:18.5px;}
  .cta-title{font-size:24px;}
  .cta-body{font-size:14px;}
  .footer-top{padding:48px 40px 24px;flex-direction:column;align-items:center;text-align:center;}
  .footer-left{align-items:center;}
  .footer-brand{justify-content:center;}
  .footer-tagline{margin-left:0;width:100%;text-align:center;}
  .footer-links{justify-content:center;}
  .footer-subscribe{max-width:400px;}
  .footer-bottom{padding:24px 40px;}
}

/* ---------- Mobile ---------- */
@media (max-width:809.98px){
  .site-header{padding:20px 16px;height:64px;}
  .logo img{width:110px;height:36px;}
  .btn{height:40px;padding:0 16px;font-size:14px;}

  .hero{padding-top:96px;}
  .hero-title{font-size:32px;letter-spacing:-1.28px;}
  .hero-subtitle{font-size:14px;max-width:100%;}
  .hero-road{height:328px;}
  .hero-image{width:48%;height:auto;aspect-ratio:809/602;max-width:none;bottom:83px;}
  .store-badges{padding:0 16px;margin-bottom:24px;}
  .badge-link{width:76px;height:22px;}

  .why-iraay{padding:48px 16px 0;gap:32px;}
  .section-title{font-size:28px;}
  .why-row{flex-direction:column;gap:24px;}
  .why-row .why-copy{align-items:center;text-align:center;max-width:100%;}
  .why-image{display:none;}
  .cards-row{gap:16px;padding-bottom:48px;}
  .feature-card{flex:1 1 100%;max-width:420px;aspect-ratio:.85;}
  .card-caption{font-size:18px;}
  .feature-headline{font-size:22px;}

  .cta-section{flex-direction:column;padding:48px 16px;gap:24px;}
  .cta-content{align-items:center;text-align:center;}
  .cta-title{font-size:26px;}
  .cta-badges{justify-content:center;}

  .footer-top{flex-direction:column;align-items:center;padding:40px 16px 24px;gap:32px;text-align:center;}
  .footer-left{align-items:center;}
  .footer-brand{justify-content:center;}
  .footer-tagline{margin-left:0;width:100%;text-align:center;}
  .footer-links{flex-direction:column;gap:12px;}
  .footer-links .divider{display:none;}
  .footer-subscribe{max-width:100%;}
  .footer-bottom{flex-direction:column;padding:24px 16px;gap:8px;}
}

/* ---------- Legal / content pages (About, Privacy, Terms, etc.) ---------- */
.site-header.static{position:static;transform:none;}

.legal-hero{
  padding:64px 80px 0;
  max-width:1200px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:24px;
  text-align:center;
}
.legal-hero .section-title{font-size:44px;}
.legal-hero-image{width:300px;}
.legal-hero-image img{width:100%;height:auto;display:block;}
.legal-hero-sub{
  font-size:24px;
  font-weight:700;
  letter-spacing:-0.02em;
  color:var(--dark);
}
.legal-hero-body{
  max-width:600px;
  font-size:16px;
  font-weight:500;
  line-height:151%;
  letter-spacing:-0.02em;
  color:var(--gray);
}

.page-header{
  padding:56px 80px 0;
  max-width:1200px;
  margin:0 auto;
}
.page-header h1{
  font-size:44px;
  font-weight:800;
  letter-spacing:-0.02em;
  color:var(--dark);
}

.page-content{
  max-width:1200px;
  margin:0 auto;
  padding:40px 80px 96px;
  display:flex;
  flex-direction:column;
  gap:32px;
}
.content-block{display:flex;flex-direction:column;gap:12px;}
.content-block h2{
  font-size:22px;
  font-weight:700;
  color:#000;
}
.content-block h3{
  font-size:16px;
  font-weight:600;
  color:#000;
  margin-top:4px;
}
.content-block p{
  font-size:16px;
  font-weight:400;
  line-height:140%;
  color:#333;
}
.content-block ul{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding-left:20px;
}
.content-block li{
  font-size:16px;
  line-height:140%;
  color:#333;
  list-style:disc;
}
.content-block a{color:var(--orange);text-decoration:underline;}

@media (max-width:809.98px){
  .legal-hero{padding:40px 16px 0;}
  .legal-hero .section-title{font-size:28px;}
  .legal-hero-image{width:220px;}
  .page-header{padding:40px 16px 0;}
  .page-header h1{font-size:28px;}
  .page-content{padding:24px 16px 64px;gap:24px;}
}
@media (min-width:810px) and (max-width:1199.98px){
  .legal-hero{padding:48px 40px 0;}
  .page-header{padding:48px 40px 0;}
  .page-content{padding:32px 40px 80px;}
}