/* Luxury accents (still within Nexulorum palette) */
.lux-border{position:relative;}
.lux-border:before{
  content:"";
  position:absolute;inset:-1px;
  border-radius: inherit;
  background: linear-gradient(135deg, #00ffa855, #00d9ff35, #8b3dff35, #ff2e5530);
  opacity:.85;
  pointer-events:none;
  padding:1px;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
}
.lux-sheen{position:relative;overflow:hidden;}
.lux-sheen:after{
  content:"";
  position:absolute;top:-40%;left:-60%;
  width:60%;height:180%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.10), transparent);
  transform: rotate(18deg);
  opacity:0;
  transition: opacity .25s ease, transform .6s ease;
  pointer-events:none;
}
.lux-sheen:hover:after{opacity:.65;transform: translateX(220%) rotate(18deg);}
.hero{
  position:relative;
  padding:116px 0 104px;
}
.hero__fx{
  position:absolute;inset:-40px 0 0 0;
  width:100%;height:100%;
  opacity:.6;
  pointer-events:none;
}
.hero__fade{
  position:absolute;left:0;right:0;bottom:-1px;height:110px;
  background: linear-gradient(180deg, transparent, var(--bg-dark));
}
.hero__grid{
  
  margin:0 auto;
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap:26px;
  align-items:stretch;
  position:relative;
  z-index:1;
}

.hero{ overflow: clip; } /* or overflow:hidden; */
.hero { overflow: hidden; } /* use hidden for broad support */



.headline{
  margin:0;
  font-size: clamp(2.2rem, 3.2vw + 1rem, 3.6rem);
  line-height: 1.02;
  letter-spacing:-0.8px;
  margin-left: 6rem;
  margin-top: 9.5rem;
}
.glow{
  background: linear-gradient(90deg, var(--green), var(--teal), var(--purple));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow: 0 0 26px rgba(0,255,168,.10), 0 0 36px rgba(0,217,255,.08);
}

.subhead{
  margin:0;
  color:var(--text-light-soft);
  font-size:1.05rem;
  line-height:1.6;
  max-width: 60ch;
  margin-left: 6rem;
}
.cta{display:flex;gap:12px;flex-wrap: nowrap;margin-top:18px; margin-left: 10rem;}

.hero-badge {
  margin: 16px 0 0 10rem;
  color: var(--neon-green);
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}

@media (max-width: 1024px) {
  .hero-badge {
    margin-left: 0;
  }
}

