hero section content

src/app/globals.css

@@ -2,9 +2,9 @@
 
 /* ─── Design Tokens (Material Design 3 inspired) ─── */
 :root {
-  --surface: #f9f9fc;
+  --surface: #E7D3EF;
   --surface-dim: #dadadc;
-  --surface-bright: #f9f9fc;
+  --surface-bright: #E7D3EF;
   --surface-container-lowest: #ffffff;
   --surface-container-low: #f3f3f6;
   --surface-container: #eeeef0;
@@ -46,14 +46,14 @@
   --tertiary-fixed-dim: #ebc246;
   --on-tertiary-fixed: #241a00;
   --on-tertiary-fixed-variant: #584400;
-  --background: #f9f9fc;
+  --background: #E7D3EF;
   --on-background: #1a1c1e;
   --surface-variant: #e2e2e5;
   --brand-dark: #120217;
   --brand-dark-surface: #1e0627;
-  --brand-accent: #fca311;
-  --brand-accent-light: #ffe08b;
-  --brand-cream: #faf8f5;
+  --brand-accent: #e0c8f7;
+  --brand-accent-light: #E4D0FC;
+  --brand-cream: #E7D3EF;
 }
 
 /* ─── Tailwind v4 Theme ─── */
@@ -327,11 +327,13 @@ body {
 }
 
 /* Hero-only clipped background layers */
-@media (min-width: 768px) {
+@media (min-width: 1024px) {
   .hero {
     position: relative;
-    min-height: 785px;
-    overflow: hidden;
+    margin-top: 0;
+    min-height: 500px;
+    overflow: visible;
+    padding-bottom: 100px;
     background:
       radial-gradient(circle at 62% 48%, rgba(108, 14, 128, 0.7), transparent 36%),
       radial-gradient(circle at 25% 38%, rgba(55, 0, 74, 0.62), transparent 34%),
@@ -358,13 +360,17 @@ body {
     z-index: 2;
   }
 
+  /* Right column occupies exactly 52% of width to ensure diagonal doesn't clip */
   .hero-visual-layer {
     position: absolute;
     z-index: 2;
     top: 0;
     right: 0;
-    bottom: 110px;
-    width: min(50vw, 820px);
+    bottom: 0;
+    width: 52%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
     pointer-events: none;
     filter: none;
     overflow: hidden;
@@ -374,20 +380,17 @@ body {
   .hero-visual-panel {
     position: absolute;
     inset: 0;
-    background: #ffffff;
-    clip-path: polygon(42% 0, 100% 0, 100% 100%, 0 100%);
+    background: #E7D3EF;
+    clip-path: polygon(33% 0, 100% 0, 100% 100%, 0 100%);
     z-index: 0;
   }
 
   .hero-visual-image {
-    position: absolute;
+    position: relative;
     z-index: 1;
-    right: clamp(48px, 5vw, 96px);
-    bottom: clamp(26px, 4vw, 60px);
-    width: min(78%, 600px);
-    max-width: 600px;
-    max-height: calc(100% - 80px);
-    aspect-ratio: 455 / 374;
+    width: 60%;
+    height: 60%;
+    left: 10%; /* Shift logo right to account for diagonal clip path visually */
     transform-origin: center;
   }
 
@@ -413,10 +416,12 @@ body {
     opacity: 0.8;
   }
 
+  /* Left column occupies exactly 46% of width to avoid diagonal overlap */
   .hero-content {
     position: relative;
     z-index: 3;
-    width: min(610px, 48vw);
+    width: 46%;
+    max-width: 46%;
     padding-top: 94px;
     animation: hero-copy-enter 760ms cubic-bezier(0.16, 1, 0.3, 1) both;
   }
@@ -424,47 +429,25 @@ body {
   .hero-stage {
     padding-left: clamp(72px, 7.5vw, 150px);
     padding-right: clamp(32px, 4vw, 80px);
-    min-height: 740px;
+    min-height: 600px;
   }
 
-  .hero-cards {
+  .service-cards-wrapper {
     position: relative;
-    z-index: 5;
-    transform: translateY(-50%);
-    padding-left: clamp(72px, 7.5vw, 150px);
-    padding-right: clamp(72px, 7.5vw, 150px);
-    margin-bottom: -45px;
+    z-index: 10;
+    margin-top: -85px;
+    padding-left: var(--spacing-margin-desktop);
+    padding-right: var(--spacing-margin-desktop);
   }
 }
 
-@media (min-width: 768px) and (max-width: 1099px) {
-  .hero {
-    min-height: 720px;
-  }
-
-  .hero-visual-layer {
-    width: min(52vw, 560px);
-    bottom: 128px;
-  }
-
-  .hero-visual-image {
-    right: -8px;
-    bottom: 52px;
-    width: min(86%, 460px);
-    opacity: 0.92;
-  }
-
-  .hero-content {
-    width: min(440px, 58vw);
-  }
-}
-
-@media (max-width: 767px) {
+@media (max-width: 1023px) {
   .hero {
     position: relative;
+    margin-top: 0;
     background: #120018;
-    padding-bottom: 48px;
-    overflow: hidden;
+    padding-bottom: 110px;
+    overflow: visible;
   }
 
   .hero-dark-panel {
@@ -502,42 +485,14 @@ body {
   }
 
   .hero-visual-layer {
-    position: relative;
-    z-index: 2;
-    width: 95%;
-    max-width: 450px;
-    aspect-ratio: 1080 / 867;
-    margin: 20px auto 0 auto;
-    pointer-events: none;
-    filter: none;
-    overflow: hidden;
+    display: none;
   }
 
-  .hero-visual-panel {
-    position: absolute;
-    inset: 0;
-    background: #ffffff;
-    clip-path: polygon(44% 0, 100% 0, 100% 100%, 14% 100%);
-    z-index: 0;
-  }
-
-  .hero-visual-image {
-    position: absolute;
-    z-index: 1;
-    inset: 12% 6% 12% 20%;
-    max-width: 100%;
-    max-height: 100%;
-    transform-origin: center;
-  }
-
-  .hero-visual-image img {
-    object-fit: contain;
-  }
-
-  .hero-cards {
+  .service-cards-wrapper {
     position: relative;
     z-index: 20;
-    margin-top: 40px;
+    margin-top: -48px;
+    overflow-x: auto;
     padding-left: var(--spacing-margin-mobile);
     padding-right: var(--spacing-margin-mobile);
   }
@@ -593,3 +548,4 @@ body {
     transform: translate3d(18px, -8px, 0) scale(1.03);
   }
 }
+