/* RESET & BASE */
@import url('https://fonts.googleapis.com/css2?family=Alfa+Slab+One&family=Archivo+Black&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

* {box-sizing: border-box;}
html {scroll-behavior: smooth;scroll-padding-top: 100px;}
html, body {overflow-x: hidden}
body {margin: 0;color: #edf5f1;font-family: "Inter", system-ui, sans-serif;line-height: 1.6;overflow-x: hidden;}
::selection {color: #07110b;background: #59b47e;}
a {color: #edf5f1;text-decoration: none;transition:color 0.3s ease,opacity 0.3s ease,transform 0.3s ease;}
.small, small {font-family: "Poppins", sans-serif;font-size: 1.1em;color:#000}
  /* SHARED ELEMENTS */
main {margin: 0 auto;}
h1,h2,h3,p {margin-top: 0;}
h1,h2,h3 {text-wrap: balance;font-family: "Poppins", sans-serif;}
p {text-wrap: pretty; font-family: "Poppins", sans-serif;}
.eyebrow{color: #59b47e;font-size: 11px;font-weight: 800;letter-spacing: 2px;text-transform: uppercase;}
section {position: relative;}
button{font-family: "Poppins", sans-serif;}
/* SYNKTUP HEADER DESKTOP + MOBILE*/
.site-header {position: fixed !important; top: 0 !important;left: 0 !important;right: 0 !important;width: 100% !important;height: 90px;display: flex;align-items: center;padding: 15px 30px;background: rgba(255, 255, 255, 0.96);border-bottom: 1px solid rgba(0, 0, 0, 0.08);backdrop-filter: blur(18px);-webkit-backdrop-filter: blur(18px);box-shadow: 0 4px 25px rgba(0, 0, 0, 0.06);z-index: 99999;transition: height 0.3s ease, padding 0.3s ease box-shadow 0.3s ease;
}
/* SCROLLED / COMPACT HEADER */
.site-header.scrolled {height: 64px; padding: 8px 30px;background: rgba(255, 255, 255, 0.98);box-shadow: 0 6px 25px rgba(0, 0, 0, 0.10);}
/*HEADER CONTAINER */
.site-header > .container-fluid {width: 100%;padding-left: 0;padding-right: 0;}
.site-header > .container-fluid > .d-flex {width: 100%;min-height: 60px;}

/*  BRAND / LOGO */
.site-header .brand {display: inline-flex;align-items: center;flex-shrink: 0;margin: 0;padding: 0;}
.site-header .brand-logo {display: block;width: 300px;transition: width 0.3s ease;}
.site-header.scrolled .brand-logo {width: 210px;}
.site-header .brand-logo a {display: block;margin: 0;padding: 0;text-decoration: none;}
.site-header .brand-logo img {display: block;width: 100%;max-width: 100%; height: auto;object-fit: contain;}

/* DESKTOP NAVIGATION*/
.site-header .site-nav {display: flex;align-items: center;gap: 50px;margin: 0;padding: 0;white-space: nowrap;}
.site-header.scrolled .site-nav {gap: 40px;}
.site-header.scrolled .site-nav a,.site-header.scrolled .contact-nav-trigger {font-size: 16px;}

/* Navigation links */
.site-header .site-nav a,.site-header .contact-nav-trigger {position: relative;display: inline-flex;align-items: center;margin: 0; padding: 0;color: #000000;font-family: "Poppins", sans-serif;font-size: 20px;font-weight: 500;line-height: 1.4;text-decoration: none;text-transform: uppercase;white-space: nowrap;transition: color 0.3s ease, opacity 0.3s ease;}

/* Navigation underline */
.site-header .site-nav a::after,.site-header .contact-nav-trigger::after {content: ""; position: absolute;left: 0;bottom: -8px; width: 0;height: 1px;background: #59b47e;transition: width 0.3s ease;}

/* Hover */
.site-header .site-nav a:hover,.site-header .contact-nav-trigger:hover {color: #59b47e;}
.site-header .site-nav a:hover::after,.site-header .contact-nav-trigger:hover::after {width: 100%;}

/* CONTACT NAV BUTTON */
.site-header .contact-nav-trigger {appearance: none; -webkit-appearance: none;border: 0;outline: 0;background: transparent;cursor: pointer;}

/*  MOBILE MENU BUTTON HIDDEN ON DESKTOP*/
.site-header .mobile-menu-toggle {display: none;}
.site-header .mobile-menu-close {display: none;}

/* RESPONSIVE CSS */
@media (max-width: 768px) {
  /* HEADER */
.site-header {min-height: 75px;padding: 10px 20px;z-index: 99999 !important;}
.site-header > .container-fluid {padding-left: 0;padding-right: 0;}
.site-header > .container-fluid > .d-flex {min-height: 55px;}

/* MOBILE LOGO */
.site-header .brand {width: auto; max-width: 70%;flex-shrink: 1;}
.site-header .brand-logo {width: 220px;max-width: 100%;}
.site-header .brand-logo img {width: 100%;max-width: 100%;height: auto;}

/* HAMBURGER BUTTON */
.site-header .mobile-menu-toggle {display: flex !important;width: 44px;height: 44px;flex-shrink: 0;margin: 0;padding: 8px;border: none !important;outline: none;background: transparent !important;cursor: pointer;flex-direction: column;align-items: center;justify-content: center;gap: 5px;position: relative;z-index: 1005;}
.site-header .mobile-menu-toggle span {display: block !important;width: 25px !important;height: 3px !important;margin: 0;padding: 0;background: #000000 !important;border-radius: 3px;transition: transform 0.3s ease, opacity 0.3s ease;}
/* MOBILE MENU ICON */

.mobile-menu-toggle span {transition:transform 0.3s ease,opacity 0.2s ease;}
/* OPEN = X */
.mobile-menu-toggle.active span:nth-child(1) {transform: translateY(8px) rotate(45deg);}
.mobile-menu-toggle.active span:nth-child(2) {opacity: 0;}
.mobile-menu-toggle.active span:nth-child(3) {transform: translateY(-8px) rotate(-45deg);}

  /* MOBILE NAVIGATION PANEL */
.site-header .site-nav {position: fixed !important;top: 0;right: 0;width: 320px;max-width: 88vw;
height: 100vh;display: flex !important;flex-direction: column;align-items: stretch;gap: 0;margin: 0;padding: 85px 32px 40px;background: #ffffff !important;box-shadow: -12px 0 35px rgba(0, 0, 0, 0.15);overflow-x: hidden;overflow-y: auto;transform: translate3d(100%, 0, 0) !important;visibility: hidden;transition: transform 0.35s ease, visibility 0.35s ease;z-index: 1004;}

  /*  MOBILE NAV OPEN */
.site-header .site-nav.active {transform: translate3d(0, 0, 0) !important;visibility: visible;}

  /* MOBILE LINKS */
.site-header .site-nav a,.site-header .contact-nav-trigger {display: flex; align-items: center; width: 100%;min-height: 55px;margin: 0;padding: 16px 5px;color: #000000 !important;font-family: "Poppins", sans-serif;font-size: 17px;font-weight: 500;line-height: 1.4;text-decoration: none !important;text-transform: uppercase;border: 0 !important;background: transparent;white-space: normal;cursor: pointer;}

/* Remove desktop underline */
.site-header .site-nav a::after,.site-header .contact-nav-trigger::after {display: none;}

/* Mobile hover */
.site-header .site-nav a:hover,.site-header .contact-nav-trigger:hover {color: #59b47e !important; background: #f7f7f7;}

/* MOBILE CLOSE BUTTON */
.site-header .mobile-menu-close {display: flex !important;position: absolute;top: 20px;right: 22px;width: 40px;height: 40px;align-items: center;justify-content: center;margin: 0;padding: 0;border: none !important;outline: none;background: transparent !important;color: #000000;font-size: 32px;font-weight: 300;line-height: 1;cursor: pointer;z-index: 1006;}
}

/* SMALL MOBILE */
@media (max-width: 480px) {
.site-header {min-height: 70px;padding: 8px 15px;}
.site-header > .container-fluid > .d-flex {min-height: 54px}
.site-header .brand {max-width: 65%;}
.site-header .brand-logo {width: 180px;}
.site-header .mobile-menu-toggle {width: 42px;height: 42px }
.site-header .mobile-menu-toggle span {width: 23px !important;height: 3px !important;}
.site-header .site-nav {width: 290px;max-width: 90vw;padding-left: 25px;padding-right: 25px;}
.site-header .site-nav a,.site-header .contact-nav-trigger {font-size: 16px;}
}

/* BRAND & LOGO*/
.brand {display: inline-flex;align-items: center;gap: 12px;flex-shrink: 0;text-decoration: none;}
.brand-logo {display: block;object-fit: contain;width:300px;transition:transform 0.3s ease,filter 0.3s ease;align-content: center;}
.brand-logo img{width:100%}
.contact-nav-trigger {appearance: none;-webkit-appearance: none;margin: 0;padding: 0;border: 0;outline: 0;background: transparent;color: inherit;font-family: inherit;font-size: inherit;font-weight: inherit;line-height: inherit;letter-spacing: inherit;text-transform: inherit;position: relative;color: #000000;font-weight: 500;text-decoration: none;transition: color 0.3s ease;text-decoration: none; white-space: nowrap;font-size: 20px;cursor: pointer;}

.contact-panel {position: fixed;top: 90px;right: 5vw;width: min(620px, calc(100vw - 40px));z-index: 9999;opacity: 0; visibility: hidden;pointer-events: none;transform: translateY(-15px) scale(.97);transform-origin: top right;transition: opacity .25s ease, visibility .25s ease, transform .3s ease;}
.contact-panel.active {opacity: 1;visibility: visible;pointer-events: auto;transform: translateY(0) scale(1);}
.contact-panel-inner {padding: 32px;background:linear-gradient(145deg,#061827, #082d3c);border: 1px solid rgba(53, 214, 196, .25);border-radius: 20px;box-shadow:0 30px 70px rgba(0,0,0,.45),0 0 40px rgba(35,116,225,.12);backdrop-filter: blur(20px);}
.contact-panel-header {display: flex;justify-content: space-between;align-items: flex-start;margin-bottom: 28px;}
.contact-panel-header small,.contact-success-view small {display: block;margin-bottom: 10px;color: #35d6c4;font-size: 10px;font-weight: 700;letter-spacing: 2.5px;text-transform: uppercase;}
.contact-panel-header h3 {margin: 0;color: #fff;font-size: 27px;line-height: 1.2;}
.contact-close {width: 36px;height: 36px;border: 1px solid rgba(255,255,255,.12);border-radius: 50%;background: rgba(255,255,255,.05);color: #a9bac5;font-size: 22px;cursor: pointer;transition: .25s ease;}
.contact-close:hover {color: #35d6c4;border-color: #35d6c4;}
.contact-fields {display: grid;grid-template-columns: 1fr 1fr; gap: 18px;}
.contact-field {display: flex;flex-direction: column;gap: 8px;}
.contact-message-field {grid-column: 1 / -1;}
.contact-field label {color: #a9bac5;font-size: 11px;font-weight: 600;letter-spacing: .8px;text-transform: uppercase;}
.contact-field input,.contact-field textarea {width: 100%;padding: 13px 15px;border: 1px solid rgba(255,255,255,.10);border-radius: 10px;background: rgba(255,255,255,.045);color: #fff;font-family: inherit;font-size: 14px;outline: none;transition: .25s ease;}
.contact-field input::placeholder,.contact-field textarea::placeholder {color: #667b87;}
.contact-field input:focus,
.contact-field textarea:focus {border-color: #35d6c4;background: rgba(53,214,196,.05);box-shadow: 0 0 0 3px rgba(53,214,196,.07);}
.contact-field textarea {min-height: 110px;resize: vertical;}
.contact-form-footer {display: flex;justify-content: flex-end;margin-top: 24px;}
.contact-send {display: inline-flex;align-items: center;gap: 10px;padding: 13px 23px;border: 0;border-radius: 999px;background:linear-gradient(135deg, #35b878,#2374e1);color: #fff;font-size: 12px;font-weight: 700;letter-spacing: 1px;cursor: pointer;transition: .25s ease;}
.contact-send:hover {transform: translateY(-2px);box-shadow:0 12px 30px rgba(35,116,225,.25);}
.send-arrow {font-size: 17px;}
.contact-success-view {display: none;min-height: 300px;align-items: center;justify-content: center;flex-direction: column;text-align: center;}
.contact-success-view.active {display: flex;}
.success-icon {width: 65px;height: 65px;display: grid;place-items: center;margin-bottom: 20px;border: 1px solid rgba(53,214,196,.4);border-radius: 50%;color: #35d6c4;font-size: 28px;box-shadow:0 0 30px rgba(53,214,196,.15);}
.contact-success-view h3 {margin: 0 0 12px;color: #fff;font-size: 26px;}
.contact-success-view p {margin: 0 0 25px;color: #91a4af;}
.contact-success-close {padding: 10px 24px;border: 1px solid rgba(53,214,196,.35);border-radius: 999px;background: transparent;color: #35d6c4;font-size: 11px;font-weight: 700;letter-spacing: 1.5px;cursor: pointer;}
.contact-success-close:hover {background: #35d6c4;color: #061827;}

@media (max-width: 768px) {
.contact-panel {top: 75px;right: 15px;left: 15px;width: auto;z-index: 999999 !important;}
}
@media (max-width: 600px) {
.contact-panel {top: 75px;right: 15px;left: 15px;width: auto;z-index: 999999 !important;}
.contact-panel-inner {padding: 24px}
.contact-fields {grid-template-columns: 1fr;}
.contact-message-field {grid-column: auto;}
.contact-panel-header h3 {font-size: 22px;}
}

/*HERO */
.hero {margin-top:90px;padding: 90px 0px;align-content: center;background: #020f28;align-items: center;gap: 6vw;}
.hero-copy {position: relative;z-index: 1;}
.hero-content small{font-family: "Poppins", sans-serif;font-size: 1.1em;letter-spacing: 1px;color:#fff}
.hero-content .button{margin-top:20px;font-family: "Salesforce Sans", sans-serif;}
.hero h1 {margin: 35px 0;font-size: clamp(40px, 5.5vw, 75px);line-height: 0.92;letter-spacing: -2px;}
.hero h1 span {display: block;color: #59b47e;font-family: "Poppins", sans-serif;}
.hero p {color: #95a8b5;font-size: 22px;}
.hero-actions {display: flex;align-items: center;flex-wrap: wrap;gap: 25px;margin-top: 28px;}
.button,.pill-button {display: inline-flex;align-items: center;gap: 10px;padding: 13px 23px;border: 0;border-radius: 999px;background: linear-gradient(135deg, #35b878, #2374e1);color: #fff;font-size: 20px;font-weight: 700;letter-spacing: 1px;cursor: pointer;transition: .25s ease;}
.button:hover,.pill-button:hover {transform: translateY(-2px);box-shadow:0 12px 30px rgba(35,116,225,.25);}
.text-link {color: #95a8b5;font-size: 14px;font-weight: 600;}
.text-link:hover {color: #59b47e;}
.visual{text-align:center}
.visual footer{font-family: "Poppins", sans-serif;}

  /*STORY SECTION */
.story {padding: 170px 0px;}
.story small{color:#2EA1FF;font-size:1.1em;}
.core-visual {width: 100%; max-width: 520px;margin: 0 auto;position: relative;}
.core-visual::before {content: "";position: absolute;inset: 10%;background: radial-gradient(circle, rgba(35, 116, 225, 0.18), rgba(53, 184, 120, 0.08),transparent 70%); filter: blur(35px);z-index: 0;}
.core-visual img {position: relative;z-index: 1;display: block;width: 100%;height: auto;object-fit: contain;filter: drop-shadow(0 10px 15px rgba(0, 0, 0, 0.35));transition:transform 0.5s ease,filter 0.5s ease;}
.core-visual:hover img {transform: scale(1.035);filter:drop-shadow(0 20px 25px rgba(0, 0, 0, 0.45))drop-shadow(0 0 30px rgba(53, 214, 196, 0.12));}
.core-content {padding-left: 30px;}
.story h2,.intentions h2 {margin:0 0 30px 0;font-size: clamp(45px, 6vw, 50px);line-height:1.1;color:#001e5b;font-family: "Poppins", sans-serif;}
.story h2 span,.intentions h2 span {display: block;color: #59b47e;}
.story p {color: #666666;font-size: 18px;}
#approach h2{margin:0 0 30px 0;font-size: clamp(45px, 6vw, 50px);line-height:1.1;color:#fff !important;font-family: "Poppins", sans-serif;}

  /*INTELLIGENCE */
.intelligence {padding: 170px 0px;}
.intelligence small{color:#2EA1FF;font-size:1.1em;}
.intelligence h2{margin: 0 0 30px 0;font-size: clamp(45px, 6vw, 50px);line-height: 1.1;color:#fff;font-family: "Poppins", sans-serif;}
.intelligence h2 span{display: block;color: #59b47e;}
.intelligence p{color: #fff;font-size: 20px;}
  
  /* IMPACT */
.intentions {padding: 150px 0px; background: #fff}
.section-heading { margin-bottom: 80px;}
#impact article small {color:#99D1FF !important;font-size:1.1em;}

article {position: relative !important;z-index: 1 !important;width: 100%;height: 300px;min-height: 300px; max-height: 300px;padding: 30px 22px;display: flex;flex-direction: column;justify-content: flex-start;background: linear-gradient(161deg,#003681 33%, #00578f 99.76%);border-radius: 16px;box-shadow:0 2px 8px -2px hsla(0, 0%, 9%, .08),0 8px 12px -2px hsla(0, 0%, 9%, .16);overflow: hidden;cursor: pointer;transition:transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),box-shadow 0.35s ease,border-color 0.35s ease}
article:hover {transform: translateY(-10px) scale(1) !important; z-index: 999 !important; border-color: #35d6c4 !important;box-shadow:0 35px 70px rgba(0, 0, 0, 0.45),0 15px 40px rgba(35, 116, 225, 0.25),0 0 45px rgba(53, 214, 196, 0.2) !important;}
article small{flex-shrink: 0;color: #59b47e;font-size: 11px;font-weight: 800;letter-spacing: 2px; text-transform: uppercase;}
article h3 {margin: 13px 0 12px;color: #fff;font-size: clamp(25px, 2vw, 32px);font-weight: 700; line-height: 1.05;font-family: "Roboto", sans-serif;flex-shrink: 0;}
article p {margin: 0;color: #ffffff;font-size: 18px;line-height: 1.85;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 4;overflow: hidden;}
.intention h3{margin: 0 0 20px;font-size: clamp(32px, 4vw, 60px);font-weight: 700;line-height: 1;letter-spacing: -2px;}
.intention p{color: #b5cbbd;font-size: 20px;}
.intention-number, .principle-number {color: #59b47e;font-size: 13px;font-weight: 800;letter-spacing: 1px}
.intention-symbol {display: block;margin-bottom: 25px;color: #59b47e;font-size: 35px;}
  
  /*APPROACH & PRINCIPLES */
.approach {padding: 150px 12%;border-top: 1px solid #233746}
.principles p {color: #b5cbbd;font-size: 20px;}
  
  /* GYRUSS */
.notes {padding: 150px 0;border-top: 1px solid #233746;}
.notes h2{margin: 0 0 30px 0;font-size: clamp(45px, 6vw, 50px);line-height: 1.1;color:#000;font-family: "Poppins", sans-serif;}
#notes h3{color:#000;}
#notes p{color: #666666;font-size: 18px;}
.notes-image { width: 100%;display: flex;align-items: center;justify-content: center}
.notes-image img {width: 100%;max-width: 850px;height: auto;display: block;object-fit: contain;filter:drop-shadow(0 0 35px rgba(0, 190, 255, 0.12))drop-shadow(0 20px 50px rgba(0, 0, 0, 0.45));}
  
  /* FOOTER */
 .bottom {padding: 45px 6vw;border-top: 1px solid #233746;background: #000;;display: flex;align-items: center;justify-content: space-between;gap: 25px;}
  
/* FOOTER NAVIGATION*/
.footer-nav {display: flex;align-items: center;justify-content: flex-end;gap: 30px;margin: 0;padding: 0;white-space: nowrap;}
.footer-nav a {position: relative;display: inline-block; color: #ffffff;font-size: 12px;font-weight: 500;letter-spacing: 1px;text-transform: uppercase;text-decoration: none;transition:color 0.25s ease,opacity 0.25s ease;}

/* Underline */
.footer-nav a::after , .footer-nav .footer-contact-trigger::after{content: "";position: absolute;left: 0;bottom: -7px;width: 0;height: 1px;background: #35d6c4;transition: width 0.25s ease}

/* Hover */
.footer-nav a:hover, .footer-nav .footer-contact-trigger:hover{color: #35d6c4;}
/* HOVER AFTER*/
.footer-nav a:hover::after,.footer-nav .footer-contact-trigger:hover::after {width: 100%;}
.footer-contact-trigger{position: relative;background: none;display: inline-block;border:0px;color: #ffffff;font-size: 12px;font-weight: 500;letter-spacing: 1px;text-transform: uppercase;text-decoration: none;transition:color 0.25s ease,opacity 0.25s ease;}

/* MOBILE */
@media (max-width: 768px) {
.bottom {padding: 35px 0 30px;text-align: center;}
.footer-logo {justify-content: center;margin-bottom: 25px;}
.footer-logo img {max-width: 160px;max-height: 50px;}
.footer-nav {flex-direction: column;justify-content: center;align-items: center;gap: 18px; white-space: normal;}
.footer-nav a {font-size: 12px;}
}

/* SMALL PHONES footer */
@media (max-width: 480px) {
.bottom {padding: 30px 0 25px}
.footer-logo {margin-bottom: 22px;}
.footer-logo img {max-width: 145px;}
.footer-nav {gap: 16px;}
}

/*  ANIMATIONS */
@keyframes pulse {
0%,100% {opacity: 0.4;transform: scale(0.8);}
50% {opacity: 1;transform: scale(1.2);}
}
@keyframes core-pulse {
0%,100% {transform: scale(0.95);}
50% {transform: scale(1.12);}
}
@keyframes orbit-float {
0%,100% {opacity: 0.55;}
50% {opacity: 1;}
}
@keyframes visual-shimmer {
0%,100% {transform: translateX(-15%);opacity: 0.3;}
50% {transform: translateX(15%);opacity: 0.8}
}
  
/* RESPONSIVE DESIGN */
@media (max-width: 1000px) {
.hero {gap: 40px;}
.main-navigation,nav {gap: 18px;}
.hero h1 {letter-spacing: 0px;}
.intention,article {grid-template-columns: 140px minmax(0, 1fr) 60px;}
}
.hero {min-height: auto;padding-top: 90px;padding-bottom: 90px; grid-template-columns: 1fr;}
.hero h1 {margin: 25px 0;letter-spacing: 0px;}
.hero p,.story > p {font-size: 18px;}
.story,.approach,.notes {padding: 100px 0;}
.intentions {padding: 100px 0;}
.story h2,.intentions h2 {letter-spacing: -2px;}
.intention,article {grid-template-columns: 1fr 45px;gap: 10px;}
.intention-number,article > small {grid-column: 1 / -1;}
.intention-symbol { margin-bottom: 15px;}
article > b {grid-column: 2;grid-row: 2;}
.principle {grid-template-columns: 50px 1fr;gap: 15px;}
.principles {margin-top: 45px }
.site-footer,.bottom {align-items: flex-start;flex-direction: column;padding: 35px 0;}
.bottom small {float: none;display: block;margin-top: 10px;}
  
@media (max-width: 768px) {
.site-footer,.bottom {align-items: center;flex-direction: column;padding: 35px 2%;gap: 0px;}
.button, .pill-button {width: 50%;text-align: center;align-content: center;align-items: center; display: block;}
}
@media (max-width: 480px) {
.hero-actions {align-items: flex-start;flex-direction: column;}
.button, .pill-button {width: 50%;text-align: center;align-content: center;align-items: center;display: block;}
.hero-art,.visual {height: 360px;}
.orbital i:nth-child(1),.orbit-one {width: 140px;height: 280px;}
.orbital i:nth-child(2),.orbit-two {width: 280px; height: 190px;}
.orbital i:nth-child(3),.orbit-three {width: 320px;height: 320px;}
.story h2,.intentions h2 {font-size: 42px;}
.intention h3,article h3 {font-size: 36px;}
.intention p,article p {font-size: 17px;}
}

/* REDUCED MOTION */
@media (prefers-reduced-motion: reduce) {
*,*::before,*::after {scroll-behavior: auto !important; animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;transition-duration: 0.01ms !important;}
}
.footer-logo {font-size: 28px;font-weight: 500;letter-spacing: 1px;width: 50px;}
.footer-logo  img {max-width: 100%;display: block;}

/* HEADER*/
.notes-image {width: 100%;max-width: 520px;margin: 40px auto 0;}
.notes-image img {display: block;width: 100%;height: auto;object-fit: contain;filter: drop-shadow( 0 0 25px rgba(90, 175, 48, 0.10));transition: transform 0.4s ease,filter 0.4s ease;}
.notes-image img:hover {transform: scale(1.02);filter: drop-shadow(0 0 35px rgba(90, 175, 48, 0.18));}
.approach-image {width: 100%;display: flex;justify-content: center;align-items: center;}
.approach-image img {width: 100%;max-width: 1200px;height: auto;display: block;margin: 0 auto;}
.approach-image img:hover {transform: scale(1.02);filter: drop-shadow(0 25px 55px rgba(0, 140, 200, 0.22));}
.approach-section {background:radial-gradient(circle at 70% 50%,rgba(0, 180, 220, 0.18) 0%,rgba(0, 100, 160, 0.10) 30%,transparent 65%),linear-gradient(135deg,#020914 0%,#061827 35%,#082d3c 65%,#03151f 100%);color: #ffffff;}

/* SYNKTUP SCROLL TO TOP */
.scroll-to-top {position: fixed;right: 28px;bottom: 90px;width: 58px;height: 58px;padding: 0;margin: 0;border: 2px solid rgba(255, 255, 255, 0.45);border-radius: 50%;background: linear-gradient(145deg,#d162b7 0%,#9f3587 45%,#c52ba0 100%);display: flex;align-items: center; justify-content: center;cursor: pointer;opacity: 0;visibility: hidden;transform: translateY(15px) scale(.9);box-shadow: 0 8px 25px rgba(0, 0, 0, 0.22),0 0 20px rgba(89, 180, 126, 0.35);transition:opacity .3s ease,visibility .3s ease,transform .3s ease,box-shadow .3s ease;z-index: 99998;}

/* VISIBLE */
.scroll-to-top.visible {opacity: 1;visibility: visible;transform: translateY(0) scale(1);}

/*  AI ORBIT*/
.ai-orbit {position: absolute;width: 40px;height: 19px;border: 1px solid rgba(255, 255, 255, 0.65);border-radius: 50%;transform: rotate(-35deg);animation: aiOrbit 5s linear infinite;}
.ai-orbit::after {content: "";position: absolute;inset: -5px 5px;border: 1px solid rgba(0, 116, 145, 0.45); border-radius: 50%;transform: rotate(70deg);}

/* AI CORE */
.ai-core {position: absolute;width: 7px;height: 7px;border-radius: 50%;background: #ffffff;box-shadow:0 0 5px #ffffff,0 0 12px rgba(255, 255, 255, 0.8);animation: aiPulse 2.4s ease-in-out infinite;z-index: 2;}

/* PROPER UP ARROW */
.ai-arrow {position: relative;width: 24px;height: 25px;display: block;z-index: 5;}

/* Arrow head */
.ai-arrow::before {content: "";position: absolute;width: 12px;height: 12px;left: 6px;top: 7px;border-left: 3px solid #ffffff;border-top: 3px solid #ffffff;transform: rotate(45deg);filter:drop-shadow(0 1px 2px rgba(0, 70, 60, 0.45));}

/* Arrow stem */
.ai-arrow::after {content: "";position: absolute;width: 3px;height: 17px;left: 11px;top: 8px;background: #ffffff;border-radius: 3px;box-shadow:0 1px 3px rgba(0, 70, 60, 0.4);}

/* HOVER */
.scroll-to-top:hover {transform: translateY(-5px) scale(1.08);box-shadow:0 12px 30px rgba(0, 0, 0, 0.25),0 0 28px rgba(89, 180, 126, 0.55),0 0 50px rgba(53, 214, 196, 0.22);}

/* ANIMATIONS */
@keyframes aiPulse {
0%,100% {transform: scale(.75);opacity: .65;}
50% {transform: scale(1.2);opacity: 1;}
}
@keyframes aiOrbit {
from {transform: rotate(-35deg)}
to {transform: rotate(325deg);}
}


/* MOBILE */
@media (max-width: 768px) {
.scroll-to-top {right: 18px;bottom: 18px; width: 52px;height: 52px;}
.ai-orbit {width: 35px;height: 17px;}
.ai-arrow {transform: scale(.9)}
}