.panel{
  height:100%;
  border-radius: var(--radius);
  border:1px solid var(--text-dark);
  background: linear-gradient(180deg, #121624f2, #0f1218b0);
  box-shadow: var(--shadow-soft);
  padding:18px;
  position:relative;
  overflow:hidden;
  margin-right: 4.5rem;
  
  
}
.panel:before{
  content:"";
  position:absolute;inset:-2px;
  background:
    radial-gradient(700px 360px at 30% 20%, rgba(0,255,168,.16), transparent 55%),
    radial-gradient(700px 360px at 70% 80%, rgba(0,217,255,.12), transparent 55%),
    radial-gradient(700px 360px at 80% 10%, rgba(139,61,255,.11), transparent 55%);
  pointer-events:none;
}
.panel>*{position:relative;z-index:1}
.panel__top{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.chip{
  padding:8px 10px;
  border-radius: 999px;
  border:1px solid #8b3dff38;
  background:#8b3dff18;
  color:#e9efff;
  font-weight:800;
  letter-spacing:.2px;
  font-size:.86rem;
}
.chip--green{border-color:#00ffa84a;background:#00ffa814}
.chip--teal{border-color:#00d9ff4a;background:#00d9ff14}

.panel__stat-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:10px;
}
.stat{
  border:1px solid var(--text-dark);
  background:#0b0d1080;
  border-radius: 18px;
  padding:14px;
}
.stat__num{
  font-size:1.35rem;
  font-weight:900;
  letter-spacing:-.3px;
}
.stat__label{color:var(--text-light-soft);font-weight:700;margin-top:4px}

.codebox{
  margin-top:12px;
  border-radius: 18px;
  border:1px solid #00ffa83a;
  background: linear-gradient(180deg, #06110f9a, #071018a8);
  overflow:hidden;
}
.codebox__bar{
  display:flex;align-items:center;gap:8px;
  padding:10px 12px;
  border-bottom:1px solid #ffffff12;
  color:var(--text-light-soft);
  font-family:"JetBrains Mono", ui-monospace, monospace;
  font-weight:700;
  font-size:.86rem;
}
.dot{width:10px;height:10px;border-radius:999px;background:#ffffff24;display:inline-block}
.codebox__title{margin-left:auto;opacity:.9}
.codebox__pre{
  margin:0;
  padding:12px;
  font-family:"JetBrains Mono", ui-monospace, monospace;
  color:#dffdf0;
  font-size:.92rem;
  line-height:1.45;
  overflow:auto;
}


/* hero mobile readiness */

@media (max-width: 900px) {
  .hero {
    padding: 92px 0 76px;
  }

  .hero__grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .hero__left {
    width: 100%;
  }

  .headline {
    margin: 0 0 18px;
    font-size: clamp(2.2rem, 10vw, 3.4rem);
    line-height: 1.02;
    text-align: left;
  }

  .subhead {
    margin: 0 0 22px;
    max-width: none;
    font-size: 1rem;
    line-height: 1.75;
    text-align: left;
  }
.cta{
  margin-left: 0;
}

  .cta .hex-btn {
    width: 100%;
    justify-content: center;
  }

  .hero__right {
    display: none;
  }

  .hero__fade {
    height: 70px;
  }
}

@media (max-width: 1024px) {
  .hero {
    padding: 88px 0 72px;
  }

  .hero__grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .hero__right {
    display: none;
  }

  .hero__left {
    max-width: 760px;
  }

  .headline {
    margin: 0 0 18px;
    font-size: clamp(2.4rem, 7vw, 4rem);
    line-height: 1.02;
    max-width: 12ch;
  }

  .subhead {
    margin: 0 0 22px;
    max-width: 52ch;
    font-size: 1rem;
    line-height: 1.75;
  }

  .cta{
    margin-left: 0;
  }

  .cta .hex-btn {
    width: min(100%, 520px);
    justify-content: center;
  }
}


@media (max-width: 640px) {
  .headline {
    font-size: clamp(2.1rem, 10vw, 3.2rem);
    max-width: 100%;
  }

  .subhead {
    max-width: 100%;
  }

  .cta {
    max-width: 100%;
    align-items: stretch;
  }

  .cta .hex-btn {
    width: 100%;
  }
}


/*value building section*/
.value-section {
  padding: 110px 0;
  background: var(--bg-soft);
}

.value-wrap {
  max-width: 1120px;
  margin: 0 auto;
}



/* HEADLINE */
.value-heading {
  font-size: clamp(4rem, 4vw, 4rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: #1f2333;
  margin-bottom: 50px;
}
.value-wrap {
  max-width: 1120px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}

/* headline shifted LEFT inside container */
.value-heading {
  max-width: 700px;
  align-self: flex-start;
  margin-bottom: 50px;
  
}

/* paragraph shifted RIGHT inside container */
.value-text {
  max-width: 640px;
  align-self: flex-end;
  text-align: left;
}

/* Indent the middle line */
.value-heading .indent {
  display: inline-block;
  transform: translateX(110px);
}

@media (max-width: 768px) {
  .value-heading .indent {
    transform: none;
  }
  .value-heading {
    transform: none;
  }
}

/* Highlight word (color later) */
.value-heading .highlight {
  color: var(--purple-dark); 
}

/* PARAGRAPH */
.value-text {
  max-width: 700px;
  margin: 0 auto; 
  text-align: center;

  font-size: 1.05rem;
  line-height: 1.8;
  color: #5e6473;
  margin-bottom: 50px;
}

@media (max-width: 768px) {
  .value-section {
    padding: 84px 0;
  }

  .value-heading {
    font-size: clamp(2.3rem, 9vw, 3.2rem);
    text-align: left;
  }

  .value-heading .indent {
    margin-left: 0;
  }

  .value-text {
    text-align: left;
    max-width: none;
    margin-bottom: 0;
    font-size: 1rem;
    line-height: 1.75;
  }
}
/*pricing card section */
.pricing-preview {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  margin-top: 46px;
}

.pricing-card {
  position: relative;
  padding: 30px 26px;
  border-radius: 22px;
  background: #ffffff;
  border: 1px solid rgba(31, 35, 51, 0.1);
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.08);
  color: #1f2333;
  transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
}
.pricing-card:hover {
  transform: translateY(-8px);
  border-color: rgba(69, 178, 102, 0.35);
  box-shadow:
    0 34px 80px rgba(15, 23, 42, 0.14),
    0 0 45px rgba(69, 178, 102, 0.16);
}

.pricing-card--featured {
  border-color: rgba(31, 35, 51, 0.1);
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.08);
}

.pricing-card h3 {
  margin: 0 0 14px;
  font-size: 1.35rem;
  color: #1f2333;
}

.pricing-desc {
  margin: 0 0 18px;
  color: #5e6473;
  line-height: 1.7;
  font-size: 0.98rem;
}

.pricing-card ul {
  margin: 0 0 24px;
  padding-left: 18px;
  color: #3f4656;
  line-height: 1.7;
}

.pricing-card li::marker {
  color: #45b266;
}

.pricing-card__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 18px;
  border-radius: 999px;
  background: linear-gradient(135deg, #45b266, #2fd6c4);
  color: #07100c;
  font-weight: 800;
  text-decoration: none;
}

.pricing-card__btn:hover {
  transform: translateY(-2px);
}

@media (max-width: 900px) {
  .pricing-preview {
    grid-template-columns: 1fr;
  }
}


/*services section*/
.container--services{
  width: min(1520px, 92vw);
  margin: 0 auto;
}
.services-section {
  position: relative;
  overflow: hidden;
  padding: 110px 0;
  background:
    linear-gradient(
      90deg,
      rgba(111, 91, 211, 0.14) 0%,
      rgba(111, 91, 211, 0.05) 18%,
      transparent 34%,
      transparent 66%,
      rgba(0, 217, 255, 0.05) 82%,
      rgba(69, 178, 102, 0.12) 100%
    ),
    linear-gradient(180deg, var(--bg-dark), #08101d 55%, var(--bg-dark-2));
}

.services-section::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(700px 500px at 10% 8%, rgba(111, 91, 211, 0.16), transparent 60%),
    radial-gradient(850px 540px at 88% 54%, rgba(69, 178, 102, 0.10), transparent 62%),
    radial-gradient(650px 420px at 78% 86%, rgba(0, 217, 255, 0.08), transparent 60%);
  opacity: 0.9;
}

.container--services,
.service-block,
.service-block-reverse {
  position: relative;
  z-index: 1;
}


.service-block {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: center;
  gap: 72px;
  padding: 72px 0;
}

.service-block + .service-block {
  border-top: 1px solid rgba(31, 35, 51, 0.08);
}

.service-block-reverse .service-content {
  order: 2;
}

.service-block-reverse .service-visual {
  order: 1;
}

/* normal blocks: glow near heading/content side */


.service-content h3 {
  margin: 0 0 18px;
  font-size: clamp(2rem, 3.4vw, 4rem);
  line-height: 0.96;
  letter-spacing: -0.045em;
  color: var(--text-light);
}

.service-content p {
  max-width: 560px;
  margin: 0 0 30px;
  font-size: 1.06rem;
  line-height: 1.85;
  color: var(--text-light-soft);
}

.service-list-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(180px, 1fr));
  gap: 18px 34px;
  margin-bottom: 34px;
}

.service-list-grid ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.service-list-grid li {
  position: relative;
  padding-left: 18px;
  margin-bottom: 14px;
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.45;
  text-transform: uppercase;
  color: var(--text-light);
}

.service-list-grid li::before {
  content: "";
  position: absolute;
  top: 0.62em;
  left: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
}

.service-visual {
  display: flex;
  align-items: center;
  justify-content: center;
}

.service-visual img {
  display: block;
  width: 100%;
  max-width: 500px;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 18px 40px rgba(31, 35, 51, 0.08));
}


/* =========================
   SERVICES STAGGER SYSTEM
   ========================= */

/* headings stagger separately */
.service-block .service-content h3 {
  margin-left: 6.5rem;
}

.service-block-reverse .service-content h3 {
  margin-left: -3rem;
}

/* body group moves together */
.service-body {
  max-width: 560px;
  display: flex;
  flex-direction: column;
}

.service-block .service-body {
  margin-left: -1.5rem;
}

.service-block-reverse .service-body {
  margin-left: 3rem;
}

/* paragraph + list stay aligned inside body */
.service-body p,
.service-body .service-list-grid {
  width: 100%;
  max-width: none;
  margin-left: 0;
}

/* button composition */
.service-btn-row {
  display: flex;
  margin-top: 1.75rem;
}

.service-block .service-btn-row {
  justify-content: flex-start;
}

.service-block-reverse .service-btn-row {
  justify-content: flex-end;
}

/* =========================
   TABLET
   ========================= */
@media (max-width: 980px) {
  .services-section {
    padding: 90px 0;
  }

  .service-block,
  .service-block-reverse {
    grid-template-columns: 1fr;
    gap: 36px;
    padding: 56px 0;
  }

  .service-block-reverse .service-content,
  .service-block-reverse .service-visual {
    order: initial;
  }

  .service-visual {
    justify-content: flex-start;
  }

  .service-visual img {
    max-width: 420px;
  }
}

/* =========================
   MOBILE
   ========================= */
@media (max-width: 768px) {
  .service-block .service-content h3,
  .service-block-reverse .service-content h3,
  .service-block .service-body,
  .service-block-reverse .service-body {
    margin-left: 0;
    margin-right: 0;
  }

  .service-btn-row,
  .service-block .service-btn-row,
  .service-block-reverse .service-btn-row {
    justify-content: center;
    margin-left: 0;
    margin-right: 0;
  }

  .service-body {
    max-width: none;
    width: 100%;
  }

  .service-list-grid {
    grid-template-columns: 1fr;
    gap: 0;
    margin-bottom: 26px;
  }
}

@media (max-width: 640px) {
  .services-section {
    padding: 72px 0;
  }

  .service-content p {
    margin-bottom: 24px;
    font-size: 1rem;
    line-height: 1.75;
  }

  .service-list-grid li {
    font-size: 0.94rem;
  }

  .service-visual img {
    max-width: 100%;
  }
}


/*Illistration for the service section */

/* =========================================
   SERVICE VISUAL SVG SYSTEM
   ========================================= */

.service-visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 360px;
}

