/* ==========================================================================
   OFFNEXA WEBSITE STYLES
   --------------------------------------------------------------------------
    1. Variables        7. Section titles     13. Steps
    2. Base             8. Cards              14. FAQ
    3. Buttons          9. Stats              15. Demo form
    4. Navbar          10. About + roles      16. Footer
    5. Hero            11. Stock section      17. Responsive
    6. 3D scene        12. Why cards          18. Scroll reveal (keep LAST)
   ========================================================================== */


/* 1. VARIABLES -------------------------------------------------------- */
:root {
   --navy:   #0B1340;
   --ink:    #1E2B7A;
   --blue:   #4A6BF0;
   --cyan:   #58C9F5;
   --violet: #9B59F5;
   --bg:     #F5F7FF;
   --text:   #2B3358;
   --muted:  #6B76A0;

   --line: #E3E8FB;                                           /* light card border */
   --grad: linear-gradient(135deg, var(--blue), var(--violet)); /* main brand gradient */
}


/* 2. BASE ------------------------------------------------------------- */
* {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
}

html { scroll-behavior: smooth; }

body {
   font-family: 'Poppins', sans-serif;
   color: var(--text);
   background: var(--bg);
   line-height: 1.6;
   overflow-x: hidden;
}

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

section { padding: 96px 0; }
.alt    { background: #fff; }                              /* white section */
.wrap   { width: min(1160px, 92%); margin: 0 auto; }       /* centered container */

/* 3. BUTTONS ---------------------------------------------------------- */
.btn {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   padding: 12px 26px;
   border: 0;
   border-radius: 999px;
   font: 600 14px 'Poppins', sans-serif;
   cursor: pointer;
   transition: transform .2s, box-shadow .2s;
}
.btn:hover { transform: translateY(-2px); }

.btn-main {
   background: var(--grad);
   color: #fff;
   box-shadow: 0 10px 28px rgba(91, 90, 240, .45);
}
.btn-glass {
   background: rgba(255, 255, 255, .12);
   color: #fff;
   border: 1px solid rgba(255, 255, 255, .35);
   backdrop-filter: blur(8px);
}
.btn-sm { padding: 9px 20px; font-size: 13px; }


/* 4. NAVBAR ----------------------------------------------------------- */
.nav {
   position: fixed;
   top: 0; left: 0; right: 0;
   z-index: 50;
   background: rgba(11, 19, 64, .35);
   backdrop-filter: blur(14px);
   -webkit-backdrop-filter: blur(14px);
   border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.nav .wrap {
   display: flex;
   align-items: center;
   justify-content: space-between;
   height: 72px;
}
.nav .logo { display: flex; align-items: center; }
.nav .logo img {
   height: 64px;
   width: auto;
   display: block;
   margin: 0 28px 0 0;
   background: transparent;
   border-radius: 0;
   padding: 0;
}
.nav ul { display: flex; gap: 30px; list-style: none; }
.nav ul a {
   color: rgba(255, 255, 255, .85);
   font-size: 14px;
   font-weight: 500;
   transition: color .2s;
}
.nav ul a:hover { color: var(--cyan); }
.nav-actions { display: flex; align-items: center; gap: 12px; }


/* 5. HERO ------------------------------------------------------------- */
.hero {
   position: relative;
   min-height: 100vh;
   display: flex;
   align-items: center;
   padding: 120px 0 70px;
   overflow: hidden;
   color: #fff;
}
/* background image + blur come from variables set in the Blade view */
.hero-bg {
   position: absolute;
   inset: -40px;
   background: var(--hero-img) center / cover no-repeat;
   filter: blur(var(--hero-blur, 0px));
   transform: scale(1.08);
   z-index: 0;
}
/* dark colour overlay */
.hero::before {
   content: "";
   position: absolute;
   inset: 0;
   z-index: 1;
   background: linear-gradient(120deg, rgba(11, 19, 64, .78), rgba(30, 43, 122, .56) 55%, rgba(74, 107, 240, .28));
}
.hero .wrap {
   position: relative;
   z-index: 2;
   display: grid;
   grid-template-columns: 1.05fr .95fr;
   align-items: center;
   gap: 30px;
}
.eyebrow {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   padding: 6px 16px;
   border-radius: 999px;
   background: rgba(255, 255, 255, .12);
   border: 1px solid rgba(255, 255, 255, .25);
   font-size: 12px;
   letter-spacing: .12em;
   text-transform: uppercase;
   color: var(--cyan);
}
.hero h1 {
   font-size: clamp(34px, 5vw, 58px);
   line-height: 1.12;
   font-weight: 700;
   margin: 20px 0 18px;
}
.hero h1 span { background: linear-gradient(90deg, var(--cyan), #C9A6FF); }
.hero p.lead {
   font-size: 17px;
   color: rgba(255, 255, 255, .78);
   max-width: 520px;
}
.cta   { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }
.facts { display: flex; flex-wrap: wrap; gap: 34px; margin-top: 44px; }
.facts b     { display: block; font-size: 24px; }
.facts small { color: rgba(255, 255, 255, .65); font-size: 12px; letter-spacing: .06em; }


/* glowing blobs (round, soft-colour circles behind content) */
.hero::after,
.demo::before,
.stage::before {
   content: "";
   position: absolute;
   border-radius: 50%;
}
.hero::after {
   width: 520px; height: 520px;
   right: -120px; top: -120px;
   background: radial-gradient(circle, rgba(155, 89, 245, .55), transparent 68%);
   z-index: 1;
}


/* 6. 3D SCENE (image + tilt + float) ---------------------------------- */
.scene {
   position: relative;
   height: 470px;
   display: grid;
   place-items: center;
}
.tilt {
   position: relative;
   width: 100%;
   max-width: 580px;
   perspective: 1000px;
   touch-action: pan-y;
   cursor: grab;
   user-select: none;
   -webkit-user-select: none;
}
.tilt.grab { cursor: grabbing; }
.tilt-in {
   position: relative;
   transform-style: preserve-3d;
   transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
   will-change: transform;
}
/* floor shadow under the image */
.tilt-in::after {
   content: "";
   position: absolute;
   left: 14%; right: 14%; bottom: -4%;
   height: 8%;
   border-radius: 50%;
   background: radial-gradient(ellipse, rgba(5, 10, 50, .38), transparent 70%);
   filter: blur(8px);
   transform: translateZ(-60px) translateX(calc(var(--ry, 0deg) * -1.2));
   z-index: 0;
   animation: shadow 6s ease-in-out infinite;
}
.iso-img {
   position: relative;
   z-index: 1;
   display: block;
   width: 100%;
   height: auto;
   pointer-events: none;
   -webkit-user-drag: none;
   filter: drop-shadow(0 26px 30px rgba(5, 10, 50, .35));
   animation: float 6s ease-in-out infinite;
   transform: translateZ(40px);
}

/* floating chips around the image */
.chip {
   position: absolute;
   display: flex;
   align-items: center;
   gap: 10px;
   padding: 10px 16px;
   border-radius: 14px;
   background: rgba(255, 255, 255, .16);
   border: 1px solid rgba(255, 255, 255, .35);
   backdrop-filter: blur(12px);
   font-size: 13px;
   font-weight: 500;
   box-shadow: 0 14px 30px rgba(5, 10, 50, .3);
   animation: bob 5s ease-in-out infinite;
}
.chip i { color: var(--cyan); font-size: 18px; }
.c1 { top: 40px;    left: 0; }
.c2 { bottom: 70px; left: 20px; animation-delay: -2s; }
.c3 { top: 120px;   right: 0;   animation-delay: -3.5s; }

@keyframes float  { 0%, 100% { transform: translateZ(40px) translateY(0) rotateY(-2deg); }
                    50%      { transform: translateZ(70px) translateY(-14px) rotateY(2deg); } }
@keyframes shadow { 0%, 100% { opacity: 1;  scale: 1; }
                    50%      { opacity: .6; scale: .9; } }
@keyframes bob    { 0%, 100% { margin-top: 0; }
                    50%      { margin-top: -18px; } }

/* respect "reduce motion" system setting */
@media (prefers-reduced-motion: reduce) {
   .iso-img, .tilt-in::after, .chip { animation: none; }
}


/* 7. SECTION TITLES (kicker + h2 + text) ------------------------------ */
.head {
   text-align: center;
   max-width: 620px;
   margin: 0 auto 54px;
}
.head h2 {
   font-size: clamp(26px, 3.4vw, 38px);
   color: var(--navy);
   margin: 10px 0;
   line-height: 1.2;
}

/* small uppercase label above a title (shared by 3 sections) */
.head small,
.about small.k,
.split small.k {
   color: var(--blue);
   font-weight: 600;
   letter-spacing: .14em;
   text-transform: uppercase;
   font-size: 12px;
}

/* grey paragraph text */
.head p,
.about p,
.split p { color: var(--muted); }


/* 8. CARDS (modules) -------------------------------------------------- */
.grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 24px;
   perspective: 1000px;
}
.card {
   background: #fff;
   border: 1px solid var(--line);
   border-radius: 22px;
   padding: 30px 26px;
   box-shadow: 0 6px 20px rgba(30, 43, 122, .05);
   transition: transform .35s, box-shadow .35s;
}
.card:hover {
   transform: rotateX(5deg) rotateY(-5deg) translateY(-8px);
   box-shadow: 0 26px 46px rgba(74, 107, 240, .22);
}
.card h3 { font-size: 18px; }

/* round icon box */
.ico {
   width: 54px; height: 54px;
   border-radius: 16px;
   display: grid;
   place-items: center;
   font-size: 24px;
   color: #fff;
   margin-bottom: 18px;
   background: var(--grad);
   box-shadow: 0 10px 20px rgba(91, 90, 240, .3);
}
.card:nth-child(even) .ico { background: linear-gradient(135deg, var(--cyan), var(--blue)); }

/* module chips row */
.chips {
   display: flex;
   flex-wrap: wrap;
   gap: 10px;
   justify-content: center;
   margin-top: 46px;
}
.chips span {
   padding: 8px 16px;
   border-radius: 999px;
   background: #fff;
   border: 1px solid var(--line);
   font-size: 13px;
   color: var(--ink);
   font-weight: 500;
}


/* 9. STATS ------------------------------------------------------------ */
.stats {
   padding: 0;
   margin-top: -48px;
   position: relative;
   z-index: 3;
}
.stats .box {
   background: #fff;
   border-radius: 24px;
   box-shadow: 0 24px 50px rgba(30, 43, 122, .14);
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   padding: 30px 16px;
   text-align: center;
}
.stats b {
   display: block;
   font-size: 36px;
   line-height: 1.2;
   background: linear-gradient(135deg, var(--ink), var(--violet));
}
.stats small { color: var(--muted); font-size: 12px; letter-spacing: .08em; }


/* 10. ABOUT + ROLES --------------------------------------------------- */
.about {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 60px;
   align-items: center;
}
.about h2 {
   font-size: clamp(26px, 3.2vw, 36px);
   color: var(--navy);
   margin: 10px 0 14px;
   line-height: 1.2;
}

/* tick list (used in About and Stock) */
.ticks {
   list-style: none;
   display: grid;
   gap: 12px;
   margin: 22px 0 28px;
   font-size: 14.5px;
}
.ticks i { color: var(--blue); margin-right: 10px; }

/* role cards */
.roles { display: grid; gap: 16px; perspective: 900px; }
.role {
   display: flex;
   gap: 16px;
   align-items: center;
   background: #fff;
   border: 1px solid var(--line);
   border-radius: 20px;
   padding: 20px 24px;
   box-shadow: 0 16px 34px rgba(30, 43, 122, .10);
   transform: rotateY(-9deg) translateX(var(--x, 0px));
   transition: transform .35s;
}
.role:hover { transform: rotateY(0) translateX(0); }
.role .ico  { margin: 0; flex: 0 0 auto; }
.role h4    { color: var(--navy); font-size: 16px; }
.role p     { font-size: 13px; }

/* 3-column flat variant used on the home page */
.roles.r3 {
   grid-template-columns: repeat(3, 1fr);
   margin-top: 44px;
   perspective: none;
}
.roles.r3 .role { transform: none; }


/* 11. STOCK SECTION (image box + text) -------------------------------- */
.stage {
   position: relative;
   border-radius: 30px;
   padding: 28px 18px;
   background: linear-gradient(135deg, #FFFFFF, #EAEFFF);
   border: 1px solid var(--line);
   display: grid;
   place-items: center;
   overflow: hidden;
   box-shadow: 0 30px 60px rgba(30, 43, 122, .14);
}
.stage::before {
   width: 360px; height: 360px;
   right: -90px; top: -110px;
   background: radial-gradient(circle, rgba(155, 89, 245, .25), transparent 70%);
}
.stage .tilt    { max-width: 520px; }
.stage .iso-img { filter: drop-shadow(0 22px 22px rgba(30, 43, 122, .25)); }

.split {
   display: grid;
   grid-template-columns: 1.05fr .95fr;
   gap: 54px;
   align-items: center;
   margin-top: 84px;
}
.split h2 {
   font-size: clamp(24px, 3vw, 34px);
   color: var(--navy);
   margin: 10px 0 14px;
   line-height: 1.2;
}


/* 12. WHY CARDS ------------------------------------------------------- */
.why {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 22px;
}
.why > div {
   background: #fff;
   border: 1px solid var(--line);
   border-radius: 22px;
   padding: 28px 24px;
}
.why span {
   display: block;
   font-size: 40px;
   font-weight: 700;
   line-height: 1;
   background: linear-gradient(135deg, var(--cyan), var(--violet));
   margin-bottom: 14px;
}
.why h3 { font-size: 17px; }


/* 13. STEPS ----------------------------------------------------------- */
.steps {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 26px;
}
.step { text-align: center; padding: 10px 18px; }
.step .n {
   width: 64px; height: 64px;
   margin: 0 auto 16px;
   border-radius: 50%;
   display: grid;
   place-items: center;
   font-size: 24px;
   font-weight: 700;
   color: #fff;
   background: var(--grad);
   box-shadow: 0 12px 26px rgba(91, 90, 240, .35);
}
.step h3 { font-size: 18px; }

/* shared by Card, Why and Step */
.card h3,
.why h3,
.step h3 { color: var(--navy); margin-bottom: 6px; }

.card p,
.why p,
.step p { font-size: 14px; color: var(--muted); }


/* 14. FAQ ------------------------------------------------------------- */
.faq { max-width: 780px; margin: 0 auto; }
.faq details {
   background: #fff;
   border: 1px solid var(--line);
   border-radius: 16px;
   padding: 18px 24px;
   margin-bottom: 12px;
}
.faq summary {
   cursor: pointer;
   font-weight: 600;
   color: var(--navy);
   list-style: none;
   display: flex;
   justify-content: space-between;
   gap: 16px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--blue); font-size: 22px; line-height: 1; }
.faq details[open] summary::after { content: "\2013"; }   /* "–" when open */
.faq details p { margin-top: 12px; color: var(--muted); font-size: 14.5px; }


/* 15. DEMO + FORM ----------------------------------------------------- */
#demo { padding-top: 20px; }
.demo {
   position: relative;
   overflow: hidden;
   border-radius: 34px;
   padding: 56px;
   color: #fff;
   display: grid;
   grid-template-columns: .9fr 1.1fr;
   gap: 48px;
   background: linear-gradient(135deg, var(--navy), var(--ink));
}
.demo::before {
   width: 420px; height: 420px;
   left: -140px; bottom: -160px;
   background: radial-gradient(circle, rgba(88, 201, 245, .4), transparent 70%);
}
.demo > * { position: relative; }
.demo h2 {
   font-size: clamp(26px, 3.2vw, 36px);
   line-height: 1.2;
   margin-bottom: 14px;
}
.demo p  { color: rgba(255, 255, 255, .75); }
.demo ul { list-style: none; margin-top: 26px; display: grid; gap: 12px; font-size: 14px; }
.demo li i { color: var(--cyan); margin-right: 10px; }

/* form box */
form {
   background: rgba(255, 255, 255, .1);
   border: 1px solid rgba(255, 255, 255, .22);
   backdrop-filter: blur(14px);
   border-radius: 24px;
   padding: 28px;
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 14px;
}
form .full { grid-column: 1 / -1; }
label.f {
   display: block;
   font-size: 12px;
   letter-spacing: .05em;
   color: rgba(255, 255, 255, .7);
   margin-bottom: 6px;
}

/* inputs, textarea and the country select share one look */
input[type=text], input[type=email], input[type=tel], input[type=date], textarea,
.phone-grp select {
   border-radius: 12px;
   border: 1px solid rgba(255, 255, 255, .25);
   background: rgba(255, 255, 255, .92);
   font: 14px 'Poppins', sans-serif;
   color: var(--navy);
   outline: none;
}
input[type=text], input[type=email], input[type=tel], input[type=date], textarea {
   width: 100%;
   padding: 12px 14px;
}
input:focus, textarea:focus {
   border-color: var(--cyan);
   box-shadow: 0 0 0 3px rgba(88, 201, 245, .35);
}
textarea { resize: vertical; min-height: 84px; }

/* phone = country select + number input */
.phone-grp { display: flex; gap: 8px; }
.phone-grp select {
   flex: 0 0 44%;
   max-width: 44%;
   padding: 12px 10px;
   text-overflow: ellipsis;
}
.phone-grp input { flex: 1 1 auto; min-width: 0; }

/* time slot radio buttons */
.slots { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.slot input { display: none; }
.slot span {
   display: block;
   text-align: center;
   padding: 10px 4px;
   border-radius: 12px;
   font-size: 12px;
   cursor: pointer;
   border: 1px solid rgba(255, 255, 255, .3);
   background: rgba(255, 255, 255, .08);
   transition: .2s;
}
.slot input:checked + span {
   background: var(--grad);
   border-color: transparent;
   font-weight: 600;
}

/* validation + result messages */
.ferr { display: none; margin-top: 5px; font-size: 12px; color: #FCA5A5; font-weight: 500; }
.ferr.show { display: block; }
input.is-bad, textarea.is-bad {
   border-color: #EF4444 !important;
   box-shadow: 0 0 0 3px rgba(239, 68, 68, .25);
}
input.is-good { border-color: #22C55E !important; }

#demoMsg {
   padding: 12px 14px;
   border-radius: 12px;
   font-size: 14px;
   font-weight: 500;
   text-align: center;
}
#demoMsg.ok  { background: rgba(34, 197, 94, .18); border: 1px solid rgba(134, 239, 172, .6); color: #DCFCE7; }
#demoMsg.bad { background: rgba(239, 68, 68, .2);  border: 1px solid rgba(252, 165, 165, .6); color: #FEE2E2; }
.note { font-size: 12px; color: rgba(255, 255, 255, .6); text-align: center; }



/* OTP step (step 1 of the demo booking) ------------------------------- */
.demo-right { display: grid; align-content: start; }

.step-tag {
   display: inline-block;
   font-size: 11px;
   font-weight: 600;
   letter-spacing: .08em;
   text-transform: uppercase;
   padding: 4px 12px;
   border-radius: 999px;
   color: var(--cyan);
   background: rgba(88, 201, 245, .15);
   border: 1px solid rgba(88, 201, 245, .35);
   justify-self: start;
}

.otp-step {
   background: rgba(255, 255, 255, .1);
   border: 1px solid rgba(255, 255, 255, .22);
   backdrop-filter: blur(14px);
   border-radius: 24px;
   padding: 28px;
   display: grid;
   gap: 14px;
}
.otp-step h3 { font-size: 22px; line-height: 1.2; }
.otp-step p  { font-size: 13px; }
.otp-step input {
   width: 100%;
   padding: 12px 14px;
   border-radius: 12px;
   border: 1px solid rgba(255, 255, 255, .25);
   background: rgba(255, 255, 255, .92);
   font: 14px 'Poppins', sans-serif;
   color: var(--navy);
   outline: none;
}
.otp-step input[readonly] { background: rgba(255, 255, 255, .6); }

.otp-btn { width: 100%; justify-content: center; }
.otp-btn:disabled { opacity: .6; cursor: not-allowed; transform: none; }

.otp-code-row { display: grid; gap: 10px; }
#otpCode { letter-spacing: .5em; text-align: center; font-size: 20px; font-weight: 600; }

.otp-link {
   background: none;
   border: 0;
   color: rgba(255, 255, 255, .75);
   font: 13px 'Poppins', sans-serif;
   text-decoration: underline;
   cursor: pointer;
   justify-self: center;
}
.otp-link:hover { color: #fff; }

#otpMsg { padding: 10px 14px; border-radius: 12px; font-size: 13px; }
#otpMsg.ok  { background: rgba(34, 197, 94, .18); border: 1px solid rgba(134, 239, 172, .6); color: #DCFCE7; }
#otpMsg.bad { background: rgba(239, 68, 68, .2);  border: 1px solid rgba(252, 165, 165, .6); color: #FEE2E2; }

/* verified email field in the form */
#demoEmail[readonly] { background: rgba(220, 252, 231, .9); cursor: not-allowed; }


/* 16. FOOTER ---------------------------------------------------------- */
footer { padding: 34px 0 44px; text-align: center; color: var(--muted); font-size: 13px; }
footer a { color: var(--blue); }


/* 17. RESPONSIVE ------------------------------------------------------ */
/* tablet and below */
@media (max-width: 960px) {
   .nav ul { display: none; }
   .hero .wrap, .demo { grid-template-columns: 1fr; }
   .demo { padding: 36px 24px; }
   .scene { height: 400px; transform: scale(.8); }
   .grid { grid-template-columns: 1fr 1fr; }
   .about { grid-template-columns: 1fr; gap: 36px; }
   .why { grid-template-columns: 1fr 1fr; }
   .stats .box { grid-template-columns: 1fr 1fr; row-gap: 22px; }
   .split { grid-template-columns: 1fr; gap: 34px; }
   .roles.r3 { grid-template-columns: 1fr; }
}

/* phone */
@media (max-width: 600px) {
   .nav .logo img { height: 52px; margin-right: 12px; }
   .nav .btn-glass { display: none; }
   .grid, .why, .steps, form { grid-template-columns: 1fr; }
   .slots { grid-template-columns: 1fr 1fr; }
   .role { transform: none; }
}


/* 18. SCROLL REVEAL (keep LAST so it wins over .card / .role transforms) */
.rv { opacity: 0; transform: translateY(26px); transition: opacity .7s, transform .7s; }
.rv.in { opacity: 1; transform: none; }


/* 19. GRADIENT TEXT (must stay at the very bottom: the shorthand "background"
   used above would otherwise reset background-clip and show solid boxes) */
.hero h1 span,
.stats b,
.why span {
   -webkit-background-clip: text;
   background-clip: text;
   -webkit-text-fill-color: transparent;
   color: transparent;
}