.service-visual svg {
  display: block;
  width: 100%;
  max-width: 500px;
  height: auto;
  overflow: visible;
  filter: drop-shadow(0 20px 46px rgba(0, 0, 0, 0.24));
}

.service-visual img {
  display: none;
}

/* shared animation classes */
.sv-glow-pulse { animation: svGlowPulse 3.8s ease-in-out infinite; }
.sv-float-main { animation: svFloatMain 6.5s ease-in-out infinite; transform-origin: center; }
.sv-float-1 { animation: svFloatOne 7.2s ease-in-out infinite; transform-origin: center; }
.sv-float-2 { animation: svFloatTwo 8s ease-in-out infinite; transform-origin: center; }
.sv-panel-drift { animation: svPanelDrift 5.8s ease-in-out infinite; transform-origin: center; }
.sv-code-scroll { animation: svCodeScroll 4.6s linear infinite; }
.sv-blink { animation: svBlink 2.6s ease-in-out infinite; }
.sv-rotate { animation: svRotate 14s linear infinite; transform-origin: center; }
.sv-rotate-reverse { animation: svRotateReverse 12s linear infinite; transform-origin: center; }
.sv-line-fade { animation: svLineFade 2.8s ease-in-out infinite; }
.sv-grid-pulse { animation: svGridPulse 3.2s ease-in-out infinite; }
.sv-scan { animation: svScan 3.4s linear infinite; }
.sv-orbit { animation: svRotate 7.5s linear infinite; transform-origin: center; }

.sv-bar-1,
.sv-bar-2,
.sv-bar-3 {
  transform-box: fill-box;
  transform-origin: center bottom;
}

.sv-bar-1 { animation: svBarOne 2.8s ease-in-out infinite; }
.sv-bar-2 { animation: svBarTwo 3.2s ease-in-out infinite; }
.sv-bar-3 { animation: svBarThree 2.5s ease-in-out infinite; }

.sv-node-pulse {
  transform-box: fill-box;
  transform-origin: center;
  animation: svNodePulse 2.2s ease-in-out infinite;
}

.sv-delay-1 { animation-delay: .45s; }
.sv-delay-2 { animation-delay: .9s; }
.sv-delay-3 { animation-delay: 1.3s; }

.service-visual:hover svg {
  filter: drop-shadow(0 24px 58px rgba(0, 0, 0, 0.32));
}

.service-visual:hover .sv-float-main,
.service-visual:hover .sv-panel-drift {
  animation-duration: 5.2s;
}

.service-visual::before {
  content: "";
  position: absolute;
  inset: 12% 10%;
  border-radius: 32px;
  background:
    radial-gradient(circle at 30% 30%, rgba(124, 58, 237, 0.12), transparent 45%),
    radial-gradient(circle at 70% 65%, rgba(0, 217, 255, 0.10), transparent 42%),
    radial-gradient(circle at 55% 80%, rgba(69, 178, 102, 0.10), transparent 38%);
  filter: blur(18px);
  pointer-events: none;
}
/* motion */
@keyframes svGlowPulse {
  0%, 100% { opacity: 0.45; }
  50% { opacity: 1; }
}

@keyframes svFloatMain {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

@keyframes svFloatOne {
  0%, 100% { transform: translateY(0) translateX(0); }
  50% { transform: translateY(-6px) translateX(4px); }
}

@keyframes svFloatTwo {
  0%, 100% { transform: translateY(0) translateX(0); }
  50% { transform: translateY(8px) translateX(-5px); }
}

@keyframes svPanelDrift {
  0%, 100% { transform: translate(0, 0); opacity: 0.40; }
  50% { transform: translate(8px, -6px); opacity: 0.55; }
}

@keyframes svCodeScroll {
  0% { transform: translateY(0); }
  100% { transform: translateY(-18px); }
}

@keyframes svBlink {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 1; }
}

@keyframes svRotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes svRotateReverse {
  from { transform: rotate(360deg); }
  to { transform: rotate(0deg); }
}

@keyframes svLineFade {
  0%, 100% { opacity: 0.28; }
  50% { opacity: 1; }
}

@keyframes svGridPulse {
  0%, 100% { opacity: 0.18; }
  50% { opacity: 0.55; }
}

@keyframes svScan {
  0% { transform: translateY(-72px); opacity: 0; }
  10% { opacity: 0.8; }
  50% { opacity: 0.95; }
  100% { transform: translateY(72px); opacity: 0; }
}

@keyframes svBarOne {
  0%, 100% { transform: scaleY(0.72); }
  50% { transform: scaleY(1); }
}

@keyframes svBarTwo {
  0%, 100% { transform: scaleY(0.56); }
  50% { transform: scaleY(0.94); }
}

@keyframes svBarThree {
  0%, 100% { transform: scaleY(0.66); }
  50% { transform: scaleY(1.08); }
}

@keyframes svNodePulse {
  0%, 100% { transform: scale(1); opacity: 0.45; }
  50% { transform: scale(1.4); opacity: 1; }
}

/* tablet/mobile */
@media (max-width: 980px) {
  .service-visual {
    justify-content: flex-start;
    min-height: 300px;
  }

  .service-visual svg {
    max-width: 420px;
  }
}

@media (max-width: 768px) {
  .service-visual {
    justify-content: center;
    min-height: 260px;
  }

  .service-visual svg {
    max-width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .service-visual *,
  .service-visual svg {
    animation: none !important;
    transition: none !important;
  }
}



/*portfolio section*/

.portfolio-section {
  padding: 110px 0;
  background: var(--bg-white);
}

.portfolio-heading {
  font-size: clamp(2.4rem, 4vw, 3rem);
  font-weight: 800;
  margin-bottom: 60px;
  color: #1f2333;
}

/* GRID */
.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
}

/* CARD */
.portfolio-card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  background: var(--bg-white);
  box-shadow: 0 20px 40px rgba(0,0,0,0.06);
}

.portfolio-card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  background: var(--bg-white);
  box-shadow: 0 20px 40px rgba(0,0,0,0.06);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.portfolio-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 28px 60px rgba(0,0,0,0.12);
}

/* FRONT */
.card-front {
  position: relative;
}

.card-front img {
  width: 100%;
  height: 320px;
  object-fit: cover;
  display: block;
}

/* TITLE */
.card-title {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 18px 22px;
  background: linear-gradient(to top, rgba(15,18,30,0.88), rgba(15,18,30,0.25), transparent);
  color: #fff;
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.2px;
}

/* OVERLAY */
.card-overlay {
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(4px);
  padding: 24px;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.portfolio-card:hover .card-overlay {
  opacity: 1;
  transform: translateY(0);
}

/* TEXT */
.card-overlay p {
  font-size: 0.95rem;
  line-height: 1.7;
  color: #5e6473;
  margin-bottom: 12px;
}

.card-overlay strong {
  color: #1f2333;
}

/* BUTTON */
.card-btn {
  display: inline-block;
  margin-top: 14px;
  padding: 11px 18px;
  border-radius: 999px;
  background: linear-gradient(135deg, #45b266, #2fd6c4);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.card-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(69, 178, 102, 0.25);
}

/* RESPONSIVE */
@media (max-width: 768px) {
  .portfolio-grid {
    grid-template-columns: 1fr;
  }

  .card-front img {
    height: 240px;
  }
}

/*why section*/

.why-section {
  padding: 110px 0;
  background: var(--bg-soft);
}


.why-top {
  text-align: center;
  max-width: 700px;
  margin: 0 auto 60px;
}

.why-heading {
  margin: 0 0 14px;
  font-size: clamp(2.2rem, 4vw, 3rem);
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: #1f2333;
}

.why-intro {
  margin: 0;
  max-width: 700px;
  font-size: 1rem;
  line-height: 1.8;
  color: #5e6473;
}

.why-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
}

.why-card {
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(8px);
  border-radius: 20px;
  padding: 30px 26px;
  border: 1px solid rgba(31, 35, 51, 0.06);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  position: relative;
  overflow: hidden;
}

.why-card h3 {
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: 10px;
  color: #1f2333;
}

.why-card p {
  font-size: 0.95rem;
  line-height: 1.7;
  color: #5e6473;
}

.why-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px rgba(15, 23, 42, 0.08);
  border-color: rgba(111, 91, 211, 0.14);
}

.why-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, #6F5BD3, #45B266);
  opacity: 0;
  transition: 0.25s ease;
}



.why-card:hover::before {
  opacity: 1;
}

.why-icon {
  width: 54px;
  height: 54px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  background: linear-gradient(135deg, rgba(111, 91, 211, 0.12), rgba(69, 178, 102, 0.12));
  border: 1px solid rgba(111, 91, 211, 0.12);
  color: #4c57d6;
  font-size: 1.2rem;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.why-card:hover .why-icon {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 12px 24px rgba(76, 87, 214, 0.12);
  border-color: rgba(69, 178, 102, 0.22);
}

@media (max-width: 1024px) {
  .why-top {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .why-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .why-grid {
    grid-template-columns: 1fr;
  }

  .why-card {
    min-height: auto;
  }
}


/*cta section*/

.cta-section {
  padding: 120px 0;
  background:
    radial-gradient(circle at top right, rgba(111, 91, 211, 0.07), transparent 28%),
    radial-gradient(circle at bottom left, rgba(69, 178, 102, 0.06), transparent 26%),
    var(--bg-offwhite);
}

.cta-layout {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 48px;
  align-items: center;
}

.cta-content {
  max-width: 620px;
}

.cta-eyebrow {
  margin: 0 0 14px;
  font-size: 0.82rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: #6f5bd3;
}

.cta-heading {
  margin: 0 0 18px;
  font-size: clamp(2.5rem, 4vw, 4rem);
  line-height: 1.04;
  letter-spacing: -0.03em;
  color: #1f2333;
}

.cta-text {
  margin: 0 0 28px;
  font-size: 1.05rem;
  line-height: 1.8;
  color: #5e6473;
}

.cta-points {
  list-style: none;
  padding: 0;
  margin: 0 0 30px;
  display: grid;
  gap: 12px;
}

.cta-points li {
  position: relative;
  padding-left: 28px;
  font-size: 1rem;
  line-height: 1.6;
  color: #3f4656;
}

.cta-points li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 800;
  color: #45b266;
}



.cta-trust {
  margin-top: 18px;
  font-size: 0.95rem;
  color: #5e6473;
}




.cta-side-card {
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(31, 35, 51, 0.08);
  border-radius: 24px;
  padding: 22px;
  box-shadow: 0 20px 40px rgba(15, 23, 42, 0.06);
}

.cta-photo-wrap {
  max-width: 420px;
  margin-left: auto;
}

.cta-photo {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 20px;
  object-fit: cover;
  margin-bottom: 18px;
}

.cta-side-copy h3 {
  margin: 0 0 10px;
  font-size: 1.15rem;
  color: #1f2333;
}

.cta-side-copy p {
  margin: 0;
  line-height: 1.7;
  color: #5e6473;
}

/* =========================
   ABOUT SECTION
   ========================= */

.about-section {
  padding: 110px 0;
  background:
    radial-gradient(circle at top right, rgba(111, 91, 211, 0.06), transparent 28%),
    radial-gradient(circle at bottom left, rgba(69, 178, 102, 0.05), transparent 26%),
    var(--bg-soft);
}

.about-layout {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 56px;
  align-items: center;
}
.about-section .about-text a{
  color: var(--green-dark);
}
/* TEXT SIDE */

.about-content {
  max-width: 640px;
}

.about-heading {
  margin: 0 0 18px;
  font-size: clamp(2.4rem, 4vw, 3.2rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: #1f2333;
}

.about-text {
  margin: 0 0 18px;
  font-size: 1.05rem;
  line-height: 1.8;
  color: #5e6473;
}

/* ABOUT BUTTON = text only at rest, hex appears on hover */
.cta-btn.hex-outline.abt-btn {
  color: #6f5bd3;
}

.cta-btn.hex-outline.abt-btn span {
  color: #6f5bd3;
}

/* hidden at rest */
.cta-btn.hex-outline.abt-btn::before {
  background: #6f5bd3;
  opacity: 0;
  z-index: 0;
  box-shadow: none;
}

.cta-btn.hex-outline.abt-btn::after {
  inset: 3px;
  background:
    radial-gradient(circle at top right, rgba(111, 91, 211, 0.06), transparent 28%),
    radial-gradient(circle at bottom left, rgba(69, 178, 102, 0.05), transparent 26%),
    var(--bg-soft);
  opacity: 0;
  z-index: 1;
}

.cta-btn.hex-outline.abt-btn:hover {
  transform: translateY(-2px);
}

.cta-btn.hex-outline.abt-btn:hover::before {
  opacity: 1;
  box-shadow: 0 12px 28px rgba(111, 91, 211, 0.18);
}

.cta-btn.hex-outline.abt-btn:hover::after {
  opacity: 1;
}


.about-layout-reverse .about-content {
  order: 2;
  margin-left: auto;
}

.about-layout-reverse .about-image-wrap {
  order: 1;
  margin-left: 0;
  margin-right: auto;
}

/* IMAGE SIDE */

.about-image-wrap {
  position: relative;
  max-width: 420px;
  margin-left: auto;
}

.about-image-wrap img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 24px;
  object-fit: cover;

  box-shadow: 0 25px 50px rgba(15, 23, 42, 0.12);
}

/* subtle glow behind image */

.about-image-wrap::before {
  content: "";
  position: absolute;
  inset: -20px;
  background: radial-gradient(circle, rgba(111, 91, 211, 0.15), transparent 60%);
  z-index: -1;
  filter: blur(20px);
  opacity: 0.7;
}


/* Fix: prevent code panel from forcing horizontal overflow */
.panel,
.codebox,
.codebox__pre {
  max-width: 100%;
}

.codebox__pre {
  overflow-x: auto;
  white-space: pre-wrap;    /* allows wrapping instead of forcing width */
  word-break: break-word;   /* breaks long tokens if needed */
}

.fineprint{color:var(--tex);line-height:1.6;margin:12px 0 0}

/* RESPONSIVE */

@media (max-width: 980px) {
  .about-layout {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .about-image-wrap {
    max-width: 360px;
    margin: 0;
  }
}

@media (max-width: 640px) {
  .about-section {
    padding: 88px 0;
  }
}

/* =========================
   HOME MOBILE SAFETY
========================= */

@media (max-width: 768px) {
  .hero__fx {
    opacity: 0.25;
  }

  .hero {
    padding: 88px 0 72px;
  }

  .hero__right,
  .panel {
    display: none;
  }

  .headline,
  .subhead,
  .cta {
    margin-left: 0;
  }

  .cta {
    flex-direction: column;
    flex-wrap: wrap;
  }

  .portfolio-grid,
  .why-grid,
  .cta-layout,
  .about-layout {
    grid-template-columns: 1fr;
  }

  .card-overlay {
    position: static;
    opacity: 1;
    transform: none;
  }

  .portfolio-card:hover {
    transform: none;
  }

  .service-visual {
    min-height: 240px;
  }
}

@media (max-width: 640px) {
  .value-section,
  .services-section,
  .portfolio-section,
  .why-section,
  .cta-section,
  .about-section {
    padding: 72px 0;
  }
}