:root{--bg:#FFFFFF;--panel:#008B9B;--muted:#008B9B;--line:rgba(255,255,255,.14);--white:#FFFFFF;--lime:#008B9B;--violet:#008B9B;--teal:#008B9B;--brand:#008B9B;--max:1260px;--radius:28px} *{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:100px}body{margin:0;background:var(--bg);color:var(--white);font-family:'DM Sans',sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}body.menu-open{overflow:hidden}::selection{background:var(--lime);color:var(--bg)}a{color:inherit;text-decoration:none}button,input,textarea,select{font:inherit}button{cursor:pointer}svg{display:block}img{max-width:100%}.container{width:min(calc(100% - 72px),var(--max));margin:auto}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}.skip{position:absolute;left:10px;top:-100px;background:var(--lime);color:#008B9B;padding:12px;z-index:300}.skip:focus{top:10px}:focus-visible{outline:2px solid var(--lime);outline-offset:4px} .noise{pointer-events:none;position:fixed;inset:0;z-index:10;opacity:.11;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.19'/%3E%3C/svg%3E")}.progress{height:2px;width:0;position:fixed;top:0;left:0;background:var(--lime);z-index:101;box-shadow:0 0 12px var(--lime)} .site-header{position:fixed;top:2px;left:0;right:0;z-index:100;transition:background .25s,border .25s}.site-header.scrolled{background:rgba(0,139,155,.91);border-bottom:1px solid var(--line);backdrop-filter:blur(24px)}.navbar{display:flex;align-items:center;justify-content:space-between;height:89px;gap:35px}.brand{display:flex;align-items:center;gap:12px;flex-shrink:0}.brand-icon{height:39px;width:39px;border:1px solid rgba(0,139,155,.37);background:#008B9B;border-radius:12px;display:grid;place-items:center;position:relative;overflow:hidden}.brand-icon img{width:30px;height:30px;object-fit:contain;filter:brightness(0) saturate(100%) invert(91%) sepia(18%) saturate(971%) hue-rotate(24deg) brightness(104%) contrast(101%);position:relative;z-index:2}.fallback-mark{display:none;color:var(--lime);font-size:30px;line-height:1;font-weight:600}.brand-icon.logo-fallback img{display:none}.brand-icon.logo-fallback .fallback-mark{display:block}.brand-name{font-family:'Space Grotesk',sans-serif;letter-spacing:-1.25px;font-weight:700;font-size:23px}.brand-name span{color:var(--lime)}.nav-links{display:flex;align-items:center;gap:35px}.nav-links a{color:#008B9B;font-size:13px;font-weight:600;transition:color .2s}.nav-links a:hover{color:var(--white)}.header-actions{display:flex;align-items:center;gap:16px}.tiny-badge{color:var(--lime);font-size:11px;letter-spacing:.1em;display:flex;align-items:center;gap:9px;white-space:nowrap}.tiny-badge i{display:block;width:7px;height:7px;border-radius:100%;background:var(--lime);box-shadow:0 0 0 5px rgba(0,139,155,.10)}.nav-cta{display:inline-flex;align-items:center;gap:15px;border:1px solid rgba(0,139,155,.42);padding:13px 18px;border-radius:100px;font-size:13px;font-weight:700;transition:.2s}.nav-cta:hover{background:var(--lime);color:var(--bg)}.menu-toggle{display:none;background:transparent;color:white;border:1px solid var(--line);width:42px;height:42px;border-radius:12px;font-size:22px}.mobile-nav{display:none} .hero{position:relative;min-height:860px;display:flex;align-items:center;overflow:hidden;padding:155px 0 120px;background:radial-gradient(ellipse at 73% 45%,rgba(0,139,155,.16),transparent 47%),radial-gradient(ellipse at 50% 85%,rgba(0,139,155,.06),transparent 48%)}.hero:before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:78px 78px;mask-image:linear-gradient(90deg,transparent 0,#008B9B 55%);pointer-events:none}.hero-glow{position:absolute;width:600px;height:600px;right:-170px;top:100px;border-radius:50%;background:radial-gradient(circle,rgba(0,139,155,.14),transparent 63%);filter:blur(30px);animation:glide 12s ease-in-out infinite alternate}.hero-grid{display:grid;grid-template-columns:.92fr 1.08fr;gap:28px;align-items:center;position:relative;z-index:2}.hero-copy{padding:12px 0 0}.eyebrow{display:flex;align-items:center;gap:10px;color:var(--lime);font-size:11px;font-weight:700;letter-spacing:.19em;text-transform:uppercase}.eyebrow-line{width:38px;height:1px;background:rgba(0,139,155,.48)}.eyebrow .star{font-size:18px;line-height:1}.hero h1{font-family:'Space Grotesk',sans-serif;font-size:clamp(62px,6.4vw,98px);letter-spacing:-.085em;line-height:.99;font-weight:600;margin:29px 0}.hero h1 .outline{color:transparent;-webkit-text-stroke:1.3px rgba(255,255,255,.78)}.hero h1 .accent{color:var(--lime);position:relative}.hero h1 .accent:after{content:"";position:absolute;left:2%;right:2%;bottom:-8px;height:6px;background:var(--lime);border-radius:100%;transform:rotate(-2deg)}.hero-description{font-size:17px;line-height:1.85;max-width:510px;color:#008B9B}.hero-description strong{color:var(--white);font-weight:600}.hero-buttons{display:flex;align-items:center;gap:26px;flex-wrap:wrap;margin-top:34px}.btn{display:inline-flex;justify-content:center;align-items:center;gap:22px;padding:17px 21px;border-radius:100px;font-weight:700;font-size:14px;transition:transform .25s,background .25s;white-space:nowrap}.btn:hover{transform:translateY(-3px)}.btn-primary{background:var(--lime);color:var(--bg);box-shadow:0 10px 45px rgba(0,139,155,.15)}.btn-primary span{width:26px;height:26px;border-radius:50%;background:rgba(0,139,155,.13);display:grid;place-items:center;font-size:17px}.btn-text{color:#FFFFFF;padding:12px 0}.btn-text .down{color:var(--lime);font-size:20px}.hero-proof{display:flex;align-items:center;gap:12px;color:#008B9B;font-size:12px;margin-top:64px;line-height:1.6}.hero-proof .proof-symbol{font-size:27px;color:var(--violet)}.hero-proof b{color:#FFFFFF;font-weight:500} .visual-wrap{height:630px;position:relative;isolation:isolate;display:flex;align-items:center;justify-content:center}.visual-wrap:before{content:"";position:absolute;inset:8% 0 10% 0;border-radius:50%;background:radial-gradient(circle,rgba(0,139,155,.16),rgba(0,139,155,.055) 42%,transparent 69%);filter:blur(30px);z-index:-2}.orbit{position:absolute;border:1px dashed rgba(0,139,155,.17);border-radius:50%;width:650px;height:650px;transform:rotate(-20deg);animation:spin 75s linear infinite;z-index:-1}.orbit:before{content:"";position:absolute;top:24%;left:6%;width:9px;height:9px;background:var(--lime);border-radius:100%;box-shadow:0 0 20px var(--lime)}.orbit.two{width:520px;height:520px;border-style:solid;border-color:rgba(0,139,155,.08);animation-direction:reverse;animation-duration:58s}.orbit.two:before{background:var(--violet);box-shadow:0 0 20px var(--violet)}.workflow-window{position:relative;width:min(100%,565px);min-height:530px;background:linear-gradient(140deg,rgba(0,139,155,.96),rgba(0,139,155,.95));border:1px solid rgba(255,255,255,.18);border-radius:27px;box-shadow:0 45px 110px rgba(0,139,155,.42),0 0 0 6px rgba(255,255,255,.025);overflow:hidden;animation:levitate 7s ease-in-out infinite}.window-top{padding:21px 24px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.window-top-left{display:flex;gap:12px;align-items:center;font-size:11px;letter-spacing:.09em;color:#008B9B;font-weight:700}.window-dots{display:flex;gap:5px}.window-dots i{width:7px;height:7px;background:#008B9B;border-radius:50%}.window-dots i:first-child{background:var(--violet)}.live-pill{font-size:10px;color:var(--lime);font-weight:700;letter-spacing:.12em;display:flex;align-items:center;gap:6px}.pulse-dot{height:6px;width:6px;background:var(--lime);border-radius:50%;box-shadow:0 0 0 4px rgba(0,139,155,.11);animation:pulse 2s infinite}.window-body{padding:27px 26px 25px;position:relative;background-image:radial-gradient(rgba(0,139,155,.07) 1px,transparent 1px);background-size:23px 23px}.workflow-title-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px;gap:10px}.workflow-title-row h3{margin:0;font:600 23px/1.2 'Space Grotesk',sans-serif;letter-spacing:-.04em}.workflow-title-row .demo-tag{font-size:10px;border:1px solid rgba(0,139,155,.33);color:#008B9B;border-radius:100px;padding:7px 11px;white-space:nowrap}.flow-stack{display:grid;gap:18px;padding-left:36px;position:relative}.flow-stack:before{position:absolute;content:"";width:2px;top:24px;bottom:28px;left:14px;background:linear-gradient(var(--lime),var(--violet) 75%,rgba(0,139,155,.1));}.flow-step{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;background:#008B9B;border:1px solid rgba(255,255,255,.13);border-radius:15px;padding:15px 17px;box-shadow:0 10px 18px rgba(0,139,155,.13);animation:pop 3.5s ease-in-out infinite}.flow-step:nth-child(2){animation-delay:.4s}.flow-step:nth-child(3){animation-delay:.8s}.flow-step:nth-child(4){animation-delay:1.2s}.flow-step:before{position:absolute;content:"";width:11px;height:11px;border:2px solid var(--bg);outline:2px solid var(--lime);background:var(--lime);border-radius:50%;left:-28px;top:calc(50% - 6px);box-shadow:0 0 16px rgba(0,139,155,.55)}.flow-step:nth-child(2):before,.flow-step:nth-child(3):before{background:var(--violet);outline-color:var(--violet)}.flow-step:nth-child(4):before{background:var(--teal);outline-color:var(--teal)}.step-info{display:flex;align-items:center;gap:12px;min-width:0}.step-icon{height:36px;width:36px;flex:0 0 36px;display:grid;place-items:center;background:rgba(0,139,155,.10);color:var(--lime);font-size:18px;border-radius:11px}.flow-step:nth-child(2) .step-icon,.flow-step:nth-child(3) .step-icon{background:rgba(0,139,155,.15);color:var(--violet)}.flow-step:nth-child(4) .step-icon{background:rgba(0,139,155,.11);color:var(--teal)}.step-info strong{display:block;font-size:13px;line-height:1.5}.step-info small{display:block;color:#008B9B;font-size:10px;margin-top:2px}.step-state{color:var(--lime);background:rgba(0,139,155,.09);font-weight:700;letter-spacing:.06em;font-size:9px;border:1px solid rgba(0,139,155,.13);padding:6px 8px;border-radius:100px;white-space:nowrap}.flow-step:nth-child(2) .step-state,.flow-step:nth-child(3) .step-state{color:#008B9B;background:rgba(0,139,155,.08);border-color:rgba(0,139,155,.16)}.flow-step:nth-child(4) .step-state{color:var(--teal);background:rgba(0,139,155,.07);border-color:rgba(0,139,155,.16)}.window-footer{display:flex;gap:9px;align-items:center;justify-content:space-between;margin-top:19px;padding-top:14px;border-top:1px solid var(--line);font-size:10px;letter-spacing:.09em;color:#008B9B}.window-footer span:last-child{color:var(--teal)}.float-chip{position:absolute;z-index:3;border-radius:13px;backdrop-filter:blur(20px);box-shadow:0 20px 40px rgba(0,139,155,.25);animation:levitate 5s ease-in-out infinite}.chip-a{top:57px;right:-45px;display:flex;align-items:center;gap:11px;padding:15px;background:#008B9B;color:#008B9B;transform:rotate(5deg);font-weight:700;font-size:12px}.chip-a .chip-icon{font-size:20px}.chip-b{bottom:32px;left:-55px;background:rgba(0,139,155,.96);border:1px solid rgba(0,139,155,.36);padding:15px 17px;animation-delay:1s;max-width:210px}.chip-b .upper{font-size:9px;color:#008B9B;letter-spacing:.1em}.chip-b strong{display:block;margin-top:6px;color:#FFFFFF;font-family:'Space Grotesk';font-size:16px;line-height:1.25}.chip-b .check{color:var(--teal)}.hero-bottom{position:absolute;bottom:27px;left:0;right:0;z-index:4;display:flex;align-items:center;justify-content:space-between;font-size:10px;font-weight:700;letter-spacing:.16em;color:#008B9B}.down-indicator{display:inline-flex;align-items:center;gap:9px}.down-indicator i{font-size:18px;color:var(--lime);font-style:normal;animation:bob 1.6s ease-in-out infinite} .marquee{overflow:hidden;background:var(--lime);border-top:1px solid rgba(255,255,255,.06);border-bottom:1px solid rgba(255,255,255,.05);color:#008B9B;transform:rotate(-1.3deg) scale(1.025);position:relative;z-index:4}.marquee-inner{display:flex;gap:0;width:max-content;animation:marquee 34s linear infinite;padding:21px 0}.marquee span{font:700 15px/1 'Space Grotesk',sans-serif;letter-spacing:.07em;white-space:nowrap;display:flex;align-items:center;gap:27px;padding-right:27px}.marquee em{font-size:21px;font-style:normal} .section{padding:132px 0;position:relative}.section-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:26px;color:var(--lime);font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase}.section-top .right{color:#008B9B}.section-heading{font:600 clamp(43px,5.2vw,74px)/1.06 'Space Grotesk',sans-serif;letter-spacing:-.065em;margin:0}.section-heading em{font-style:normal;color:var(--lime)}.section-intro{display:flex;align-items:end;justify-content:space-between;gap:35px;margin-bottom:55px}.section-intro p{color:#008B9B;font-size:16px;line-height:1.8;max-width:430px;margin:0} .services-section{background:radial-gradient(circle at 0 55%,rgba(0,139,155,.10),transparent 35%)}.service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:17px}.service-card{position:relative;min-height:345px;padding:31px;border:1px solid var(--line);border-radius:22px;background:linear-gradient(160deg,#008B9B,#008B9B 85%);overflow:hidden;display:flex;flex-direction:column;transition:transform .35s,border .35s,box-shadow .35s}.service-card:hover{transform:translateY(-9px);border-color:rgba(0,139,155,.48);box-shadow:0 24px 50px rgba(0,139,155,.19)}.service-card:after{content:"";width:190px;height:190px;border-radius:50%;background:var(--lime);opacity:.07;filter:blur(60px);position:absolute;right:-80px;bottom:-80px;transition:opacity .3s}.service-card:hover:after{opacity:.16}.service-card:first-child{background:linear-gradient(140deg,#008B9B,#008B9B 67%);border-color:rgba(0,139,155,.33)}.service-card:nth-child(2):after{background:var(--violet)}.service-card:nth-child(3):after{background:var(--teal)}.service-icon{width:62px;height:62px;border-radius:17px;display:grid;place-items:center;border:1px solid rgba(0,139,155,.24);background:rgba(0,139,155,.08);color:var(--lime);font-size:30px;margin-bottom:auto}.service-card:nth-child(2) .service-icon{color:#008B9B;border-color:rgba(0,139,155,.30);background:rgba(0,139,155,.10)}.service-card:nth-child(3) .service-icon{color:var(--teal);border-color:rgba(0,139,155,.30);background:rgba(0,139,155,.10)}.service-card .num{font-size:10px;letter-spacing:.14em;font-weight:700;color:#008B9B;position:absolute;right:32px;top:34px}.service-card h3{font:600 25px/1.15 'Space Grotesk',sans-serif;letter-spacing:-.04em;margin:28px 0 11px}.service-card p{color:#008B9B;line-height:1.7;font-size:14px;margin:0;max-width:320px}.service-card .card-bottom{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--line);margin-top:21px;padding-top:18px;color:#008B9B;font-size:11px;font-weight:700;letter-spacing:.06em}.card-bottom span:last-child{color:var(--lime);font-size:21px} .showcase{background:#FFFFFF;color:#008B9B;overflow:hidden}.showcase .section-top{color:#008B9B}.showcase .section-top .right{color:#008B9B}.showcase .section-heading em{color:#008B9B}.showcase .section-intro p{color:#008B9B}.showcase-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:27px}.tab{border:1px solid rgba(0,139,155,.14);background:rgba(255,255,255,.55);border-radius:100px;padding:13px 21px;font-size:13px;font-weight:700;color:#008B9B;transition:.2s}.tab:hover{border-color:#008B9B}.tab[aria-selected="true"]{background:#008B9B;color:var(--lime);border-color:#008B9B;box-shadow:0 10px 20px rgba(0,139,155,.11)}.showcase-panel{border-radius:27px;background:#008B9B;min-height:445px;color:white;display:grid;grid-template-columns:.75fr 1.25fr;overflow:hidden;border:1px solid rgba(255,255,255,.12);box-shadow:0 27px 60px rgba(0,139,155,.14)}.panel-copy{padding:52px;display:flex;flex-direction:column;align-items:start;justify-content:center}.panel-kicker{font-size:11px;color:var(--lime);font-weight:700;letter-spacing:.15em}.panel-copy h3{font:600 clamp(31px,3vw,43px)/1.1 'Space Grotesk',sans-serif;letter-spacing:-.06em;margin:24px 0 15px}.panel-copy p{color:#008B9B;font-size:15px;line-height:1.85;margin:0 0 27px}.panel-copy ul{padding:0;margin:0;display:grid;gap:12px;list-style:none}.panel-copy li{display:flex;gap:12px;align-items:center;font-size:13px;color:#FFFFFF}.panel-copy li:before{content:'✓';font-weight:bold;color:var(--lime)}.diagram{position:relative;min-height:445px;background:radial-gradient(circle at 51% 48%,rgba(0,139,155,.19),transparent 55%),linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:auto,42px 42px,42px 42px;display:flex;align-items:center;justify-content:center;padding:25px}.diagram-inner{display:flex;align-items:center;justify-content:center;gap:12px;width:100%}.diagram-box{min-height:122px;width:145px;padding:17px 10px;text-align:center;border:1px solid rgba(255,255,255,.16);background:#008B9B;border-radius:16px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:10px;box-shadow:0 20px 35px rgba(0,139,155,.16);position:relative}.diagram-box:nth-child(3){border-color:rgba(0,139,155,.49);background:#008B9B}.diagram-box:nth-child(5){border-color:rgba(0,139,155,.38);background:#008B9B}.diagram-icon{font-size:29px;line-height:1}.diagram-box strong{font-family:'Space Grotesk';font-weight:600;line-height:1.2;font-size:14px}.diagram-box small{font-size:10px;color:#008B9B}.diagram-arrow{color:var(--lime);font-size:21px;animation:slide 1.9s ease-in-out infinite}.diagram-note{position:absolute;bottom:32px;right:35px;background:rgba(0,139,155,.1);border:1px solid rgba(0,139,155,.2);border-radius:8px;padding:8px 12px;font-size:10px;color:var(--lime);letter-spacing:.12em}.diagram .particle{position:absolute;width:8px;height:8px;background:var(--lime);border-radius:50%;top:22%;left:25%;box-shadow:0 0 25px var(--lime);animation:float 5s ease-in-out infinite}.diagram .particle.second{left:83%;top:75%;background:var(--violet);animation-delay:1.6s;box-shadow:0 0 25px var(--violet)} .outcomes{background:#008B9B}.outcomes-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}.outcomes-art{position:relative;min-height:500px;display:grid;place-items:center}.ring-outer{width:425px;height:425px;border:1px solid rgba(0,139,155,.2);border-radius:50%;position:absolute;animation:spin 40s linear infinite}.ring-outer:before{content:'✦';position:absolute;color:var(--lime);font-size:30px;left:44px;top:47px}.ring-inner{width:320px;height:320px;border:1px dashed rgba(0,139,155,.35);border-radius:50%;position:absolute;animation:spin 40s linear infinite reverse}.art-center{width:210px;height:210px;display:grid;place-items:center;border-radius:50%;background:radial-gradient(circle at 25% 20%,#008B9B,#008B9B 60%,#008B9B);box-shadow:0 0 90px rgba(0,139,155,.19),inset 0 0 28px rgba(0,139,155,.16);border:1px solid rgba(0,139,155,.22);font:600 51px 'Space Grotesk';color:var(--lime);position:relative}.art-center span{position:absolute;bottom:45px;font-size:10px;letter-spacing:.19em;font-weight:500;color:#FFFFFF}.art-floating{position:absolute;background:#008B9B;border:1px solid rgba(255,255,255,.15);border-radius:12px;padding:15px 17px;display:flex;gap:10px;align-items:center;font-size:12px;font-weight:700;box-shadow:0 18px 30px rgba(0,139,155,.17)}.art-floating:nth-last-child(2){right:1%;top:20%}.art-floating:nth-last-child(1){left:0%;bottom:17%}.art-floating i{font-size:19px;font-style:normal;color:var(--lime)}.benefits{display:grid;gap:0;margin-top:39px}.benefit{padding:24px 0;border-top:1px solid var(--line);display:grid;grid-template-columns:44px 1fr;gap:17px}.benefit .benefit-icon{color:var(--lime);font-size:27px}.benefit h3{margin:0 0 5px;font:600 19px 'Space Grotesk';letter-spacing:-.035em}.benefit p{font-size:14px;color:#008B9B;line-height:1.7;margin:0} .secondary-services{background:#008B9B}.secondary-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.secondary-card{border:1px solid var(--line);border-radius:20px;padding:25px;min-height:220px;background:rgba(255,255,255,.025);display:flex;flex-direction:column;transition:.25s}.secondary-card:hover{background:rgba(0,139,155,.07);transform:translateY(-5px)}.secondary-card>span{font-size:28px;color:var(--lime)}.secondary-card h3{font:600 20px 'Space Grotesk';letter-spacing:-.04em;margin:auto 0 10px}.secondary-card p{font-size:13px;line-height:1.65;margin:0;color:#008B9B} .process{background:var(--bg)}.process-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:57px}.process-item{padding:26px;border-top:1px solid rgba(0,139,155,.45);position:relative}.process-item:before{position:absolute;content:"";width:9px;height:9px;border-radius:50%;background:var(--lime);top:-5px;left:25px;box-shadow:0 0 19px rgba(0,139,155,.3)}.process-item .p-num{color:var(--lime);font-size:12px;letter-spacing:.1em}.process-item h3{font:600 22px 'Space Grotesk';margin:32px 0 13px;letter-spacing:-.04em}.process-item p{color:#008B9B;font-size:14px;line-height:1.75;margin:0}.process-foot{margin-top:47px;color:#008B9B;font-size:13px;padding:19px 23px;border:1px solid var(--line);border-radius:13px;display:flex;gap:12px;align-items:center}.process-foot span{color:var(--lime);font-size:20px} .faq{background:#008B9B}.faq-layout{display:grid;grid-template-columns:.85fr 1.15fr;gap:80px;align-items:start}.faq-question{border-bottom:1px solid var(--line)}.faq-question:first-child{border-top:1px solid var(--line)}.faq-question button{border:0;color:var(--white);background:transparent;padding:23px 1px;width:100%;text-align:left;display:flex;align-items:center;justify-content:space-between;gap:20px;font-size:16px;font-weight:700}.faq-question button span:last-child{border:1px solid rgba(0,139,155,.3);color:var(--lime);width:26px;height:26px;display:grid;place-items:center;border-radius:50%;flex:0 0 26px;font-size:18px;transition:.25s}.faq-question button[aria-expanded=true] span:last-child{transform:rotate(45deg);background:var(--lime);color:#008B9B}.faq-answer{font-size:14px;line-height:1.75;color:#008B9B;padding:0 40px 23px 1px;max-width:650px}.faq-answer[hidden]{display:none} .contact{background:#008B9B;color:#008B9B;padding:105px 0 65px;overflow:hidden;position:relative}.contact:before{content:"✳";position:absolute;color:rgba(0,139,155,.06);font-size:600px;line-height:1;right:-100px;top:-100px;pointer-events:none}.contact .section-top{color:#008B9B}.contact h2{font:600 clamp(65px,8vw,126px)/.98 'Space Grotesk';letter-spacing:-.085em;position:relative;margin:30px 0}.contact h2 em{font-style:normal;color:#008B9B}.contact p{font-size:17px;line-height:1.8;color:#008B9B;max-width:620px;position:relative}.contact-buttons{display:flex;align-items:center;flex-wrap:wrap;gap:14px;margin-top:37px;position:relative}.btn-dark{background:#008B9B;color:#008B9B}.btn-outline-dark{color:#008B9B;border:1px solid rgba(0,139,155,.34)}.contact-line{margin-top:105px;border-top:1px solid rgba(0,139,155,.23);padding-top:22px;display:flex;align-items:center;justify-content:space-between;gap:24px;position:relative;font-size:12px;font-weight:700}.contact-line a:hover{text-decoration:underline} .site-footer{background:#008B9B;padding:43px 0 50px}.footer-inner{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:18px}.footer-inner .brand-name{font-size:20px}.footer-inner p{font-size:12px;color:#008B9B;margin:0}.footer-links{display:flex;gap:22px;flex-wrap:wrap}.footer-links a{font-size:12px;color:#008B9B}.footer-links a:hover{color:var(--lime)} .reveal{opacity:0;transform:translateY(25px);transition:opacity .75s ease,transform .75s cubic-bezier(.22,1,.36,1)}.reveal.visible{opacity:1;transform:translateY(0)}.stagger>*:nth-child(2){transition-delay:.08s}.stagger>*:nth-child(3){transition-delay:.16s}.stagger>*:nth-child(4){transition-delay:.24s} @keyframes levitate{0%,100%{transform:translateY(0)}50%{transform:translateY(-13px)}}@keyframes glide{0%{transform:translate(0,0)}100%{transform:translate(-80px,60px)}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes pulse{50%{opacity:.45;box-shadow:0 0 0 8px rgba(0,139,155,.03)}}@keyframes pop{0%,90%,100%{border-color:rgba(255,255,255,.13)}35%{border-color:rgba(0,139,155,.3)}}@keyframes bob{50%{transform:translateY(5px)}}@keyframes marquee{to{transform:translateX(-50%)}}@keyframes slide{50%{transform:translateX(5px);opacity:.5}}@keyframes float{50%{transform:translate(18px,12px)}} @media(max-width:1180px){.nav-links{gap:20px}.tiny-badge{display:none}.hero-grid{grid-template-columns:1fr 1fr}.hero h1{font-size:clamp(58px,6.7vw,82px)}.chip-a{right:-9px}.chip-b{left:-8px}.orbit{width:580px;height:580px}.orbit.two{width:440px;height:440px}.diagram-box{width:120px}.panel-copy{padding:35px}.outcomes-grid{gap:35px}} @media(max-width:920px){.container{width:min(calc(100% - 44px),var(--max))}.nav-links{display:none}.header-actions .nav-cta{display:none}.menu-toggle{display:block}.mobile-nav{display:flex;flex-direction:column;gap:0;padding:10px 25px 25px;background:rgba(0,139,155,.98);border-bottom:1px solid var(--line);backdrop-filter:blur(20px)}.mobile-nav[hidden]{display:none}.mobile-nav a{padding:16px 0;border-bottom:1px solid var(--line);font-size:17px}.hero{padding:130px 0 95px;min-height:0}.hero-grid{grid-template-columns:1fr}.hero h1{font-size:clamp(64px,10vw,93px)}.hero-copy{padding-top:35px}.hero-description{max-width:650px}.hero-proof{margin-top:34px}.visual-wrap{width:min(100%,680px);margin:15px auto 0;height:610px}.hero-bottom{bottom:22px}.service-grid{grid-template-columns:repeat(2,1fr)}.service-card:last-child{grid-column:1 / -1;min-height:290px}.section{padding:100px 0}.section-intro{align-items:start;flex-direction:column}.section-intro p{max-width:670px}.showcase-panel{grid-template-columns:1fr}.panel-copy{padding:43px}.diagram{min-height:330px}.outcomes-grid{grid-template-columns:1fr}.outcomes-art{min-height:410px;order:2}.secondary-grid{grid-template-columns:repeat(2,1fr)}.process-grid{grid-template-columns:repeat(2,1fr);row-gap:23px}.faq-layout{grid-template-columns:1fr;gap:30px}.contact{padding-top:85px}.contact h2{font-size:clamp(65px,10vw,108px)}} @media(max-width:560px){.container{width:min(calc(100% - 36px),var(--max))}.navbar{height:70px}.brand-name{font-size:20px}.brand-icon{width:34px;height:34px}.brand-icon img{width:26px;height:26px}.hero{padding:106px 0 85px}.hero h1{font-size:clamp(51px,12.4vw,72px);margin:25px 0}.hero-description{font-size:15px;line-height:1.75}.hero-buttons{gap:9px}.btn{font-size:12px;padding:13px 17px;gap:11px}.hero-proof{font-size:11px}.visual-wrap{height:410px;margin-top:20px}.workflow-window{min-height:0;border-radius:17px;transform:scale(.83);width:112%;flex:0 0 112%;animation:none}.window-top{padding:15px}.window-body{padding:17px}.workflow-title-row h3{font-size:18px}.flow-stack{gap:10px}.flow-step{padding:10px 11px}.step-icon{width:27px;height:27px;flex-basis:27px;font-size:15px}.step-info{gap:7px}.step-info strong{font-size:11px}.step-info small{font-size:9px}.step-state{font-size:8px;padding:5px}.float-chip{transform:scale(.73);animation:none}.chip-a{right:-35px;top:0}.chip-b{bottom:-4px;left:-40px}.orbit{width:400px;height:400px}.orbit.two{width:300px;height:300px}.hero-bottom{font-size:8px}.marquee-inner{padding:17px 0}.marquee span{font-size:12px}.section{padding:78px 0}.section-heading{font-size:clamp(40px,9.8vw,60px)}.section-top{font-size:9px}.section-intro{gap:20px;margin-bottom:35px}.section-intro p{font-size:14px}.service-grid{grid-template-columns:1fr}.service-card,.service-card:last-child{min-height:280px;grid-column:auto}.showcase-tabs{display:grid;grid-template-columns:1fr 1fr}.tab{font-size:11px;padding:11px 12px}.panel-copy{padding:29px}.panel-copy h3{font-size:35px}.diagram{min-height:265px;padding:15px 8px}.diagram-inner{gap:5px}.diagram-box{width:92px;min-height:100px;padding:10px 5px;gap:7px;border-radius:10px}.diagram-icon{font-size:22px}.diagram-box strong{font-size:11px}.diagram-box small{font-size:8px}.diagram-arrow{font-size:13px}.diagram-note{bottom:13px;right:11px;font-size:8px}.ring-outer{width:315px;height:315px}.ring-inner{width:250px;height:250px}.art-center{width:170px;height:170px;font-size:42px}.art-center span{bottom:31px}.outcomes-art{min-height:350px}.art-floating{font-size:10px;padding:11px;max-width:150px}.art-floating:nth-last-child(2){right:0;top:14%}.art-floating:nth-last-child(1){bottom:10%}.secondary-grid{grid-template-columns:1fr 1fr}.secondary-card{padding:16px;min-height:200px}.secondary-card h3{font-size:17px}.secondary-card p{font-size:12px}.process-grid{grid-template-columns:1fr 1fr;gap:20px 8px}.process-item{padding:21px 13px}.process-item:before{left:13px}.process-item h3{font-size:18px}.process-item p{font-size:12px}.faq-question button{font-size:14px}.contact h2{font-size:clamp(59px,12vw,85px)}.contact p{font-size:15px}.contact-line{margin-top:70px;flex-direction:column;align-items:start}.footer-inner{align-items:start;flex-direction:column}.footer-links{gap:12px}} html,body{max-width:100%;overflow-x:clip} @media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}.reveal{opacity:1;transform:none}} /* ──────────────────────────────────────────────────────────────────────────── v2: Softer editorial surfaces, 3D depth, and CargoPro project story ──────────────────────────────────────────────────────────────────────────── */ :root{--easing:cubic-bezier(.22,1,.36,1);--rounded:32px;--purple-haze:#008B9B} html{scroll-padding-top:94px} body{background:#008B9B} .site-header.scrolled{border-radius:0 0 25px 25px;background:rgba(0,139,155,.86)} .brand-icon{border-radius:15px} .nav-cta,.btn,.tab,.story-tab{transition:transform .45s var(--easing),box-shadow .45s var(--easing),background .35s ease,color .35s ease,border-color .35s ease} .nav-cta:hover,.btn:hover{box-shadow:0 15px 36px rgba(0,139,155,.19)} .hero{isolation:isolate} .hero:after{content:"";position:absolute;bottom:-145px;left:26%;width:440px;height:260px;background:rgba(0,139,155,.09);border-radius:60% 40% 70% 30%;filter:blur(65px);pointer-events:none;animation:fluidShape 13s ease-in-out infinite alternate} .visual-wrap{perspective:1300px} .workflow-window{--tilt-x:0deg;--tilt-y:0deg;transform-style:preserve-3d;animation:none;transition:box-shadow .35s ease,filter .35s ease;will-change:transform} .workflow-window:hover{filter:none} @keyframes dashboardFloat{0%,100%{transform:translateY(0) rotateX(var(--tilt-x)) rotateY(var(--tilt-y))}50%{transform:translateY(-13px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y))}} @keyframes fluidShape{to{transform:translate3d(-80px,-55px,0) rotate(30deg);border-radius:30% 70% 35% 65%}} .service-card{border-radius:32px;overflow:hidden} .service-card:after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;background:radial-gradient(260px circle at var(--hover-x,50%) var(--hover-y,50%),rgba(0,139,155,.12),transparent 70%);opacity:0;transition:opacity .5s} .service-card:hover:after{opacity:1} .showcase-panel,.secondary-card,.diagram-box,.process-foot,.float-chip{border-radius:27px} .secondary-card{min-height:256px} .section{position:relative} /* Featured case study / softly lit, rounded, cinematic */ .portfolio-section{padding:122px 0 116px;overflow:hidden;isolation:isolate;background:linear-gradient(155deg,#008B9B 4%,#008B9B 47%,#008B9B 100%);border-radius:76px 76px 68px 68px;z-index:1;margin-top:-12px;margin-bottom:-12px} .portfolio-section .container{position:relative;z-index:2} .portfolio-light{position:absolute;pointer-events:none;filter:blur(65px);border-radius:50%;opacity:.55} .portfolio-light-a{width:620px;height:650px;top:-190px;right:-140px;background:radial-gradient(circle,rgba(0,139,155,.22),transparent 65%);animation:driftOrb 12s ease-in-out infinite alternate} .portfolio-light-b{width:520px;height:440px;bottom:-220px;left:-120px;background:radial-gradient(circle,rgba(0,139,155,.12),transparent 68%);animation:driftOrb 15s ease-in-out infinite alternate-reverse} @keyframes driftOrb{to{transform:translate(90px,70px) scale(1.1)}} .portfolio-head{display:grid;grid-template-columns:1.35fr .65fr;gap:45px;align-items:end;margin:34px 0 43px} .portfolio-head h2{font-size:clamp(47px,5.2vw,75px);margin:23px 0 0;line-height:1.09} .portfolio-head h2 em{color:var(--lime)} .portfolio-head>p{font-size:16px;color:#008B9B;line-height:1.85;max-width:400px;margin:0 0 7px} .project-tag{font-size:11px;font-weight:800;letter-spacing:.15em;color:var(--lime);display:flex;align-items:center;gap:10px} .tag-dot{width:9px;height:9px;display:inline-block;border-radius:50%;background:var(--lime);box-shadow:0 0 0 5px rgba(0,139,155,.1)} .tag-separator{color:#008B9B;margin:0 5px} .project-feature{position:relative;overflow:hidden;border:1px solid rgba(0,139,155,.19);border-radius:41px;background:linear-gradient(145deg,rgba(0,139,155,.95),rgba(0,139,155,.98) 72%);box-shadow:0 30px 90px rgba(0,139,155,.21),inset 0 1px rgba(255,255,255,.06)} .project-feature:before{content:"";pointer-events:none;position:absolute;width:480px;height:480px;right:4%;top:10%;background:rgba(0,139,155,.13);filter:blur(60px);border-radius:50%} .project-topbar{height:91px;padding:0 35px;border-bottom:1px solid rgba(255,255,255,.1);display:flex;align-items:center;justify-content:space-between;gap:12px;position:relative;z-index:3} .project-identity{display:flex;align-items:center;gap:14px} .project-icon{height:43px;width:43px;border-radius:15px;background:#008B9B;color:#008B9B;display:grid;place-items:center;font-size:25px;font-weight:700} .project-identity strong{display:block;font:700 22px 'Space Grotesk',sans-serif;letter-spacing:-.055em} .project-identity small{display:block;color:#008B9B;font-size:11px;margin-top:4px} .project-status{color:#FFFFFF;display:flex;align-items:center;gap:10px;letter-spacing:.12em;font-size:10px;font-weight:700} .project-status i{height:6px;width:6px;border-radius:50%;background:#008B9B;box-shadow:0 0 0 6px rgba(0,139,155,.09)} .project-main{display:grid;grid-template-columns:.78fr 1.22fr;align-items:stretch;gap:5px;padding:30px 24px 23px 44px;position:relative} .story-copy{padding:19px 25px 23px 0;display:flex;flex-direction:column;min-height:510px} .story-counter{display:flex;align-items:center;gap:12px;color:#008B9B;font:600 12px 'Space Grotesk',sans-serif;letter-spacing:.07em} .story-counter>span:first-child{font:700 30px 'Space Grotesk';color:var(--lime);letter-spacing:-.08em} .story-divider{height:1px;width:33px;background:#008B9B} .story-sidenote{font:700 9px 'DM Sans',sans-serif;margin-left:14px;color:#008B9B;letter-spacing:.19em} .story-pages{flex:1;margin-top:39px} .story-page{max-width:440px;transform-origin:left center} .story-page.is-active{animation:storyReveal .7s var(--easing) both} .story-eyebrow{color:#008B9B;letter-spacing:.19em;font-size:10px;font-weight:800} .story-page h3{font:600 clamp(31px,3.2vw,47px)/1.09 'Space Grotesk',sans-serif;letter-spacing:-.064em;margin:17px 0 20px;color:#FFFFFF} .story-page p{font-size:14px;line-height:1.85;color:#008B9B;margin:0 0 22px} .story-page ul{list-style:none;padding:0;margin:0;display:grid;gap:10px} .story-page li{font-size:12px;color:#FFFFFF;display:flex;gap:10px;align-items:center} .story-page li:before{content:'✳';color:var(--lime);font-size:13px;line-height:1} .story-actions{display:flex;gap:15px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-top:20px} .story-arrows{display:flex;gap:9px} .story-arrow{color:#FFFFFF;border:1px solid rgba(255,255,255,.24);background:rgba(255,255,255,.04);width:46px;height:46px;border-radius:50%;font-size:20px;display:grid;place-items:center;transition:.25s} .story-arrow:hover{color:#008B9B;border-color:var(--lime);background:var(--lime);transform:translateY(-3px)} .project-live-link{font-size:12px;font-weight:700;color:#008B9B;background:var(--lime);border-radius:40px;padding:14px 17px;display:inline-flex;gap:15px;align-items:center;transition:.35s var(--easing)} .project-live-link:hover{transform:translateY(-4px);box-shadow:0 14px 33px rgba(0,139,155,.22)} .project-live-link span{font-size:18px} .story-visual{position:relative;display:grid;place-items:center;min-width:0;perspective:1200px;min-height:525px} .story-visual:before{content:"";position:absolute;inset:4% 3% 4% 2%;border:1px dashed rgba(0,139,155,.16);border-radius:48% 52% 55% 45%;transform:rotate(-16deg);animation:spin 60s linear infinite} .mockup-glow{width:82%;height:80%;position:absolute;border-radius:50%;filter:blur(40px);background:radial-gradient(circle,rgba(0,139,155,.20),transparent 75%);animation:fluidShape 17s ease-in-out infinite alternate} .story-perspective{width:100%;max-width:770px;position:relative;padding:0 15px;transform-style:preserve-3d;--screen-tilt-x:4deg;--screen-tilt-y:-7deg;transform:rotateX(var(--screen-tilt-x)) rotateY(var(--screen-tilt-y));transition:transform .7s var(--easing)} .screen-frame{position:relative;width:100%;overflow:hidden;border:1px solid rgba(255,255,255,.6);border-radius:25px;background:#FFFFFF;box-shadow:25px 37px 65px rgba(0,139,155,.38),-10px -9px 35px rgba(0,139,155,.08);transform:translateZ(22px);transition:box-shadow .5s ease} .screen-bar{height:38px;display:flex;align-items:center;justify-content:space-between;gap:10px;background:linear-gradient(90deg,#FFFFFF,#FFFFFF);padding:0 15px;border-bottom:1px solid #FFFFFF;color:#008B9B;font-size:10px;font-weight:600;letter-spacing:.05em} .screen-dots{display:flex;gap:5px}.screen-dots i{display:block;height:7px;width:7px;background:#008B9B;border-radius:50%}.screen-dots i:first-child{background:#008B9B}.screen-dots i:nth-child(2){background:#008B9B} .screen-bar-icon{color:#008B9B;font-size:16px} .screen-images{position:relative;width:100%;height:430px;background:#FFFFFF;overflow:hidden;display:grid;place-items:center} .story-screen{width:100%;height:100%;object-fit:contain;object-position:center top;position:relative;box-shadow:none} .story-screen.is-active{animation:screenAppear .8s var(--easing) both} .float-ticket{position:absolute;right:1%;bottom:16px;z-index:4;border:1px solid rgba(0,139,155,.19);background:#008B9B;color:#FFFFFF;border-radius:18px;padding:13px 16px;font-size:10px;font-weight:800;letter-spacing:.11em;box-shadow:0 15px 45px rgba(0,139,155,.35);transform:translateZ(50px) rotate(5deg);animation:floatTicket 6s ease-in-out infinite} .float-ticket span{color:var(--lime);font-size:19px;vertical-align:middle;margin-right:6px} @keyframes floatTicket{50%{transform:translateY(-11px) rotate(2deg)}} @keyframes storyReveal{from{opacity:0;transform:translate3d(0,20px,0)}to{opacity:1;transform:translate3d(0,0,0)}} @keyframes screenAppear{from{opacity:.15;transform:scale(1.045) translateY(8px);filter:blur(8px)}to{opacity:1;transform:scale(1) translateY(0);filter:blur(0)}} .story-bottom{padding:20px 36px 24px 44px;border-top:1px solid rgba(255,255,255,.1);display:flex;align-items:center;justify-content:space-between;gap:16px;position:relative;z-index:2} .story-progress-label{font-size:10px;font-weight:800;color:#008B9B;letter-spacing:.13em;white-space:nowrap} .story-progress-label span{display:block;margin-top:9px;color:var(--lime);letter-spacing:.04em} .story-tabs{display:flex;gap:7px;align-items:center;flex-wrap:wrap} .story-tab{border-radius:90px;border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.035);color:#008B9B;padding:12px 16px;font-size:11px;font-weight:700} .story-tab span{font-size:10px;color:#008B9B;margin-right:7px} .story-tab.is-active,.story-tab[aria-selected=true]{border-color:rgba(0,139,155,.6);background:rgba(0,139,155,.11);color:var(--lime)} .story-tab:hover{background:rgba(0,139,155,.10)} .project-outro{display:flex;align-items:center;justify-content:space-between;gap:35px;padding:32px 3px 0} .project-outro p{font-size:13px;color:#008B9B;max-width:690px;line-height:1.8;margin:0;display:flex;align-items:flex-start;gap:12px} .project-outro strong{color:#FFFFFF;font-weight:600} .outro-asterisk{color:var(--lime);font-size:22px;line-height:1.2} .tech-pills{display:flex;gap:7px;flex-wrap:wrap;justify-content:flex-end;flex:0 0 auto} .tech-pills span{border:1px solid rgba(255,255,255,.15);border-radius:30px;padding:9px 12px;color:#FFFFFF;font-size:10px;font-weight:700} /* About: gentle orbital 3D sculpture */ .about-section{background:#008B9B;overflow:hidden;border-radius:0 0 78px 78px} .about-shell{display:grid;grid-template-columns:1.1fr .9fr;gap:55px;align-items:center} .about-copy{max-width:650px} .about-overline{display:block;color:var(--lime);letter-spacing:.20em;font-size:11px;font-weight:700;margin:40px 0 20px} .about-copy .section-heading{line-height:1.1;margin:0 0 24px} .about-copy p{color:#008B9B;line-height:1.85;font-size:15px} .about-link{display:inline-flex;align-items:center;gap:15px;color:var(--lime);font-weight:700;font-size:14px;margin-top:18px;border-bottom:1px solid rgba(0,139,155,.35);padding-bottom:10px} .about-orbit{height:480px;position:relative;display:grid;place-items:center;perspective:1000px;isolation:isolate} .about-orbit:before{content:"";position:absolute;inset:16%;border-radius:50%;background:radial-gradient(circle,rgba(0,139,155,.17),rgba(0,139,155,.08),transparent 68%);filter:blur(20px);animation:glide 16s ease-in-out infinite alternate} .about-orbit-ring{position:absolute;border-radius:50%;border:1px dashed rgba(0,139,155,.31);width:400px;height:400px;transform:rotateX(65deg) rotate(-25deg);animation:spin 60s linear infinite} .about-orbit-ring.ring-b{width:325px;height:325px;border:1px solid rgba(0,139,155,.18);transform:rotateY(60deg) rotate(17deg);animation-duration:48s;animation-direction:reverse} .about-core{width:245px;height:245px;border-radius:50%;display:flex;align-items:center;flex-direction:column;justify-content:center;position:relative;background:radial-gradient(circle at 28% 19%,#008B9B,#008B9B 53%,#008B9B);border:1px solid rgba(255,255,255,.24);box-shadow:0 35px 80px rgba(0,139,155,.37),inset -18px -28px 30px rgba(0,139,155,.25),inset 5px 8px 20px rgba(255,255,255,.07);animation:aboutFloat 9s ease-in-out infinite} .about-core:after{content:"";position:absolute;inset:9px;border:1px solid rgba(255,255,255,.07);border-radius:inherit} .about-core span{font:600 43px 'Space Grotesk';color:#FFFFFF;letter-spacing:-.08em} .about-core strong{font:600 27px 'Space Grotesk';color:var(--lime);letter-spacing:-.06em;margin:-4px 0 10px} .about-core small{font-size:8px;letter-spacing:.14em;color:#008B9B} .about-orbit-tag{position:absolute;background:rgba(0,139,155,.87);padding:11px 14px;border-radius:50px;border:1px solid rgba(255,255,255,.18);color:#FFFFFF;font-size:10px;letter-spacing:.10em;font-weight:700;box-shadow:0 10px 30px rgba(0,139,155,.2)} .about-orbit-tag.tag-a{left:7%;top:21%}.about-orbit-tag.tag-b{right:4%;top:34%;color:var(--lime)}.about-orbit-tag.tag-c{bottom:13%;left:16%} @keyframes aboutFloat{50%{transform:translateY(-20px) rotateY(12deg)}} /* Organic section transitions, never square-end the main visual journey */ .outcomes{border-radius:62px 62px 0 0;margin-top:-25px;padding-top:145px} .secondary-services{border-radius:74px 74px 0 0;margin-top:-15px} .contact{border-radius:90px 90px 0 0} .contact-line{flex-wrap:wrap} @media(max-width:1080px){ .portfolio-head{grid-template-columns:1fr;gap:15px}.portfolio-head>p{max-width:640px} .project-main{grid-template-columns:.9fr 1.1fr;padding:25px 20px 20px 29px}.story-copy{padding-right:11px}.story-page h3{font-size:34px}.screen-images{height:370px}.story-visual{min-height:460px}.project-outro{align-items:flex-start;flex-direction:column}.tech-pills{justify-content:flex-start} } @media(max-width:920px){ .portfolio-section{border-radius:56px;padding:90px 0 95px} .portfolio-head{margin-bottom:30px}.project-main{grid-template-columns:1fr;padding:25px 28px;gap:20px} .story-copy{min-height:0;padding:0}.story-pages{margin:25px 0 20px}.story-page{max-width:600px}.story-page h3{font-size:40px}.story-actions{margin-bottom:13px} .story-visual{min-height:470px}.story-perspective{max-width:700px;padding:0 25px}.screen-images{height:425px}.story-bottom{padding:22px 28px;align-items:flex-start;flex-direction:column}.story-progress-label span{display:inline;margin-left:9px} .about-shell{grid-template-columns:1fr}.about-orbit{height:385px}.about-core{width:220px;height:220px}.about-orbit-ring{width:350px;height:350px} } @media(max-width:560px){ .portfolio-section{border-radius:37px;padding:79px 0 82px} .portfolio-head h2{font-size:clamp(40px,10vw,60px)}.portfolio-head>p{font-size:14px}.project-tag{font-size:9px} .project-feature{border-radius:27px}.project-topbar{padding:0 18px;height:73px}.project-icon{height:36px;width:36px;border-radius:12px;font-size:21px}.project-identity strong{font-size:18px}.project-status{font-size:0;gap:0}.project-status i{height:6px;width:6px} .project-main{padding:22px 17px 18px;gap:12px}.story-counter>span:first-child{font-size:26px}.story-sidenote{font-size:8px;margin-left:4px} .story-page h3{font-size:36px}.story-page p{font-size:13px}.story-page li{font-size:11px}.story-actions{gap:10px}.story-arrow{width:42px;height:42px}.project-live-link{font-size:11px;padding:12px 15px} .story-visual{min-height:300px}.story-visual:before{inset:6% 8%}.story-perspective{padding:4px;transform:none!important}.screen-frame{border-radius:15px;transform:none}.screen-bar{height:29px;padding:0 10px;font-size:8px}.screen-images{height:265px}.float-ticket{font-size:8px;padding:9px 10px;bottom:0;right:-6px;border-radius:12px}.float-ticket span{font-size:14px} .story-bottom{padding:18px 15px 20px}.story-tabs{width:100%;display:grid;grid-template-columns:repeat(3,1fr);gap:5px}.story-tab{font-size:10px;line-height:1.35;padding:10px 5px;border-radius:14px}.story-tab span{display:block;margin:0 0 3px} .project-outro{gap:18px;padding-top:25px}.project-outro p{font-size:12px}.tech-pills span{padding:8px 10px} .about-shell{gap:8px}.about-copy p{font-size:14px}.about-orbit{height:340px}.about-orbit-ring{width:300px;height:300px}.about-orbit-ring.ring-b{width:255px;height:255px}.about-core{height:190px;width:190px}.about-core span{font-size:34px}.about-core strong{font-size:22px}.about-core small{font-size:6px}.about-orbit-tag{font-size:8px;padding:9px 11px}.about-orbit-tag.tag-a{left:0}.about-orbit-tag.tag-b{right:0}.about-orbit-tag.tag-c{bottom:7%} .secondary-card{border-radius:22px}.showcase-panel{border-radius:25px}.contact{border-radius:50px 50px 0 0}.outcomes{border-radius:43px 43px 0 0} .workflow-window{animation:none;transform:scale(.83)} } @media(prefers-reduced-motion:reduce){.workflow-window,.about-core,.story-screen.is-active,.story-page.is-active,.mockup-glow,.portfolio-light,.float-ticket{animation:none!important}.story-perspective{transform:none!important}} /* Project summary should read as one flowing sentence on small screens. */ .project-outro p{display:block} .project-outro .outro-asterisk{display:inline-block;vertical-align:middle;margin-right:10px} .project-outro strong{display:inline} /* Dev Mondiale V7 — official teal + charcoal + original lime (elaichi) accent */ body{background:#008B9B;color:#FFFFFF} ::selection{background:#008B9B;color:#FFFFFF} .site-header{background:linear-gradient(180deg,rgba(0,139,155,.94),rgba(0,139,155,.68));backdrop-filter:blur(22px);border-bottom:1px solid rgba(0,139,155,.09)} .site-header.scrolled{background:rgba(0,139,155,.95);border-bottom:1px solid rgba(0,139,155,.20)} .navbar{height:87px} .brand-icon{background:rgba(0,139,155,.15);border-color:rgba(0,139,155,.55);box-shadow:inset 0 0 18px rgba(0,139,155,.12)} .brand-icon img{filter:brightness(0) saturate(100%) invert(50%) sepia(87%) saturate(672%) hue-rotate(135deg) brightness(83%) contrast(97%)} .fallback-mark{color:#008B9B} .brand-name{color:#FFFFFF} .brand-name span{color:#008B9B} .nav-links a{color:#FFFFFF} .nav-links a:hover{color:#008B9B} .tiny-badge{color:#008B9B} .tiny-badge i{background:#008B9B;box-shadow:0 0 0 5px rgba(0,139,155,.17)} .nav-cta{border-color:rgba(0,139,155,.45)} .nav-cta:hover{background:#008B9B;color:#FFFFFF;border-color:#008B9B} .progress{background:linear-gradient(90deg,#008B9B,#008B9B);box-shadow:0 0 14px rgba(0,139,155,.55)} .hero{ background:radial-gradient(ellipse at 74% 42%,rgba(0,139,155,.19),transparent 44%),radial-gradient(ellipse at 12% 8%,rgba(0,139,155,.055),transparent 36%),linear-gradient(145deg,#008B9B 0%,#008B9B 54%,#008B9B 100%); } .hero:before{background-image:linear-gradient(rgba(0,139,155,.040) 1px,transparent 1px),linear-gradient(90deg,rgba(0,139,155,.040) 1px,transparent 1px)} .hero-glow{background:radial-gradient(circle,rgba(0,139,155,.22),transparent 65%)} .hero h1{color:#FFFFFF} .hero h1 .outline{-webkit-text-stroke:1.3px rgba(255,255,255,.8)} .hero-description{color:#FFFFFF} .hero-description strong{color:#FFFFFF} .hero-proof{color:#008B9B} .hero-proof .proof-symbol{color:#008B9B} .btn-primary{background:#008B9B;color:#008B9B;box-shadow:0 16px 48px rgba(0,139,155,.15)} .btn-primary:hover{background:#008B9B} .btn-primary span{background:rgba(0,139,155,.12)} .btn-text .down{color:#008B9B} .visual-wrap:before{background:radial-gradient(circle,rgba(8,30,40,.08),rgba(8,30,40,.02) 48%,transparent 72%);filter:blur(22px)} .orbit{border-color:rgba(8,30,40,.12)} .orbit.two{border-color:rgba(8,30,40,.08)} .orbit:before{background:#008B9B;box-shadow:0 0 0 4px rgba(0,139,155,.08)} .orbit.two:before{background:#008B9B;box-shadow:0 0 0 4px rgba(0,139,155,.08)} /* workflow board: cleaner, thicker product-card treatment */ .workflow-window{ border-radius:32px; background:#FFFFFF; border:3px solid #D8E4E8; box-shadow:0 26px 54px rgba(15,23,42,.12),0 8px 16px rgba(15,23,42,.06); animation:none; isolation:isolate; } .workflow-window:before{content:"";position:absolute;pointer-events:none;inset:0;border-radius:inherit;background:linear-gradient(180deg,rgba(255,255,255,.85),rgba(255,255,255,0) 30%);z-index:0} .window-top,.window-body{z-index:1;position:relative} .window-top{border-bottom:1px solid #D8E4E8;background:#F6FBFC} .window-top-left{color:#0F2230} .window-dots i{background:#A9BBC4} .window-dots i:first-child{background:#008B9B} .window-dots i:nth-child(2){background:#9CB7C0} .window-dots i:nth-child(3){background:#9CB7C0} .live-pill{color:#008B9B} .pulse-dot{background:#008B9B;box-shadow:0 0 0 5px rgba(0,139,155,.12);animation:brandPulse 2.2s ease-in-out infinite} .window-body{background:#FFFFFF;background-image:radial-gradient(rgba(15,23,42,.08) .9px,transparent .9px);background-size:23px 23px} .workflow-title-row h3{color:#0F2230} .workflow-title-row .demo-tag{color:#008B9B;border:1px solid rgba(0,139,155,.24);background:rgba(0,139,155,.06)} .flow-stack:before{background:linear-gradient(180deg,#008B9B 0%,rgba(0,139,155,.58) 100%);width:3px;left:13.5px;box-shadow:none} .flow-stack:after{content:"";position:absolute;top:23px;left:11px;width:8px;height:8px;border-radius:50%;background:#008B9B;box-shadow:0 0 0 6px rgba(0,139,155,.08);animation:none;z-index:2;pointer-events:none} .flow-step{ background:#FFFFFF;border:1px solid #D8E4E8;border-radius:18px; box-shadow:0 8px 18px rgba(15,23,42,.06); animation:none; transition:border-color .22s ease,box-shadow .22s ease,background-color .22s ease; } .flow-step:nth-child(2){animation-delay:1.8s} .flow-step:nth-child(3){animation-delay:3.6s} .flow-step:nth-child(4){animation-delay:5.4s} .flow-step:hover{transform:none;border-color:rgba(0,139,155,.38);box-shadow:0 12px 22px rgba(15,23,42,.09);background:#FCFEFE} .flow-step:before{background:#FFFFFF;outline-color:#008B9B;border:2px solid #008B9B;box-shadow:none} .flow-step:nth-child(2):before{background:#FFFFFF;outline-color:#008B9B} .flow-step:nth-child(3):before{background:#FFFFFF;outline-color:#008B9B} .flow-step:nth-child(4):before{background:#FFFFFF;outline-color:#008B9B} .step-icon{background:#EAF6F8;color:#008B9B} .flow-step:nth-child(2) .step-icon{background:#EAF6F8;color:#008B9B} .flow-step:nth-child(3) .step-icon{background:#EAF6F8;color:#008B9B} .flow-step:nth-child(4) .step-icon{background:#EAF6F8;color:#008B9B} .step-info strong{color:#0F2230} .step-info small{color:#62717B} .step-state{color:#008B9B;background:#F1FAFB;border-color:rgba(0,139,155,.18)} .flow-step:nth-child(2) .step-state{color:#008B9B;background:#F1FAFB;border-color:rgba(0,139,155,.18)} .flow-step:nth-child(3) .step-state{color:#008B9B;background:#F1FAFB;border-color:rgba(0,139,155,.18)} .flow-step:nth-child(4) .step-state{color:#008B9B;background:#F1FAFB;border-color:rgba(0,139,155,.18)} .window-footer{border-top:1px solid #D8E4E8;color:#62717B} .window-footer span:last-child{color:#008B9B} .float-chip{border-radius:18px;backdrop-filter:none} .chip-a{background:#FFFFFF;color:#0F2230;border:2px solid rgba(0,139,155,.18);box-shadow:0 16px 28px rgba(15,23,42,.11)} .chip-a .chip-icon{color:#008B9B} .chip-b{background:#FFFFFF;border:2px solid rgba(15,23,42,.10);box-shadow:0 16px 28px rgba(15,23,42,.11)} .chip-b .upper{color:#62717B} .chip-b strong{color:#0F2230} .chip-b .check{color:#008B9B} /* brand-color details through the remainder of the site */ .marquee{background:#008B9B;color:#008B9B} .services-section{background:radial-gradient(circle at 4% 50%,rgba(0,139,155,.08),transparent 36%),#008B9B} .service-card{background:linear-gradient(145deg,#008B9B,#008B9B);border:1px solid rgba(0,139,155,.14);border-radius:32px} .service-card:first-child{background:linear-gradient(145deg,#008B9B,#008B9B);border-color:rgba(0,139,155,.52)} .service-card:nth-child(2) .service-icon{background:rgba(0,139,155,.13);color:#008B9B;border-color:rgba(0,139,155,.47)} .service-card:nth-child(3) .service-icon{background:rgba(0,139,155,.09);color:#008B9B;border-color:rgba(0,139,155,.25)} .service-card:nth-child(2):after{background:#008B9B} .service-card:nth-child(3):after{background:#008B9B} .showcase{background:#FFFFFF;color:#008B9B} .showcase .section-top{color:#008B9B} .showcase .section-heading em{color:#008B9B} .showcase .section-intro p{color:#008B9B} .tab[aria-selected="true"]{background:#008B9B;color:#FFFFFF;border-color:#008B9B} .showcase-panel{background:#008B9B;border-color:rgba(0,139,155,.28);border-radius:34px} .panel-kicker{color:#008B9B} .outcomes{background:#008B9B} .ring-inner{border-color:rgba(0,139,155,.42)} .art-center{background:radial-gradient(circle at 25% 20%,#008B9B,#008B9B 55%,#008B9B);box-shadow:0 0 90px rgba(0,139,155,.21),inset 0 0 28px rgba(0,139,155,.16);border-color:rgba(0,139,155,.29)} .art-floating{background:#008B9B} .secondary-services{background:#008B9B} .secondary-card{border-radius:27px;background:rgba(0,139,155,.035)} .process{background:#008B9B} .faq{background:#008B9B} .portfolio-section{background:linear-gradient(145deg,#008B9B,#008B9B 50%,#008B9B 100%);border-radius:78px 78px 70px 70px} .portfolio-light-a{background:radial-gradient(circle,rgba(0,139,155,.24),transparent 70%)} .portfolio-light-b{background:radial-gradient(circle,rgba(0,139,155,.12),transparent 70%)} .project-feature{background:linear-gradient(135deg,#008B9B,#008B9B 75%);border-color:rgba(0,139,155,.25)} .project-feature:before{background:rgba(0,139,155,.17)} .project-icon{background:#008B9B;color:#FFFFFF} .about-section{background:#008B9B} .about-orbit:before{background:radial-gradient(circle,rgba(0,139,155,.20),rgba(0,139,155,.065),transparent 70%)} .about-orbit-ring{border-color:rgba(0,139,155,.35)} .contact{background:#008B9B;color:#008B9B} .site-footer{background:#008B9B} /* accessibility and responsive motion */ @keyframes brandPulse{0%,100%{box-shadow:0 0 0 4px rgba(0,139,155,.13);opacity:1}50%{box-shadow:0 0 0 9px rgba(0,139,155,.03);opacity:.5}} @keyframes workflowSignal{0%{top:24px;opacity:0}6%{opacity:1}84%{opacity:1}100%{top:calc(100% - 37px);opacity:0}} @keyframes flowSpotlight{0%,15%,100%{border-color:rgba(0,139,155,.20);box-shadow:0 11px 20px rgba(0,139,155,.17)}6%{border-color:rgba(0,139,155,.69);box-shadow:0 0 0 1px rgba(0,139,155,.12),0 13px 25px rgba(0,139,155,.23)}} @media(max-width:920px){.mobile-nav{background:#008B9B}} @media(max-width:560px){.workflow-window{animation:none}.flow-step{animation-duration:7.2s}.flow-stack:after{animation-duration:7.2s}} @media(prefers-reduced-motion:reduce){.flow-stack:after,.flow-step,.pulse-dot,.orbit,.workflow-window{animation:none!important}.flow-step:hover{transform:none!important}} /* =========================================================== DEV MONDIALE / V6 — STRICT THREE-COLOR DESIGN SYSTEM Brand UI pigments: #FFFFFF · #008B9B only. Transparency and gradients are shades of these same colors. Embedded real project screenshots retain their original pixels. =========================================================== */ :root{ --bg:#FFFFFF;--panel:#FFFFFF;--muted:#008B9B; --line:rgba(0,139,155,.19);--white:#FFFFFF; --lime:#008B9B;--violet:#008B9B;--teal:#008B9B;--brand:#008B9B; --brand-ink:#008B9B;--brand-lime:#008B9B; } html{background:#FFFFFF} body{background:#FFFFFF;color:#008B9B} ::selection{background:#008B9B;color:#008B9B} :focus-visible{outline-color:#008B9B} .noise{opacity:.04;filter:none} .progress{background:#008B9B;box-shadow:0 0 9px rgba(0,139,155,.28)} .skip{background:#008B9B;color:#008B9B} /* Navigation stays bright regardless of scroll position. */ .site-header,.site-header.scrolled{background:rgba(255,255,255,.96);border-bottom:1px solid rgba(0,139,155,.12);box-shadow:0 10px 35px rgba(0,139,155,.06);backdrop-filter:blur(20px)} .brand-icon{background:#008B9B;border:1px solid rgba(0,139,155,.29)} .brand-icon img{filter:none} .fallback-mark,.brand-name span{color:#008B9B} .brand-name{color:#008B9B} .nav-links a{position:relative;color:#008B9B;text-decoration:none;transition:color .3s ease} .nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:3px;border-radius:999px;background:var(--logo-teal);pointer-events:none;transform:scaleX(0);transform-origin:left center;transition:transform .38s cubic-bezier(.22,1,.36,1)} .nav-links a:hover,.nav-links a:focus-visible{color:#008B9B;text-decoration:none} .nav-links a:hover::after,.nav-links a:focus-visible::after{transform:scaleX(1)} @media(prefers-reduced-motion:reduce){.nav-links a,.nav-links a::after{transition:none}} .tiny-badge{color:#008B9B}.tiny-badge i{background:#008B9B;box-shadow:0 0 0 5px rgba(0,139,155,.10)} .nav-cta{color:#008B9B;border:1px solid rgba(0,139,155,.35);background:#FFFFFF} .nav-cta:hover{background:#008B9B;color:#008B9B;border-color:#008B9B} .menu-toggle{background:#FFFFFF;color:#008B9B;border-color:rgba(0,139,155,.28)} .mobile-nav{background:#FFFFFF;color:#008B9B;border-color:rgba(0,139,155,.12)} .mobile-nav a{color:#008B9B;border-color:rgba(0,139,155,.15)} /* Hero: white canvas, teals for type, teal as the sole accent. */ .hero{background: radial-gradient(circle at 94% 23%,rgba(0,139,155,.42),transparent 35%), radial-gradient(circle at 16% 90%,rgba(0,139,155,.055),transparent 48%), #FFFFFF; color:#008B9B; } .hero:before{background-image:linear-gradient(rgba(0,139,155,.048) 1px,transparent 1px),linear-gradient(90deg,rgba(0,139,155,.048) 1px,transparent 1px);opacity:1;mask-image:linear-gradient(90deg,transparent 0%,#FFFFFF 63%)} .hero:after{background:rgba(0,139,155,.24)} .hero-glow{background:radial-gradient(circle,rgba(0,139,155,.27),transparent 67%)} .eyebrow,.hero h1,.hero h1 .accent,.hero-description,.hero-description strong,.hero-proof,.hero-proof b{color:#008B9B} .eyebrow-line{background:#008B9B} .hero h1 .outline{color:transparent;-webkit-text-stroke:1.6px #008B9B} .hero h1 .accent:after{background:#008B9B;height:11px;bottom:-6px;z-index:-1;transform:rotate(-2deg)} .btn-primary{background:#008B9B;color:#008B9B;box-shadow:0 13px 30px rgba(0,139,155,.10);border:1px solid rgba(0,139,155,.10)} .btn-primary:hover{box-shadow:0 20px 36px rgba(0,139,155,.15)} .btn-primary span{background:rgba(0,139,155,.10)} .btn-text,.btn-text .down{color:#008B9B} .hero-proof .proof-symbol{color:#008B9B} .hero-bottom{color:#008B9B}.down-indicator i{color:#008B9B} /* Right hero workflow: PURE WHITE card, TEAL typography, TEAL signals. */ .visual-wrap:before{background:radial-gradient(circle,rgba(0,139,155,.36),rgba(0,139,155,.045) 48%,transparent 72%)} .orbit{border-color:rgba(0,139,155,.23)} .orbit.two{border-color:rgba(0,139,155,.10)} .orbit:before,.orbit.two:before{background:#008B9B;box-shadow:0 0 0 7px rgba(0,139,155,.26)} .workflow-window{ position:relative; color:#008B9B; background:#FFFFFF; border:1px solid rgba(0,139,155,.18); border-radius:35px; box-shadow:0 30px 80px rgba(0,139,155,.18),0 0 0 8px rgba(0,139,155,.20); isolation:isolate; } .workflow-window:hover{filter:none} .workflow-window:before{content:"";position:absolute;inset:0;border-radius:inherit;z-index:0;pointer-events:none;background:radial-gradient(circle at 85% 0%,rgba(0,139,155,.28),transparent 45%)} .workflow-window:after{content:"";position:absolute;inset:0 auto 0 -34%;width:26%;z-index:2;pointer-events:none;background:linear-gradient(90deg,transparent,rgba(0,139,155,.20),transparent);transform:skewX(-15deg);animation:workflowSheen 9s ease-in-out infinite} .window-top{background:#FFFFFF;border-bottom:1px solid rgba(0,139,155,.16);z-index:1} .window-top-left{color:#008B9B} .window-dots i{background:#008B9B}.window-dots i:first-child{background:#008B9B}.window-dots i:nth-child(2){background:#008B9B}.window-dots i:nth-child(3){background:#008B9B} .live-pill{color:#008B9B} .pulse-dot{background:#008B9B;box-shadow:0 0 0 5px rgba(0,139,155,.4)} .window-body{background-image:radial-gradient(rgba(0,139,155,.10) 1px,transparent 1px);background-size:22px 22px;color:#008B9B;z-index:1} .workflow-title-row h3{color:#008B9B} .workflow-title-row .demo-tag{background:#008B9B;color:#008B9B;border:1px solid rgba(0,139,155,.20)} .flow-stack:before{background:rgba(0,139,155,.27);box-shadow:none;width:3px;left:13px} .flow-stack:after{content:"";width:10px;height:10px;left:9px;background:#008B9B;box-shadow:0 0 0 4px #FFFFFF,0 0 0 7px rgba(0,139,155,.18);animation:workflowSignal 7.2s linear infinite} .flow-step,.flow-step:nth-child(2),.flow-step:nth-child(3),.flow-step:nth-child(4){background:#FFFFFF;color:#008B9B;border:1px solid rgba(0,139,155,.20);box-shadow:0 9px 22px rgba(0,139,155,.08);border-radius:19px;animation:stepFocus 7.2s ease-in-out infinite} .flow-step:nth-child(2){animation-delay:1.8s}.flow-step:nth-child(3){animation-delay:3.6s}.flow-step:nth-child(4){animation-delay:5.4s} .flow-step:after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;opacity:0;background:linear-gradient(100deg,transparent,rgba(0,139,155,.28),transparent);animation:stepGlow 7.2s ease-in-out infinite} .flow-step:nth-child(2):after{animation-delay:1.8s}.flow-step:nth-child(3):after{animation-delay:3.6s}.flow-step:nth-child(4):after{animation-delay:5.4s} .flow-step:hover{background:#008B9B;transform:translateX(5px);border-color:#008B9B;box-shadow:0 15px 30px rgba(0,139,155,.14)} .flow-step:before,.flow-step:nth-child(2):before,.flow-step:nth-child(3):before,.flow-step:nth-child(4):before{background:#008B9B;outline:2px solid #008B9B;border:2px solid #FFFFFF;box-shadow:0 0 0 4px rgba(0,139,155,.22)} .step-icon,.flow-step:nth-child(2) .step-icon,.flow-step:nth-child(3) .step-icon,.flow-step:nth-child(4) .step-icon{color:#008B9B;background:#008B9B;border-radius:13px} .step-info strong,.step-info small{color:#008B9B} .step-state,.flow-step:nth-child(2) .step-state,.flow-step:nth-child(3) .step-state,.flow-step:nth-child(4) .step-state{color:#008B9B;background:rgba(0,139,155,.60);border:1px solid rgba(0,139,155,.17)} .window-footer{border-top:1px solid rgba(0,139,155,.16);color:#008B9B}.window-footer span:last-child{color:#008B9B} .float-chip{border-radius:23px;box-shadow:0 15px 35px rgba(0,139,155,.12);color:#008B9B} .chip-a{background:#008B9B;color:#008B9B;border:1px solid rgba(0,139,155,.17)} .chip-b{background:#FFFFFF;border:1px solid rgba(0,139,155,.22)} .chip-b .upper,.chip-b strong,.chip-b .check{color:#008B9B} @keyframes workflowSheen{0%,18%{left:-34%}55%,100%{left:133%}} @keyframes stepFocus{0%,14%,100%{background:#FFFFFF;border-color:rgba(0,139,155,.20);transform:translateY(0)}6%{background:#008B9B;border-color:#008B9B;transform:translateY(-4px)}} @keyframes stepGlow{0%,14%,100%{opacity:0}6%{opacity:1}} /* Balanced three-color section sequence. */ .marquee{background:#008B9B;color:#008B9B;border-color:rgba(0,139,155,.15)} .section-top,.section-top .right,.section-heading,.section-heading em,.section-intro p{color:#008B9B} .services-section{background:#FFFFFF} .service-card,.service-card:first-child{background:#FFFFFF;border:1px solid rgba(0,139,155,.24);color:#008B9B;box-shadow:0 13px 35px rgba(0,139,155,.06)} .service-card:first-child{background:#008B9B} .service-card:nth-child(2),.service-card:nth-child(3){background:#FFFFFF} .service-card:hover{border-color:#008B9B;box-shadow:0 23px 44px rgba(0,139,155,.14)} .service-card .num,.service-card h3,.service-card p,.service-card .card-bottom,.service-card .card-bottom span,.service-card .service-icon{color:#008B9B} .service-card .service-icon,.service-card:nth-child(2) .service-icon,.service-card:nth-child(3) .service-icon{background:#008B9B;border:1px solid rgba(0,139,155,.24);color:#008B9B} .service-card .card-bottom{border-color:rgba(0,139,155,.24)} .service-card:after{background:rgba(0,139,155,.27)} .showcase{background:#008B9B;color:#FFFFFF} .showcase .section-top,.showcase .section-top .right,.showcase .section-heading,.showcase .section-intro p{color:#FFFFFF} .showcase .section-heading em{color:#008B9B} .tab{background:#FFFFFF;color:#008B9B;border:1px solid rgba(255,255,255,.60)} .tab:hover{background:#008B9B;color:#008B9B} .tab[aria-selected="true"]{background:#008B9B;color:#008B9B;border-color:#008B9B;box-shadow:0 10px 25px rgba(255,255,255,.12)} .showcase-panel{background:#FFFFFF;color:#008B9B;border:1px solid rgba(255,255,255,.44);box-shadow:0 25px 60px rgba(255,255,255,.15)} .panel-kicker,.panel-copy h3,.panel-copy p,.panel-copy li{color:#008B9B} .panel-copy li:before{color:#008B9B} .diagram,.diagram-inner{background:rgba(0,139,155,.20)} .diagram-box,.diagram-box:nth-child(3),.diagram-box:nth-child(5){background:#FFFFFF;color:#008B9B;border:1px solid rgba(0,139,155,.24)} .diagram-box:nth-child(3){background:#008B9B} .diagram-box strong,.diagram-box small,.diagram-icon{color:#008B9B} .diagram-arrow,.diagram-arrow i{color:#008B9B} .portfolio-section{background:#FFFFFF;color:#008B9B;border-radius:80px;margin-top:-8px} .portfolio-section .section-top,.portfolio-section .section-top .right,.portfolio-head h2,.portfolio-head h2 em,.portfolio-head>p,.project-tag{color:#008B9B} .portfolio-light-a{background:radial-gradient(circle,rgba(0,139,155,.38),transparent 66%)} .portfolio-light-b{background:radial-gradient(circle,rgba(0,139,155,.10),transparent 68%)} .project-feature{background:#008B9B;color:#FFFFFF;border:1px solid rgba(0,139,155,.35);box-shadow:0 30px 75px rgba(0,139,155,.16)} .project-feature:before{background:rgba(0,139,155,.14)} .project-topbar,.story-bottom{border-color:rgba(255,255,255,.26)} .project-icon{background:#008B9B;color:#008B9B} .project-identity strong,.project-identity small,.project-status{color:#FFFFFF} .project-status i{background:#008B9B} .story-counter,.story-counter>span:first-child,.story-sidenote,.story-page h3,.story-page p,.story-page li,.story-progress-label,.story-progress-label span{color:#FFFFFF} .story-divider{background:rgba(255,255,255,.44)} .story-page li:before{color:#008B9B} .story-arrow,.project-live-link{background:#008B9B;color:#008B9B;border:1px solid rgba(255,255,255,.4)} .story-arrow:hover,.project-live-link:hover{background:#FFFFFF;color:#008B9B} .story-tab{background:rgba(255,255,255,.12);color:#FFFFFF;border-color:rgba(255,255,255,.30)} .story-tab span{color:#008B9B} .story-tab.is-active,.story-tab[aria-selected=true]{background:#008B9B;color:#008B9B;border-color:#008B9B} .story-tab.is-active span,.story-tab[aria-selected=true] span{color:#008B9B} .project-outro p,.project-outro strong{color:#008B9B} .tech-pills span{color:#008B9B;background:#008B9B;border-color:rgba(0,139,155,.22)} .story-visual:before{background:radial-gradient(circle,rgba(0,139,155,.24),transparent 68%)} .screen-frame{background:#FFFFFF;border-color:#FFFFFF;box-shadow:19px 24px 45px rgba(0,139,155,.28)} .screen-bar{background:#FFFFFF;color:#008B9B;border-color:rgba(0,139,155,.15)} .screen-dots i{background:#008B9B} .float-ticket{background:#008B9B;color:#008B9B;border-color:rgba(0,139,155,.22)} .float-ticket span{color:#008B9B} .outcomes{background:#008B9B;color:#FFFFFF} .outcomes .section-top,.outcomes .section-heading,.outcomes .section-top .right,.outcomes .section-intro p,.outcomes p{color:#FFFFFF} .outcomes .section-heading em{color:#008B9B} .ring-outer,.ring-inner{border-color:rgba(0,139,155,.50)} .ring-outer:before{color:#008B9B} .art-center{background:#008B9B;color:#008B9B;border-color:rgba(255,255,255,.5)} .art-floating{background:#FFFFFF;color:#008B9B;border-color:rgba(255,255,255,.40)} .outcomes-list li,.outcomes-list li p,.outcomes-list li strong{color:#FFFFFF} .secondary-services{background:#FFFFFF;color:#008B9B} .secondary-services .section-top,.secondary-services .section-top .right,.secondary-services .section-heading,.secondary-services .section-heading em,.secondary-services .section-intro p{color:#008B9B} .secondary-card{background:#FFFFFF;border:1px solid rgba(0,139,155,.22);color:#008B9B;box-shadow:0 9px 25px rgba(0,139,155,.05)} .secondary-card:nth-child(2){background:#008B9B} .secondary-card:hover{background:#008B9B;border-color:#008B9B} .secondary-card>span,.secondary-card h3,.secondary-card p{color:#008B9B} .about-section{background:#FFFFFF;color:#008B9B} .about-section .section-top,.about-section .section-top .right,.about-copy .section-heading,.about-copy .section-heading em,.about-copy p,.about-overline,.about-link{color:#008B9B} .about-orbit:before{background:radial-gradient(circle,rgba(0,139,155,.34),transparent 70%)} .about-orbit-ring,.about-orbit-ring.ring-b{border-color:rgba(0,139,155,.33)} .about-core{background:radial-gradient(circle at 22% 22%,#008B9B,#008B9B 85%);color:#FFFFFF;border-color:rgba(0,139,155,.26);box-shadow:0 25px 55px rgba(0,139,155,.20)} .about-core span,.about-core strong,.about-core small{color:#FFFFFF} .about-orbit-tag{color:#008B9B;background:#008B9B;border:1px solid rgba(0,139,155,.17)} .process{background:#008B9B;color:#FFFFFF} .process .section-top,.process .section-top .right,.process .section-heading,.process .section-intro p{color:#FFFFFF} .process .section-heading em{color:#008B9B} .process-item{border-color:rgba(0,139,155,.66)} .process-item:before{background:#008B9B} .process-item .p-num{color:#008B9B} .process-item h3,.process-item p{color:#FFFFFF} .process-foot{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.32);color:#FFFFFF} .process-foot span{color:#008B9B} .faq{background:#FFFFFF;color:#008B9B} .faq .section-top,.faq .section-top .right,.faq .section-heading,.faq .section-heading em{color:#008B9B} .faq-question,.faq-question:first-child{border-color:rgba(0,139,155,.19)} .faq-question button{color:#008B9B} .faq-question button span:last-child{color:#008B9B;border-color:#008B9B} .faq-question button[aria-expanded=true] span:last-child{background:#008B9B;color:#008B9B} .faq-answer,.faq-answer p{color:#008B9B} .contact{background:#008B9B;color:#008B9B} .contact:before{color:rgba(0,139,155,.08)} .contact .section-top,.contact .section-top .right,.contact h2,.contact h2 em,.contact p,.contact-line{color:#008B9B} .contact-buttons a{background:#008B9B;color:#FFFFFF;border:1px solid #008B9B} .contact-buttons a:hover{background:#FFFFFF;color:#008B9B} .contact-line a{color:#008B9B} footer{background:#FFFFFF;color:#008B9B} footer *{border-color:rgba(0,139,155,.22)} footer a,footer p,footer span{color:#008B9B} @media(max-width:920px){.mobile-nav{background:#FFFFFF;color:#008B9B}} @media(max-width:560px){ .hero{background:radial-gradient(circle at 92% 15%,rgba(0,139,155,.38),transparent 42%),#FFFFFF} .workflow-window{box-shadow:0 19px 45px rgba(0,139,155,.17),0 0 0 5px rgba(0,139,155,.14)} .float-chip{box-shadow:0 10px 25px rgba(0,139,155,.11)} } @media(prefers-reduced-motion:reduce){.workflow-window:after,.flow-step,.flow-step:after,.flow-stack:after{animation:none!important}} /* =========================================================== DEV MONDIALE / V8 — ORIGINAL MOTION FOUNDATION (V10 TEAL OVERRIDES) Primary brand is #008B9B on clean white. Amber and fresh green are reserved for expressive animated details. Embedded project imagery is intentionally preserved as provided by the client. =========================================================== */ :root{--bg:#FFFFFF;--panel:#008B9B;--muted:#008B9B;--white:#FFFFFF;--lime:#008B9B;--violet:#008B9B;--teal:#008B9B;--brand:#008B9B;--brand-lime:#008B9B} html,body{background:#FFFFFF;color:#008B9B} ::selection{background:#008B9B;color:#FFFFFF} .skip{background:#008B9B;color:#FFFFFF} .nav-cta:hover{background:#008B9B;color:#FFFFFF;border-color:#008B9B} .brand-icon{background:#008B9B;border-color:#008B9B} .brand-icon img{filter:brightness(0) invert(1)} .brand-icon .fallback-mark{color:#FFFFFF} .brand-name,.brand-name span{color:#008B9B} .nav-links a:hover{text-decoration-color:#008B9B} .hero{background:radial-gradient(circle at 88% 23%,rgba(0,139,155,.11),transparent 36%),radial-gradient(circle at 16% 90%,rgba(0,139,155,.045),transparent 47%),#FFFFFF} .hero:after{background:rgba(0,139,155,.10)} .hero-glow{background:radial-gradient(circle,rgba(0,139,155,.17),transparent 69%)} .hero h1 .accent:after{background:#008B9B;height:5px;bottom:-8px} .btn-primary{background:#008B9B;color:#FFFFFF;border-color:#008B9B;box-shadow:0 17px 45px rgba(0,139,155,.18)} .btn-primary:hover{background:#008B9B;color:#FFFFFF;box-shadow:0 23px 52px rgba(0,139,155,.25)} .btn-primary span{color:#008B9B;background:#FFFFFF} .hero .btn-text{position:relative;justify-content:center;align-items:center;text-align:center;min-height:62px;padding:17px 44px;font-size:17px;border:1px solid var(--logo-teal);color:#008B9B} .hero .btn-text .down{position:absolute;right:16px;top:50%;transform:translateY(-50%);color:#008B9B} @media(max-width:560px){.hero .btn-text{min-height:54px;padding-block:13px}} .visual-wrap:before{background:radial-gradient(circle,rgba(0,139,155,.11),transparent 69%)} .orbit:before,.orbit.two:before{background:#008B9B;box-shadow:0 0 0 7px rgba(0,139,155,.10)} .workflow-window{background:#FFFFFF;color:#008B9B;border:1px solid rgba(0,139,155,.25);box-shadow:0 30px 80px rgba(0,139,155,.15),0 0 0 8px rgba(0,139,155,.055)} .workflow-window:before{background:radial-gradient(circle at 85% 0%,rgba(0,139,155,.08),transparent 45%)} .workflow-window:after{background:linear-gradient(90deg,transparent,rgba(0,139,155,.09),transparent)} .window-dots i,.window-dots i:first-child,.window-dots i:nth-child(2),.window-dots i:nth-child(3){background:#008B9B} .window-dots i:nth-child(2){opacity:.55}.window-dots i:nth-child(3){opacity:.23} .pulse-dot{background:#008B9B;box-shadow:0 0 0 5px rgba(0,139,155,.12)} .workflow-title-row .demo-tag{background:#008B9B;color:#FFFFFF;border-color:#008B9B} .flow-stack:before{background:rgba(0,139,155,.21);box-shadow:none} .flow-stack:after{background:#008B9B;box-shadow:0 0 0 4px #FFFFFF,0 0 0 7px rgba(0,139,155,.12)} .flow-step,.flow-step:nth-child(2),.flow-step:nth-child(3),.flow-step:nth-child(4){background:#FFFFFF;color:#008B9B} .flow-step:after{background:linear-gradient(100deg,transparent,rgba(0,139,155,.11),transparent)} .flow-step:hover{background:rgba(0,139,155,.06);border-color:#008B9B} .flow-step:before,.flow-step:nth-child(2):before,.flow-step:nth-child(3):before,.flow-step:nth-child(4):before{background:#008B9B;outline-color:#008B9B;box-shadow:0 0 0 4px rgba(0,139,155,.11)} .step-icon,.flow-step:nth-child(2) .step-icon,.flow-step:nth-child(3) .step-icon,.flow-step:nth-child(4) .step-icon{background:#008B9B;color:#FFFFFF} .step-info strong,.step-info small{color:#008B9B} .step-state,.flow-step:nth-child(2) .step-state,.flow-step:nth-child(3) .step-state,.flow-step:nth-child(4) .step-state{background:rgba(0,139,155,.07);color:#008B9B;border:1px solid rgba(0,139,155,.24)} @keyframes stepFocus{0%,14%,100%{background:#FFFFFF;border-color:rgba(0,139,155,.20);transform:translateY(0)}6%{background:rgba(0,139,155,.10);border-color:#008B9B;transform:translateY(-4px)}} .chip-a{background:#008B9B;color:#FFFFFF;border-color:#008B9B} .chip-b{background:#FFFFFF;color:#008B9B} .marquee{background:#008B9B;color:#FFFFFF;border-color:rgba(255,255,255,.15)} .marquee em{color:#FFFFFF} .section-heading em{color:#008B9B} .services-section{background:#FFFFFF} .service-card:first-child{background:#008B9B;color:#FFFFFF;border-color:#008B9B} .service-card:first-child .num,.service-card:first-child h3,.service-card:first-child p,.service-card:first-child .card-bottom,.service-card:first-child .card-bottom span{color:#FFFFFF} .service-card:first-child .card-bottom{border-color:rgba(255,255,255,.3)} .service-card:first-child .service-icon{background:#FFFFFF;color:#008B9B;border-color:#FFFFFF} .service-card .service-icon,.service-card:nth-child(2) .service-icon,.service-card:nth-child(3) .service-icon{background:#008B9B;color:#FFFFFF;border-color:#008B9B} .service-card:first-child .service-icon{background:#FFFFFF;color:#008B9B;border-color:#FFFFFF} .service-card:after{background:rgba(0,139,155,.16)} .showcase{background:#008B9B;color:#FFFFFF} .showcase .section-heading em{color:#FFFFFF;text-decoration:underline;text-decoration-color:rgba(255,255,255,.55);text-decoration-thickness:3px;text-underline-offset:8px} .tab{background:rgba(255,255,255,.12);color:#FFFFFF;border-color:rgba(255,255,255,.45)} .tab:hover,.tab[aria-selected="true"]{background:#FFFFFF;color:#008B9B;border-color:#FFFFFF} .showcase-panel{background:#FFFFFF;color:#008B9B} .diagram,.diagram-inner{background:rgba(0,139,155,.06)} .diagram-box:nth-child(3){background:#008B9B;color:#FFFFFF} .diagram-box:nth-child(3) strong,.diagram-box:nth-child(3) small,.diagram-box:nth-child(3) .diagram-icon{color:#FFFFFF} .portfolio-section{background:#FFFFFF;color:#008B9B} .project-feature{background:#008B9B;color:#FFFFFF} .project-icon{background:#FFFFFF;color:#008B9B} .project-status i{background:#FFFFFF} .story-page li:before{color:#FFFFFF} .story-arrow,.project-live-link{background:#FFFFFF;color:#008B9B;border-color:#FFFFFF} .story-arrow:hover,.project-live-link:hover{background:#008B9B;color:#FFFFFF;border-color:#FFFFFF} .story-tab span{color:#FFFFFF} .story-tab.is-active,.story-tab[aria-selected=true]{background:#FFFFFF;color:#008B9B;border-color:#FFFFFF} .story-tab.is-active span,.story-tab[aria-selected=true] span{color:#008B9B} .tech-pills span{background:#008B9B;color:#FFFFFF;border-color:#008B9B} .float-ticket,.float-ticket span{background:#008B9B;color:#FFFFFF} .float-ticket{border-color:#FFFFFF} .outcomes{background:#008B9B;color:#FFFFFF} .outcomes .section-heading em{color:#FFFFFF;text-decoration:underline;text-decoration-color:rgba(255,255,255,.55);text-underline-offset:8px} .ring-outer,.ring-inner{border-color:rgba(255,255,255,.5)} .ring-outer:before{color:#FFFFFF} .art-center{background:#FFFFFF;color:#008B9B;border-color:#FFFFFF} .secondary-services{background:#FFFFFF;color:#008B9B} .secondary-card:nth-child(2){background:#008B9B;color:#FFFFFF;border-color:#008B9B} .secondary-card:nth-child(2)>span,.secondary-card:nth-child(2) h3,.secondary-card:nth-child(2) p{color:#FFFFFF} .secondary-card:hover{background:#008B9B;color:#FFFFFF} .secondary-card:hover>span,.secondary-card:hover h3,.secondary-card:hover p{color:#FFFFFF} .about-section{background:#FFFFFF;color:#008B9B} .about-core{background:#008B9B;color:#FFFFFF} .about-core span,.about-core strong,.about-core small{color:#FFFFFF} .about-orbit-tag{background:#008B9B;color:#FFFFFF;border-color:#008B9B} .process{background:#008B9B;color:#FFFFFF} .process .section-heading em{color:#FFFFFF;text-decoration:underline;text-decoration-color:rgba(255,255,255,.55);text-underline-offset:8px} .process-item{border-color:rgba(255,255,255,.5)} .process-item:before{background:#FFFFFF} .process-item .p-num,.process-foot span{color:#FFFFFF} .faq{background:#FFFFFF;color:#008B9B} .faq-question button[aria-expanded=true] span:last-child{background:#008B9B;color:#FFFFFF} .contact{background:#008B9B;color:#FFFFFF} .contact .section-top,.contact .section-top .right,.contact h2,.contact h2 em,.contact p,.contact-line,.contact-line a{color:#FFFFFF} .contact h2 em{text-decoration:underline;text-decoration-color:rgba(255,255,255,.60);text-underline-offset:8px} .contact-buttons a{background:#FFFFFF;color:#008B9B;border-color:#FFFFFF} .contact-buttons a:hover{background:#008B9B;color:#FFFFFF;border-color:#FFFFFF} footer{background:#FFFFFF;color:#008B9B} footer a,footer p,footer span{color:#008B9B} @media(max-width:560px){ .hero{background:radial-gradient(circle at 92% 15%,rgba(0,139,155,.10),transparent 42%),#FFFFFF} .workflow-window{box-shadow:0 19px 45px rgba(0,139,155,.17),0 0 0 5px rgba(0,139,155,.08)} } @media(prefers-reduced-motion:reduce){.workflow-window:after,.flow-step,.flow-step:after,.flow-stack:after{animation:none!important}} /* ============================================================ DEV MONDIALE / V8: FINISHING STYLES Clean cobalt branding, extra-bold editorial typography, and warm amber + green animated accents (no purple/navy). ============================================================ */ :root{ --brand:#008B9B; --teal:#008B9B; --motion-amber:#008B9B; --motion-amber-strong:#008B9B; --motion-green:#008B9B; --motion-light:#FFFFFF; } /* Explicitly color the logo background, fallback and wordmark. */ .brand-icon{background:#008B9B;border-color:#008B9B} .brand-icon img{filter:brightness(0) invert(1)} .brand-icon .fallback-mark{color:#FFFFFF} .brand-name,.brand-name span{color:#008B9B} /* Display headings: genuine weight-900 font instead of a fake bold. */ .hero h1, .section-heading, .portfolio-head h2, .contact h2{ font-family:'DM Sans',sans-serif; font-weight:900; letter-spacing:-.065em; line-height:1.04; text-wrap:balance; } .hero h1{line-height:1.0;letter-spacing:-.068em} .section-heading em,.contact h2 em,.portfolio-head h2 em{font-weight:inherit} .panel-copy h3,.story-page h3,.service-card h3, .secondary-card h3,.process-item h3,.faq-question button, .workflow-title-row h3{font-family:'DM Sans',sans-serif;font-weight:800} /* An editorial orange underline adds contrast without changing the brand. */ .hero h1 .accent:after{background:var(--motion-amber);opacity:.92;height:6px;bottom:-9px} /* Soft, light animation atmosphere; no purple or dark-blue washes. */ .hero-glow{ background:radial-gradient(circle at 44% 42%,rgba(0,139,155,.17),rgba(0,139,155,.075) 42%,transparent 69%); } .orbit:before,.orbit.two:before{ background:var(--motion-amber); box-shadow:0 0 0 7px rgba(0,139,155,.15),0 0 18px rgba(0,139,155,.28); } .pulse-dot,.tiny-badge i{background:var(--motion-green)} .tiny-badge i{box-shadow:0 0 0 5px rgba(0,139,155,.11)} .progress{background:linear-gradient(90deg,#008B9B,var(--motion-green));box-shadow:0 0 12px rgba(0,139,155,.24)} .workflow-window:after{ background:linear-gradient(90deg,transparent,rgba(0,139,155,.13),rgba(0,139,155,.12),transparent); } .flow-stack:after{ background:var(--motion-amber-strong); box-shadow:0 0 0 4px #fff,0 0 0 7px rgba(0,139,155,.21); } .flow-step:before,.flow-step:nth-child(2):before, .flow-step:nth-child(3):before,.flow-step:nth-child(4):before{ background:var(--motion-amber-strong); outline-color:var(--motion-amber-strong); box-shadow:0 0 0 4px rgba(0,139,155,.20); } .flow-step:after{ background:linear-gradient(100deg,transparent,rgba(0,139,155,.21),transparent); } @keyframes stepFocus{ 0%,14%,100%{background:#fff;border-color:rgba(0,139,155,.20);transform:translateY(0)} 6%{background:#FFFFFF;border-color:#008B9B;transform:translateY(-4px)} } /* Workflow diagram's moving dots and arrows get two distinct fresh colors. */ .diagram .particle{background:var(--motion-amber);box-shadow:0 0 20px rgba(0,139,155,.32)} .diagram .particle.second{background:var(--motion-green);box-shadow:0 0 20px rgba(0,139,155,.33)} .diagram-arrow,.diagram-arrow i{color:var(--motion-green)} .marquee em{color:var(--motion-amber)} .ring-outer:before{color:var(--motion-amber)} .portfolio-light-a{background:radial-gradient(circle,rgba(0,139,155,.23),transparent 68%)} .portfolio-light-b{background:radial-gradient(circle,rgba(0,139,155,.16),transparent 70%)} .mockup-glow{background:radial-gradient(circle,rgba(0,139,155,.19),rgba(0,139,155,.085) 50%,transparent 75%)} /* On the featured royal-blue panel, the animated floating ticket is warm. */ .float-ticket,.float-ticket span{background:var(--motion-amber);color:#008B9B} .float-ticket{border-color:var(--motion-amber)} /* Respect reduced-motion settings as the original site already does. */ @media(max-width:560px){ .hero h1{letter-spacing:-.06em} .section-heading,.contact h2{letter-spacing:-.055em} } /* ============================================================ DEV MONDIALE / V9 — IMMERSIVE MOTION SYSTEM Viewport-driven convergence, dimensional hover, kinetic orbits. Motion color: cobalt #008B9B / warm amber / fresh green. ============================================================ */ :root{--motion-ease:cubic-bezier(.2,.88,.21,1);--motion-spring:cubic-bezier(.16,1.12,.24,1);--halo-amber:#008B9B;--halo-green:#008B9B} /* Cards travel in from outside the visible window and settle into their natural grid positions. Observe their UNTRANSFORMED parent grids, not their offscreen boxes. */ html.motion-ready .fly-card{ --fly-from-x:0px;--fly-from-y:0px;--fly-delay:0ms; opacity:0;translate:var(--fly-from-x) var(--fly-from-y);scale:.72;filter:blur(10px); transition:translate 1.28s var(--motion-spring) var(--fly-delay), scale 1.28s var(--motion-spring) var(--fly-delay), opacity .77s ease var(--fly-delay),filter 1.0s ease var(--fly-delay), transform .42s var(--motion-ease),box-shadow .42s ease,background-color .32s ease,border-color .32s ease; backface-visibility:hidden; } html.motion-ready .fly-card.arrived{opacity:1;translate:0px 0px;scale:1;filter:blur(0px)} /* Each component inside a gathering card gets a secondary delayed entrance. */ html.motion-ready .fly-card:not(.arrived)>*{opacity:0;translate:0 25px} html.motion-ready .fly-card>*{ transition:translate .75s var(--motion-ease),opacity .55s ease,transform .45s var(--motion-ease); } html.motion-ready .fly-card.arrived>*{opacity:1;translate:0px 0px} html.motion-ready .fly-card.arrived>*:nth-child(1){transition-delay:.14s} html.motion-ready .fly-card.arrived>*:nth-child(2){transition-delay:.23s} html.motion-ready .fly-card.arrived>*:nth-child(3){transition-delay:.31s} html.motion-ready .fly-card.arrived>*:nth-child(4){transition-delay:.39s} html.motion-ready .fly-card.arrived>*:nth-child(5){transition-delay:.46s} /* Never alter display/visibility or the [hidden] state of interactive content. */ .fly-card[hidden],.fly-card [hidden]{display:none!important} /* High-depth tilt cards. Translate/scale from the entrance are independent of transform tilt. */ .fx-tilt{--mx-rx:0deg;--mx-ry:0deg;--glow-x:50%;--glow-y:50%;transform-style:preserve-3d;transform-origin:center;position:relative} @media(hover:hover) and (pointer:fine){ .fx-tilt:hover,.fx-tilt:focus-visible{ transform:perspective(1000px) rotateX(var(--mx-rx)) rotateY(var(--mx-ry)) translateY(-14px) translateZ(13px); box-shadow:0 35px 65px rgba(0,139,155,.2),0 15px 24px rgba(0,139,155,.09); } .fx-tilt:active{transform:perspective(1000px) rotateX(var(--mx-rx)) rotateY(var(--mx-ry)) translateY(-6px) scale(.985)} .service-card::before,.secondary-card::before,.diagram-box::before{ content:"";position:absolute;inset:0;z-index:0;border-radius:inherit;pointer-events:none; background:radial-gradient(ellipse at var(--glow-x) var(--glow-y),rgba(0,139,155,.22),transparent 60%); opacity:0;transition:opacity .4s ease; } .service-card:hover::before,.secondary-card:hover::before,.diagram-box:hover::before{opacity:1} .fx-tilt:hover>h3,.fx-tilt:hover>strong{transform:translateZ(44px)} .fx-tilt:hover>p,.fx-tilt:hover>.card-bottom{transform:translateZ(26px)} .fx-tilt:hover>.service-icon,.fx-tilt:hover>span:first-child{transform:translateZ(66px) rotate(-9deg) scale(1.14)} .fx-tilt:hover .step-icon,.fx-tilt:hover .diagram-icon{transform:translateZ(50px) rotate(-13deg) scale(1.16)} } .service-card>* ,.secondary-card>*,.diagram-box>*{position:relative;z-index:1} .service-icon,.diagram-icon,.step-icon,.benefit-icon{transition:transform .5s var(--motion-spring),filter .3s ease} .benefit{transition:background .38s ease,border-color .38s ease,transform .45s var(--motion-ease)} .benefit:hover{transform:translate3d(9px,-5px,0)} .benefit:hover .benefit-icon{transform:perspective(500px) rotateY(35deg) rotateZ(-12deg) scale(1.3);filter:drop-shadow(0 8px 12px rgba(0,139,155,.25))} .process-item:hover .p-num{display:inline-block;transform:translateY(-4px) scale(1.1);color:var(--halo-amber)} .process-item .p-num{transition:transform .3s ease,color .3s ease} .process-item:hover:before{box-shadow:0 0 0 11px rgba(0,139,155,.18),0 0 20px rgba(0,139,155,.5);background:var(--halo-amber)} .faq-question:hover button{transform:translateX(8px)} .faq-question button{transition:transform .3s var(--motion-ease),color .3s ease} .story-tab:hover{transform:perspective(500px) rotateY(-7deg) translateY(-6px)} /* The original illustrations are intact; orbit-stage provides a separate 3D transform layer so ring keyframes, float animations and hero scroll reveals do not cancel one another. */ .kinetic-scene{transform-style:preserve-3d;perspective:1100px} .orbit-stage{ position:absolute;inset:0;display:flex;align-items:center;justify-content:center; transform-style:preserve-3d;--scene-rx:0deg;--scene-ry:0deg; transform:perspective(1150px) rotateX(var(--scene-rx)) rotateY(var(--scene-ry)) scale(1); transition:transform .62s cubic-bezier(.2,.7,.22,1),filter .5s ease; } .kinetic-scene.is-hovering .orbit-stage{transform:perspective(1150px) rotateX(var(--scene-rx)) rotateY(var(--scene-ry)) scale(1.06)} .kinetic-scene .orbit,.kinetic-scene .ring-outer,.kinetic-scene .ring-inner, .kinetic-scene .about-orbit-ring{pointer-events:none} /* Stronger 3D movement for the three globe families and their satellites. */ .about-orbit-tag.tag-b{color:#FFFFFF} .about-orbit-ring.ring-a{animation:orbitRingA 23s linear infinite;transform-style:preserve-3d} .about-orbit-ring.ring-b{animation:orbitRingB 19s linear infinite reverse;transform-style:preserve-3d} @keyframes orbitRingA{from{transform:rotateX(66deg) rotateY(17deg) rotateZ(0deg)}to{transform:rotateX(66deg) rotateY(17deg) rotateZ(360deg)}} @keyframes orbitRingB{from{transform:rotateY(67deg) rotateX(23deg) rotateZ(0deg)}to{transform:rotateY(67deg) rotateX(23deg) rotateZ(360deg)}} .about-orbit-ring::after,.ring-inner::after{ content:"";position:absolute;top:9%;right:13%;height:14px;width:14px;border-radius:50%; background:var(--halo-green);box-shadow:0 0 0 8px rgba(0,139,155,.15),0 0 30px rgba(0,139,155,.65); } .about-orbit-ring.ring-b::after,.ring-inner::after{background:var(--halo-amber);box-shadow:0 0 0 8px rgba(0,139,155,.16),0 0 30px rgba(0,139,155,.65)} .kinetic-scene.is-hovering .orbit{animation-duration:11s;border-color:rgba(0,139,155,.47)} .kinetic-scene.is-hovering .orbit.two{animation-duration:8s;border-color:rgba(0,139,155,.55)} .kinetic-scene.is-hovering .ring-outer{animation-duration:9s;border-color:rgba(255,255,255,.85)} .kinetic-scene.is-hovering .ring-inner{animation-duration:7s;border-color:rgba(0,139,155,.85)} .kinetic-scene.is-hovering .about-orbit-ring.ring-a{animation-duration:7s;border-color:rgba(0,139,155,.75)} .kinetic-scene.is-hovering .about-orbit-ring.ring-b{animation-duration:5s;border-color:rgba(0,139,155,.78)} .kinetic-scene .art-center,.kinetic-scene .about-core,.kinetic-scene .workflow-window{transform-style:preserve-3d} .kinetic-scene.is-hovering .art-center{animation:sphereSurge 2s ease-in-out infinite alternate;box-shadow:0 0 95px rgba(0,139,155,.24),0 30px 60px rgba(0,139,155,.24);} @keyframes sphereSurge{0%{transform:translateZ(15px) rotateY(-17deg) rotateX(9deg) scale(1)}100%{transform:translateZ(85px) rotateY(20deg) rotateX(-12deg) scale(1.11)}} .kinetic-scene.is-hovering .about-core{animation:coreSurge 2.2s ease-in-out infinite alternate;box-shadow:0 42px 82px rgba(0,139,155,.31),inset -23px -30px 34px rgba(0,0,0,.1),0 0 55px rgba(0,139,155,.23)} @keyframes coreSurge{from{transform:translateZ(15px) rotateY(-19deg) rotateX(-9deg) translateY(7px)}to{transform:translateZ(80px) rotateY(22deg) rotateX(13deg) translateY(-17px)}} .kinetic-scene.is-hovering .art-floating:nth-last-child(2){animation:satelliteFlyA 1.8s ease-in-out infinite alternate} .kinetic-scene.is-hovering .art-floating:nth-last-child(1){animation:satelliteFlyB 2.05s ease-in-out infinite alternate} .kinetic-scene.is-hovering .about-orbit-tag.tag-a{animation:satelliteFlyA 1.65s ease-in-out infinite alternate} .kinetic-scene.is-hovering .about-orbit-tag.tag-b{animation:satelliteFlyB 1.85s ease-in-out infinite alternate} .kinetic-scene.is-hovering .about-orbit-tag.tag-c{animation:satelliteFlyC 1.45s ease-in-out infinite alternate} .kinetic-scene.is-hovering .float-chip.chip-a{animation:satelliteFlyA 1.65s ease-in-out infinite alternate} .kinetic-scene.is-hovering .float-chip.chip-b{animation:satelliteFlyB 1.9s ease-in-out infinite alternate} @keyframes satelliteFlyA{from{transform:translate3d(-7px,11px,10px) rotate(-9deg) scale(.95)}to{transform:translate3d(22px,-27px,85px) rotate(12deg) scale(1.13)}} @keyframes satelliteFlyB{from{transform:translate3d(11px,-6px,15px) rotate(10deg) scale(1)}to{transform:translate3d(-27px,20px,85px) rotate(-14deg) scale(1.16)}} @keyframes satelliteFlyC{from{transform:translate3d(-7px,-9px,20px) rotate(-12deg)}to{transform:translate3d(19px,23px,75px) rotate(18deg) scale(1.15)}} .kinetic-scene.is-hovering .art-floating i,.kinetic-scene.is-hovering .float-chip .chip-icon{animation:iconFlip 1.55s ease-in-out infinite} @keyframes iconFlip{0%,100%{transform:rotateY(0deg) rotateZ(0deg)}50%{transform:rotateY(185deg) rotateZ(22deg)}} .kinetic-scene.is-hovering .flow-step{animation-duration:4s} .kinetic-scene.is-hovering .flow-step:hover{animation:none!important;transform:translate3d(8px,-7px,45px) scale(1.055)!important;box-shadow:0 18px 39px rgba(0,139,155,.22),0 0 0 2px rgba(0,139,155,.4)} .kinetic-scene.is-hovering .window-dots i{animation:statusJump .8s ease-in-out infinite alternate} .kinetic-scene.is-hovering .window-dots i:nth-child(2){animation-delay:.18s} .kinetic-scene.is-hovering .window-dots i:nth-child(3){animation-delay:.36s} @keyframes statusJump{to{transform:translateY(-5px) scale(1.25);background:var(--halo-green)}} /* Interaction animation for surrounding page components. */ .btn,.tab,.contact-buttons a,.about-link,.story-arrow,.project-live-link,.story-tab{transition:transform .42s var(--motion-spring),box-shadow .42s ease,background .28s ease,color .28s ease} @media(hover:hover){ .btn:hover,.contact-buttons a:hover,.about-link:hover,.story-arrow:hover,.project-live-link:hover{transform:translateY(-6px) rotateX(6deg);box-shadow:0 16px 32px rgba(0,139,155,.15)} .tab:hover{transform:perspective(500px) translateY(-6px) rotateX(12deg);box-shadow:0 12px 23px rgba(0,0,0,.1)} .btn:hover span,.about-link:hover span,.story-arrow:hover span{display:inline-block;animation:ctaArrow .65s cubic-bezier(.18,.8,.27,1.3) both} .section-heading em:hover{transform:translate3d(4px,-5px,0) rotateX(7deg)} .tech-pills span:hover{transform:translate3d(0,-6px,13px) rotate(-3deg) scale(1.05)} } @keyframes ctaArrow{0%{transform:translate(0,0) rotate(0deg)}50%{transform:translate(8px,-8px) rotate(26deg)}100%{transform:translate(4px,-4px) rotate(0deg)}} .section-heading em{display:inline-block;transition:transform .45s var(--motion-ease)} .section-intro.reveal.visible .section-heading,.portfolio-head.reveal.visible h2,.about-copy.reveal.visible .section-heading{animation:headlineUnfold 1.1s var(--motion-ease) both} @keyframes headlineUnfold{from{opacity:.55;clip-path:inset(0 0 100% 0);transform:translateY(20px) rotateX(-12deg)}to{opacity:1;clip-path:inset(0 0 0 0);transform:translateY(0) rotateX(0)}} .diagram-icon,.benefit-icon,.art-floating i{display:inline-block} .kinetic-scene.is-hovering .about-core span,.kinetic-scene.is-hovering .about-core strong{animation:letterPop 1.45s ease-in-out infinite alternate} .kinetic-scene.is-hovering .about-core strong{animation-delay:.28s} @keyframes letterPop{to{transform:translateZ(34px) scale(1.06);letter-spacing:.01em}} .reveal.visible .process-foot span,.process-foot.visible span{animation:iconFlip 2.2s ease-in-out infinite} .story-screen.is-active{transform-origin:center;} /* Avoid pointer-tilt or wide motion on touch devices; scroll cards still converge. */ @media(max-width:760px){ html.motion-ready .fly-card{scale:.89;filter:blur(4px);transition-duration:.88s,.88s,.63s,.7s,.25s,.25s,.25s,.25s} html.motion-ready .fly-card.arrived{scale:1;filter:blur(0)} .orbit-stage{transform:none!important} .kinetic-scene.is-hovering .orbit-stage{transform:none!important} } @media(hover:none),(pointer:coarse){ .fx-tilt:hover{transform:none!important} } /* Respect accessibility and low-motion operating-system preferences. */ @media(prefers-reduced-motion:reduce){ html.motion-ready .fly-card,html.motion-ready .fly-card.arrived{ opacity:1!important;translate:none!important;scale:1!important;filter:none!important;transform:none!important;transition:none!important } html.motion-ready .fly-card>*,html.motion-ready .fly-card.arrived>*{opacity:1!important;translate:none!important;transform:none!important;transition:none!important} .orbit-stage,.kinetic-scene.is-hovering .orbit-stage{transform:none!important;transition:none!important} .kinetic-scene *, .kinetic-scene *::before,.kinetic-scene *::after{animation:none!important;transition:none!important} .section-heading,.section-heading em{animation:none!important;transform:none!important} } /* DEV MONDIALE V11 · logo teal / black, neutral white. All V9 3D/scroll motion retained. */ :root{ --brand:#008B9B;--teal:#008B9B;--lime:#008B9B;--violet:#008B9B; --panel:#008B9B;--muted:#050708;--ink:#050708; --halo-amber:#008B9B;--halo-green:#008B9B; --motion-amber:#008B9B;--motion-green:#008B9B; --motion-amber-strong:#008B9B;--motion-light:#FFFFFF; } body{color:#050708;background:#FFFFFF} ::selection{background:#008B9B;color:#050708} :focus-visible{outline:3px solid #008B9B;outline-offset:4px} /* Header / identity */ .site-header,.site-header.scrolled{background:rgba(255,255,255,.96);border-bottom:1px solid rgba(0,139,155,.22)} .brand-name,.brand-name span{color:#050708} .brand-name span{color:#008B9B} .brand-icon{background:#008B9B;border-color:#008B9B} .brand-icon .fallback-mark{color:#FFFFFF} .nav-links a{color:#050708} .nav-links a:hover{color:#008B9B} .tiny-badge{color:#008B9B} .nav-cta,.nav-cta:hover{background:#008B9B;color:#050708;border:1px solid #008B9B;box-shadow:0 7px 22px rgba(0,139,155,.20)} .nav-cta:hover{filter:brightness(.96)} .menu-toggle{color:#050708;border-color:#008B9B;background:#FFFFFF} .mobile-nav{background:#FFFFFF;color:#050708} .mobile-nav a{color:#050708} /* Front-page typography */ .hero{color:#050708} .hero h1{color:#050708} .hero h1 .outline{-webkit-text-stroke:1.4px #008B9B} .hero h1 .accent{color:#008B9B} .hero-description,.hero-proof,.hero-proof b{color:#050708} .hero-description strong{color:#008B9B} .eyebrow,.eyebrow-line,.hero-proof .proof-symbol{color:#008B9B} .btn-primary,.btn-primary:hover,.btn-dark,.btn-dark:hover,.btn-outline-dark,.btn-outline-dark:hover{ background:#008B9B!important;color:#050708!important;border:1px solid #008B9B!important; box-shadow:0 15px 33px rgba(0,139,155,.20); } .btn-primary span,.btn-dark span,.btn-outline-dark span{background:rgba(255,255,255,.35);color:#050708} .btn-text,.hero .btn-text,.hero .btn-text .down{color:#008B9B} /* Bright workflow demo: monochrome neutrals + pure brand teal */ .workflow-window,.flow-step{background:#FFFFFF;color:#050708} .workflow-window{border:1px solid #008B9B} .workflow-title-row h3,.step-info strong{color:#050708} .window-top-left,.step-info small,.window-footer{color:#050708} .workflow-title-row .demo-tag,.step-state,.flow-step:nth-child(2) .step-state,.flow-step:nth-child(3) .step-state,.flow-step:nth-child(4) .step-state{background:rgba(0,139,155,.10);color:#050708;border-color:#008B9B} .step-icon,.flow-step:nth-child(2) .step-icon,.flow-step:nth-child(3) .step-icon,.flow-step:nth-child(4) .step-icon{background:#008B9B;color:#FFFFFF} .flow-stack:before,.flow-stack:after,.pulse-dot,.window-dots i,.window-dots i:first-child,.window-dots i:nth-child(2),.window-dots i:nth-child(3){background:#008B9B} .chip-a{background:#008B9B;color:#050708;border-color:#008B9B} .chip-b{background:#FFFFFF;color:#050708;border-color:#008B9B} .chip-b .upper,.chip-b strong{color:#050708} .chip-b .check{color:#008B9B} /* White sections get black copy and teal emphasis; teal sections keep white copy. */ .services-section,.portfolio-section,.secondary-services,.about-section,.faq,footer{color:#050708;background:#FFFFFF} .services-section .section-heading,.portfolio-section .section-heading,.secondary-services .section-heading,.about-section .section-heading,.faq .section-heading{color:#050708} .services-section .section-intro p,.secondary-services .section-intro p,.about-section p,.portfolio-head>p,.faq p{color:#050708} .section-top,.section-top .right{color:#008B9B} .section-heading em,.portfolio-head h2 em{color:#008B9B} .service-card:not(:first-child),.secondary-card:not(:nth-child(2)){color:#050708;background:#FFFFFF} .service-card:not(:first-child) h3,.service-card:not(:first-child) p,.service-card:not(:first-child) .num,.secondary-card:not(:nth-child(2)) h3,.secondary-card:not(:nth-child(2)) p{color:#050708} .service-card:not(:first-child) .card-bottom,.service-card:not(:first-child) .card-bottom span{color:#008B9B} .showcase,.outcomes,.process,.contact,.project-feature{background:#008B9B;color:#FFFFFF} /* Explicit black lettering on clickable teal controls; do not use secondary button fills. */ .story-arrow,.project-live-link,.story-arrow:hover,.project-live-link:hover,.contact-buttons a,.contact-buttons a:hover, .about-link,.about-link:hover{ background:#008B9B!important;color:#050708!important;border:2px solid #FFFFFF!important; box-shadow:0 12px 29px rgba(0,0,0,.13); } .story-arrow:hover,.project-live-link:hover,.contact-buttons a:hover,.about-link:hover{transform:translateY(-5px)} .story-tab{border-color:rgba(255,255,255,.7)} .story-tab.is-active,.story-tab[aria-selected=true],.tab[aria-selected="true"]{ background:#008B9B;color:#050708;border-color:#FFFFFF; } .story-tab.is-active span,.story-tab[aria-selected=true] span{color:#050708} .tab,.tab:hover{border-color:#FFFFFF} /* The one dark supporting color appears in prominent data panels and small copy. */ .project-topbar{border-bottom-color:rgba(255,255,255,.3)} .project-status{color:#FFFFFF} .portfolio-section .portfolio-head h2{color:#050708} .portfolio-section .project-tag{color:#008B9B} .tech-pills span{background:#008B9B;color:#FFFFFF;border:1px solid #008B9B} .about-core{background:#008B9B;color:#FFFFFF} .about-orbit-tag{background:#008B9B;color:#FFFFFF;border-color:#008B9B} /* Restore white and black lettering contrast in the footer and FAQ. */ footer,footer a,footer p,footer span{color:#050708} .faq-question,.faq-question button{color:#050708} .faq-question button[aria-expanded=true] span:last-child{background:#008B9B;color:#050708} /* Remove warm-tint animations without compromising movement. */ @keyframes statusJump{to{transform:translateY(-5px) scale(1.25);background:#008B9B}} @media(max-width:760px){ .menu-toggle{color:#050708!important;background:#FFFFFF!important} .hero-description,.hero-proof,.hero-proof b{color:#050708} .nav-cta{background:#008B9B!important;color:#050708!important} .workflow-window{background:#FFFFFF} } /* V11 — brand teal buttons with white lettering, video-reference horizontal wipe. */ :root{--logo-teal:#008B9B;--cta-white:#FFFFFF} /* Solid logo teal, white copy on every actionable teal pill. */ .nav-cta,.nav-cta:hover,.nav-cta:focus-visible, .btn-primary,.btn-primary:hover,.btn-primary:focus-visible, .btn-dark,.btn-dark:hover,.btn-dark:focus-visible, .btn-outline-dark,.btn-outline-dark:hover,.btn-outline-dark:focus-visible, .project-live-link,.project-live-link:hover,.project-live-link:focus-visible, .about-link,.about-link:hover,.about-link:focus-visible, .story-arrow,.story-arrow:hover,.story-arrow:focus-visible, .contact-buttons a,.contact-buttons a:hover,.contact-buttons a:focus-visible, .story-tab.is-active,.story-tab[aria-selected="true"], .tab[aria-selected="true"]{ background:#008B9B!important; color:#FFFFFF!important; border-color:#008B9B!important; } .nav-cta *, .btn-primary *, .btn-dark *, .btn-outline-dark *, .project-live-link *, .about-link *, .story-arrow *, .contact-buttons a *, .story-tab.is-active span,.story-tab[aria-selected="true"] span,.tab[aria-selected="true"] *{ color:#FFFFFF!important; } .btn-primary>span:not(.cta-wipe-label), .btn-dark>span:not(.cta-wipe-label), .btn-outline-dark>span:not(.cta-wipe-label){ background:rgba(255,255,255,.18)!important; color:#FFFFFF!important; } #contact .contact-buttons a{border:1px solid #FFFFFF!important} /* Keep the smaller teal accordion indicator legible on teal. */ .faq-question button[aria-expanded="true"] span:last-child{color:#FFFFFF!important} /* Animate the *text only*, leaving the pill anchored exactly as in the reference clip. */ .video-wipe-button{position:relative;isolation:isolate} .video-wipe-button .cta-wipe-label{ display:inline-block!important; width:auto!important;height:auto!important; padding:0!important;margin:0!important; border:0!important;border-radius:0!important; background:transparent!important; box-shadow:none!important; color:#FFFFFF!important; line-height:inherit!important; white-space:normal; -webkit-font-smoothing:antialiased; flex:0 1 auto; will-change:clip-path; clip-path:inset(0 0 0 0); } .hero .btn-text.video-wipe-button .cta-wipe-label{color:var(--logo-teal)!important} /* Override older generic span hover keyframes: the label must remain horizontal. */ .video-wipe-button .cta-wipe-label,.video-wipe-button:hover .cta-wipe-label,.video-wipe-button:focus-visible .cta-wipe-label{ animation:none!important;transform:none!important; } .video-wipe-button.wipe-active .cta-wipe-label,.video-wipe-button.wipe-active:hover .cta-wipe-label{ animation:dmVideoTextWipe 1.72s cubic-bezier(.45,0,.42,1) both!important; } /* First erase the visible label from LEFT to RIGHT; then rebuild LEFT to RIGHT. */ @keyframes dmVideoTextWipe{ 0%{clip-path:inset(0 0 0 0)} 43%{clip-path:inset(0 0 0 100%)} 48%{clip-path:inset(0 100% 0 0)} 100%{clip-path:inset(0 0 0 0)} } /* Very narrow phones can wrap labels rather than crop text. */ @media(max-width:450px){ .video-wipe-button .cta-wipe-label{white-space:normal;overflow-wrap:anywhere;text-align:center} .nav-cta{gap:6px} .contact-buttons .btn{white-space:normal;min-height:54px} } @media(prefers-reduced-motion:reduce){ .video-wipe-button.wipe-active .cta-wipe-label{animation:none!important;clip-path:none!important} } /* ===== V12: responsive navigation with genuine open & close transitions ===== */ .mobile-menu-scrim{display:none} .hamburger-lines{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;width:23px;height:23px;pointer-events:none} .hamburger-lines span{display:block;width:23px;height:2px;border-radius:3px;background:#008B9B;transform-origin:center;transition:transform .42s cubic-bezier(.2,.75,.24,1),opacity .24s ease,width .32s ease} .menu-toggle{align-items:center;justify-content:center;position:relative;z-index:105;transition:background .32s ease,box-shadow .32s ease,transform .32s ease} .menu-toggle:active{transform:scale(.94)} .site-header.nav-open .hamburger-lines span:nth-child(1){transform:translateY(7px) rotate(45deg)} .site-header.nav-open .hamburger-lines span:nth-child(2){opacity:0;transform:scaleX(.25)} .site-header.nav-open .hamburger-lines span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} @media(max-width:920px){ .site-header{isolation:isolate} .menu-toggle{display:flex;flex:0 0 44px;min-width:44px;min-height:44px;border-radius:14px;border:1px solid rgba(0,139,155,.28);background:#FFFFFF;color:#008B9B} .site-header.nav-open #menuToggle{background:#008B9B!important;border-color:#008B9B!important;box-shadow:0 8px 24px rgba(0,139,155,.20)} .site-header.nav-open .hamburger-lines span{background:#FFFFFF} .mobile-nav,.mobile-nav[hidden]{ display:flex!important;flex-direction:column;gap:0; position:absolute;left:12px;right:12px;top:calc(100% - 1px); width:auto;min-width:0;max-width:660px;margin:0 auto; padding:15px 20px 18px; max-height:min(76dvh,640px);overflow-y:auto;overscroll-behavior:contain; border:1px solid rgba(0,139,155,.22);border-top:0;border-radius:0 0 27px 27px; background:#FFFFFF;color:#050708; box-shadow:0 28px 58px rgba(0,0,0,.17),0 8px 28px rgba(0,139,155,.08); opacity:0;visibility:hidden;pointer-events:none; transform:translateY(-19px) scale(.965);transform-origin:top center; clip-path:inset(0 0 100% 0 round 0 0 27px 27px); transition:opacity .4s ease,transform .55s cubic-bezier(.16,1,.3,1),clip-path .55s cubic-bezier(.16,1,.3,1),visibility 0s linear .55s; will-change:transform,clip-path,opacity; } .site-header.nav-open .mobile-nav{ opacity:1;visibility:visible;pointer-events:auto; transform:translateY(0) scale(1);clip-path:inset(0 0 0 0 round 0 0 27px 27px); transition:opacity .44s ease,transform .56s cubic-bezier(.16,1,.3,1),clip-path .56s cubic-bezier(.16,1,.3,1),visibility 0s; } .mobile-nav a{ position:relative;display:flex;align-items:center; min-height:54px;padding:13px 10px; font-weight:700;line-height:1.4;font-size:clamp(15px,3.6vw,18px); color:#050708;border-bottom:1px solid rgba(0,139,155,.15); opacity:0;transform:translateY(-14px); transition:opacity .3s ease,transform .42s cubic-bezier(.16,1,.3,1),color .25s ease; } .mobile-nav a:last-child{border-bottom:0;background:#008B9B;color:#FFFFFF;border-radius:15px;justify-content:center;margin-top:13px} .site-header.nav-open .mobile-nav a{opacity:1;transform:translateY(0)} .site-header.nav-open .mobile-nav a:nth-child(1){transition-delay:.06s} .site-header.nav-open .mobile-nav a:nth-child(2){transition-delay:.105s} .site-header.nav-open .mobile-nav a:nth-child(3){transition-delay:.15s} .site-header.nav-open .mobile-nav a:nth-child(4){transition-delay:.195s} .site-header.nav-open .mobile-nav a:nth-child(5){transition-delay:.24s} .mobile-nav a:focus-visible{outline-offset:-3px;border-radius:10px} .mobile-menu-scrim{ display:block;position:fixed;inset:0;z-index:95; background:rgba(5,7,8,.22);backdrop-filter:blur(0); opacity:0;visibility:hidden;pointer-events:none; transition:opacity .4s ease,backdrop-filter .4s ease,visibility 0s linear .4s; } body.menu-open .mobile-menu-scrim{opacity:1;visibility:visible;pointer-events:auto;backdrop-filter:blur(3px);transition:opacity .4s ease,backdrop-filter .4s ease,visibility 0s} .site-header{z-index:100} } @media(min-width:921px){.mobile-nav{display:none!important}.mobile-menu-scrim{display:none!important}} /* ===== Responsive layout refinements: size content rather than cropping it ===== */ @media(max-width:920px){ .container{max-width:100%;min-width:0} .section-intro,.section-intro>* , .showcase-panel,.panel-copy,.diagram,.diagram-inner,.service-grid,.service-card,.secondary-grid,.secondary-card,.process-grid,.process-item,.story-copy,.story-visual,.story-bottom,.project-main,.project-feature{min-width:0} .service-card,.secondary-card,.process-item{height:auto;min-height:min-content;overflow-wrap:break-word} .section-heading,.portfolio-head h2,.hero h1,.story-page h3,.contact h2{overflow-wrap:break-word} .panel-copy{width:100%;max-width:100%;padding:clamp(22px,5vw,43px)} .showcase-panel{width:100%;max-width:100%;grid-template-columns:minmax(0,1fr)} .diagram{width:100%;max-width:100%;padding:clamp(9px,3vw,25px);overflow:hidden} .diagram-inner{max-width:100%;min-width:0;gap:clamp(4px,1vw,12px)} .diagram-box{flex:1 1 0;max-width:145px;min-width:0;width:auto;padding:15px 5px;overflow-wrap:anywhere} .diagram-arrow{flex:0 0 auto;font-size:clamp(13px,2.5vw,21px)} .diagram-note{max-width:calc(100% - 24px);right:12px;bottom:12px;white-space:normal} .workflow-window,.flow-step{min-width:0;max-width:100%} .window-body,.window-top,.step-info,.workflow-title-row{min-width:0} .step-info strong,.step-info small{overflow-wrap:break-word} .story-copy,.story-page,.story-visual,.screen-frame,.screen-images,.screen-images img{max-width:100%} .contact-line,.footer-inner{flex-wrap:wrap} } @media(max-width:560px){ .brand-name{font-size:clamp(17px,5vw,20px)} .navbar{gap:8px} .section-intro p,.panel-copy p,.story-page p{max-width:100%;overflow-wrap:break-word} .hero h1{font-size:clamp(45px,11vw,64px);letter-spacing:-.065em} .hero-description{font-size:clamp(14px,3.5vw,16px)} .flow-step{gap:8px;padding:13px 10px} .flow-stack{min-width:0;gap:12px} .step-info{gap:7px;flex:1;min-width:0} .step-info strong{font-size:clamp(10px,2.8vw,13px)} .step-info small{font-size:clamp(9px,2.5vw,10px)} .step-state{font-size:clamp(8px,2vw,9px);white-space:normal;overflow-wrap:anywhere;flex:0 0 auto} .workflow-title-row{flex-wrap:wrap;gap:8px} .story-visual{width:100%;min-width:0} .story-bottom{padding-inline:12px} .story-tabs{min-width:0;max-width:100%} .story-tab{min-width:0;overflow-wrap:anywhere;white-space:normal} .project-main{min-width:0} .contact-buttons a{white-space:normal;max-width:100%;min-height:48px} .footer-links{max-width:100%} } /* On phones, use a vertical process flow: readable labels instead of tiny columns. */ @media(max-width:430px){ .diagram{min-height:0;padding:24px 12px 43px} .diagram-inner{flex-direction:column;gap:8px} .diagram-box{flex:none;width:min(100%,245px);max-width:245px;min-height:91px;padding:12px 14px} .diagram-box strong{font-size:13px;overflow-wrap:normal} .diagram-box small{font-size:10px} .diagram-icon{font-size:22px} .diagram-arrow{font-size:18px;transform:rotate(90deg);line-height:1} .diagram-note{bottom:9px;right:10px;font-size:9px} } @media(max-width:340px){ .container{width:calc(100% - 24px)} .hero h1{font-size:clamp(39px,11.7vw,44px)} .hero-buttons{align-items:stretch} .btn-primary{white-space:normal} .panel-copy{padding:22px 16px} .panel-copy h3{font-size:clamp(26px,8vw,32px)} .diagram{padding:19px 8px 37px} .diagram-inner{gap:5px} .diagram-box{padding:10px 8px;min-height:88px} .diagram-box strong{font-size:12px;line-height:1.25} .diagram-box small{font-size:10px} .diagram-icon{font-size:20px} .diagram-arrow{font-size:16px} .workflow-window{border-radius:20px} .window-body{padding:18px 10px} .window-top{padding:14px 10px} .flow-stack{padding-left:21px;gap:11px} .flow-stack:before,.flow-stack:after{left:8px} .flow-step:before{left:-18px} .step-icon{width:27px;height:27px;flex-basis:27px;font-size:15px} .step-state{padding:4px 5px} .contact h2{font-size:clamp(42px,12vw,60px)} .story-page h3{font-size:clamp(29px,10vw,36px)} .story-tab{font-size:9px;padding:10px 3px} .mobile-nav{left:7px;right:7px;padding-inline:14px} } @media(prefers-reduced-motion:reduce){ .mobile-nav,.mobile-nav a,.mobile-menu-scrim,.hamburger-lines span,.menu-toggle{transition:none!important;animation:none!important} } /* V13 — mobile scroll motion: same 3D language as desktop, driven by visibility/touch. */ @media (max-width:920px), (hover:none), (pointer:coarse) { /* V9 suppressed all orbit 3D transforms on small screens; restore a bounded sway. */ .kinetic-scene.is-hovering .orbit-stage { transform:perspective(1100px) rotateX(0deg) rotateY(0deg) scale(1)!important; animation:dmTouchOrbitSway 5.4s ease-in-out infinite; transform-style:preserve-3d; will-change:transform; } .kinetic-scene.is-hovering .orbit, .kinetic-scene.is-hovering .orbit.two, .kinetic-scene.is-hovering .ring-outer, .kinetic-scene.is-hovering .ring-inner, .kinetic-scene.is-hovering .about-orbit-ring {animation-play-state:running} /* Bring back the floating hero/dashboard movement previously disabled under 560px. */ .kinetic-scene.is-hovering .workflow-window { animation:dmTouchDashboard 5.2s ease-in-out infinite!important; transform-style:preserve-3d; will-change:transform; } .kinetic-scene.is-hovering .flow-step:nth-child(odd){animation-duration:3.6s} .kinetic-scene.is-hovering .flow-step:nth-child(even){animation-duration:4.1s} /* An in-view card has a distinct, light 3D lift after its existing fly-in. */ html.motion-ready .fly-card.arrived.touch-active { animation:dmTouchCardLift 4.2s ease-in-out infinite; transform-origin:50% 55%;transform-style:preserve-3d; will-change:transform; } .touch-active .service-icon,.touch-active .diagram-icon,.touch-active .benefit-icon { animation:dmTouchIconOrbit 3.6s ease-in-out infinite; } .fx-tilt.touch-pressed,.fx-tilt.touch-pressed:hover { transform:perspective(800px) rotateX(4deg) rotateY(-6deg) translateY(-5px) scale(.98)!important; box-shadow:0 15px 35px rgba(0,139,155,.22); } .video-wipe-button:active{transform:scale(.97)} } @keyframes dmTouchOrbitSway { 0%,100%{rotate:1 2 0 -8deg;scale:.985} 50%{rotate:2 1 0 8deg;scale:1.025} } @keyframes dmTouchDashboard { 0%,100%{transform:translateY(0) rotateX(0deg) rotateY(-2deg)} 50%{transform:translateY(-8px) rotateX(2deg) rotateY(3deg)} } @keyframes dmTouchCardLift { 0%,100%{transform:perspective(950px) rotateX(0deg) rotateY(0deg) translateY(0)} 45%{transform:perspective(950px) rotateX(2.2deg) rotateY(-2.8deg) translateY(-7px)} 75%{transform:perspective(950px) rotateX(-1.5deg) rotateY(2.1deg) translateY(-3px)} } @keyframes dmTouchIconOrbit { 0%,100%{transform:translateY(0) rotateY(0deg)} 50%{transform:translateY(-5px) rotateY(22deg)} } /* Respect the user's OS accessibility preference on mobile, as on desktop. */ @media(prefers-reduced-motion:reduce){ .kinetic-scene.is-hovering .orbit-stage, .kinetic-scene.is-hovering .workflow-window, html.motion-ready .fly-card.arrived.touch-active, .touch-active .service-icon,.touch-active .diagram-icon,.touch-active .benefit-icon, .fx-tilt.touch-pressed {animation:none!important;will-change:auto} .fx-tilt.touch-pressed{transform:none!important} } /* ===== V16: readable, responsive Dev Mondiale footer ===== */ #siteFooter.dm-footer{ position:relative;z-index:4; margin-top:-1px; padding:70px 0 27px; background:#FFFFFF; color:#050708; border-radius:clamp(30px,5vw,68px) clamp(30px,5vw,68px) 0 0; box-shadow:0 -12px 38px rgba(0,139,155,.07); } #siteFooter .dm-footer-container{max-width:1260px} #siteFooter .dm-footer-grid{ display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,.75fr) minmax(0,1fr); column-gap:clamp(25px,5vw,88px); row-gap:38px; padding-bottom:65px; } #siteFooter .dm-footer-intro,#siteFooter .dm-footer-nav,#siteFooter .dm-footer-connect{min-width:0} #siteFooter .dm-footer-logo{ display:inline-flex;align-items:center;gap:12px; color:#050708;text-decoration:none; font:800 clamp(23px,2.5vw,31px)/1.1 'Space Grotesk','DM Sans',sans-serif; letter-spacing:-.055em; } #siteFooter .dm-footer-wordmark span{color:#008B9B} #siteFooter .dm-footer-mark{ display:grid;place-items:center;flex:0 0 42px; width:42px;height:42px;border-radius:14px; background:#008B9B;color:#FFFFFF;font-size:32px;line-height:1; transition:transform .5s cubic-bezier(.22,1,.36,1); } #siteFooter .dm-footer-logo:hover .dm-footer-mark{transform:rotate(85deg) scale(1.07)} #siteFooter .dm-footer-intro p{ max-width:345px;margin:25px 0 22px; font-size:15px;line-height:1.85;color:#43545b; } #siteFooter .dm-footer-mini{font-size:10px;font-weight:800;letter-spacing:.18em;color:#008B9B} #siteFooter h2{font:800 14px/1.3 'DM Sans',sans-serif;letter-spacing:.015em;color:#050708;margin:8px 0 24px} #siteFooter .dm-footer-nav a{ display:flex;align-items:center;justify-content:space-between;gap:20px; margin-bottom:17px;font-size:14px;font-weight:600; color:#42555b;text-decoration:none;transition:color .25s,transform .25s; } #siteFooter .dm-footer-nav a span{color:#008B9B} #siteFooter .dm-footer-nav a:hover{color:#008B9B;transform:translateX(4px)} #siteFooter .dm-footer-email,#siteFooter .dm-footer-phone{ display:block;width:fit-content;max-width:100%;overflow-wrap:anywhere; font-size:14px;line-height:1.6;font-weight:700; color:#008B9B;text-decoration:none; } #siteFooter .dm-footer-email:hover,#siteFooter .dm-footer-phone:hover{text-decoration:underline;text-underline-offset:4px} #siteFooter .dm-footer-phone{margin-top:9px;color:#050708} #siteFooter .dm-footer-connect>p{margin:13px 0 25px;font-size:13px;line-height:1.5;color:#43545b} #siteFooter .dm-footer-social{display:flex;gap:10px;align-items:center;flex-wrap:wrap} #siteFooter .dm-footer-social a{ display:grid;place-items:center;width:43px;height:43px; border-radius:15px;background:#008B9B;color:#FFFFFF; border:1px solid #008B9B; box-shadow:0 6px 14px rgba(0,139,155,.14); transition:transform .34s cubic-bezier(.22,1,.36,1),background .25s,color .25s,box-shadow .25s; } #siteFooter .dm-footer-social a:hover{transform:translateY(-5px) rotate(-5deg);background:#FFFFFF;color:#008B9B;box-shadow:0 12px 28px rgba(0,139,155,.2)} #siteFooter .dm-footer-social a:focus-visible{outline:3px solid #008B9B;outline-offset:3px} #siteFooter .dm-footer-social svg{width:19px;height:19px;display:block} #siteFooter .dm-footer-bottom{ display:flex;align-items:center;justify-content:space-between; gap:14px 28px;flex-wrap:wrap; border-top:1px solid rgba(0,139,155,.16); padding-top:23px; } #siteFooter .dm-footer-bottom p,#siteFooter .dm-footer-bottom>span,#siteFooter .dm-footer-bottom a{ margin:0;color:#43545b;font-size:12px;line-height:1.5;font-weight:500; } #siteFooter .dm-footer-bottom a{color:#008B9B;font-weight:800;text-decoration:none;white-space:nowrap} #siteFooter .dm-footer-bottom a:hover{text-decoration:underline;text-underline-offset:4px} /* Keep the contact heading fully readable just above the footer */ #contact.contact{scroll-margin-top:95px;padding-top:clamp(95px,9vw,132px);padding-bottom:clamp(72px,8vw,120px)} #contact.contact h2{font-size:clamp(45px,8.5vw,106px);line-height:1.1;max-width:1050px;overflow-wrap:anywhere} @media(max-width:880px){ #siteFooter.dm-footer{padding:58px 0 27px} #siteFooter .dm-footer-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:34px 38px} #siteFooter .dm-footer-intro{grid-column:1/-1} #siteFooter .dm-footer-grid{padding-bottom:44px} } @media(max-width:560px){ #siteFooter.dm-footer{padding:47px 0 24px;border-radius:35px 35px 0 0} #siteFooter .dm-footer-grid{grid-template-columns:minmax(0,1fr);gap:30px;padding-bottom:35px} #siteFooter .dm-footer-intro{grid-column:auto} #siteFooter .dm-footer-intro p{margin:16px 0 17px} #siteFooter h2{margin:0 0 15px} #siteFooter .dm-footer-nav a{margin-bottom:13px} #siteFooter .dm-footer-bottom{align-items:flex-start;flex-direction:column;gap:10px;padding-top:20px} #contact.contact{padding-top:96px;padding-bottom:68px} #contact.contact h2{font-size:clamp(42px,11vw,66px);line-height:1.12;margin:22px 0} } @media(prefers-reduced-motion:reduce){ #siteFooter .dm-footer-logo .dm-footer-mark,#siteFooter .dm-footer-social a,#siteFooter .dm-footer-nav a{transition:none!important} } /* ===== V17: four editorial contact tiles with motion ===== */ #contact .contact-line.dm-contact-highlights{ display:grid;grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(12px,1.45vw,20px);align-items:stretch; margin-top:clamp(56px,7vw,98px);padding:0;border:0; color:#050708;perspective:1300px; } #contact .dm-contact-card{ position:relative;isolation:isolate;overflow:hidden; display:flex;flex-direction:column;align-items:flex-start; min-width:0;min-height:222px;padding:clamp(20px,2.2vw,28px); border:1px solid rgba(255,255,255,.72);border-radius:clamp(22px,2.4vw,30px); background:#FFFFFF;color:#050708;text-decoration:none; box-shadow:0 16px 35px rgba(0,54,64,.12),inset 0 1px 0 rgba(255,255,255,.8); transition:transform .58s cubic-bezier(.2,.72,.22,1),opacity .85s ease, box-shadow .42s ease,border-color .42s ease; transition-delay:calc(var(--card-order,0)*85ms); } #contact .dm-contact-card.reveal{ opacity:0; transform:translate3d(var(--card-in,0px),38px,0) rotateY(7deg) scale(.94); } #contact .dm-contact-card.reveal.visible{ opacity:1;transform:translate3d(0,0,0) rotateY(0) scale(1); transition-delay:0s; } #contact .dm-contact-card::after{ content:"";position:absolute;pointer-events:none; inset:-60% auto -60% -70%;width:55%;z-index:-1; background:linear-gradient(95deg,transparent,rgba(0,139,155,.04),transparent); transform:skewX(-20deg) translateX(-140%); transition:transform 1.15s cubic-bezier(.2,.72,.22,1); } #contact .dm-contact-card:hover::after,#contact .dm-contact-card:focus-visible::after{ transform:skewX(-20deg) translateX(620%); } #contact .dm-contact-icon{ display:grid;place-items:center;width:46px;height:46px; background:#008B9B;color:#FFFFFF;border-radius:15px; margin-bottom:clamp(21px,2.3vw,29px); box-shadow:0 8px 15px rgba(0,139,155,.16); transition:transform .42s cubic-bezier(.2,.72,.22,1),box-shadow .42s ease; } #contact .dm-contact-icon svg{width:24px;height:24px;flex:none} #contact .dm-contact-kicker{ display:block;margin-bottom:12px; color:#008B9B;font-size:10px;font-weight:800;letter-spacing:.135em;line-height:1.35; } #contact .dm-contact-value{ display:block;max-width:100%;color:#050708; font:700 clamp(17px,1.65vw,23px)/1.28 'Space Grotesk','DM Sans',sans-serif; letter-spacing:-.045em;overflow-wrap:anywhere; } #contact .dm-contact-value span{color:#008B9B} #contact .dm-contact-email{font-size:clamp(15px,1.32vw,18px);letter-spacing:-.03em} #contact .dm-contact-sub{ display:block;max-width:100%;margin-top:auto;padding-top:13px; color:#008B9B;font-size:12px;line-height:1.5;font-weight:600;letter-spacing:0; overflow-wrap:anywhere; } #contact .dm-contact-sub span{display:inline-block;transition:transform .4s ease} #contact .dm-contact-card:is(:hover,:focus-visible) .dm-contact-icon{ transform:translateY(-2px) scale(1.04); box-shadow:0 10px 18px rgba(0,139,155,.20); } #contact .dm-contact-card:is(:hover,:focus-visible) .dm-contact-sub span{transform:translate(2px,-2px)} @media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){ #contact .dm-contact-card::before{ content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none; background:radial-gradient(ellipse at var(--glow-x,50%) var(--glow-y,50%),rgba(0,139,155,.12),transparent 60%); opacity:0;transition:opacity .4s ease; } #contact .dm-contact-card:is(:hover,:focus-visible)::before{opacity:1} #contact .dm-contact-card.reveal.visible:is(:hover,:focus-visible){ transform:perspective(1000px) rotateX(var(--mx-rx,0deg)) rotateY(var(--mx-ry,0deg)) translateY(-5px); box-shadow:0 24px 50px rgba(0,54,64,.19); border-color:rgba(0,139,155,.48); transition-delay:0s; } } #contact .dm-contact-card.dm-contact-link:focus-visible{outline:3px solid #050708;outline-offset:4px} #contact .dm-contact-card.dm-contact-link:active{transform:scale(.975);transition-duration:.14s;transition-delay:0s} @media(max-width:1050px){ #contact .contact-line.dm-contact-highlights{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px} #contact .dm-contact-card{min-height:200px} #contact .dm-contact-value{font-size:clamp(18px,2.2vw,23px)} #contact .dm-contact-email{font-size:clamp(17px,1.8vw,21px)} } @media(max-width:520px){ #contact .contact-line.dm-contact-highlights{grid-template-columns:minmax(0,1fr);gap:13px;margin-top:44px} #contact .dm-contact-card{min-height:0;padding:20px 21px;border-radius:23px} #contact .dm-contact-icon{margin-bottom:16px;width:42px;height:42px;border-radius:13px} #contact .dm-contact-kicker{font-size:10px;margin-bottom:8px} #contact .dm-contact-value{font-size:21px} #contact .dm-contact-email{font-size:19px} #contact .dm-contact-sub{margin-top:3px;padding-top:9px} #contact .dm-contact-card.reveal{transform:translate3d(0,25px,0) scale(.96)} } @media(prefers-reduced-motion:reduce){ #contact .dm-contact-card.reveal,#contact .dm-contact-card.reveal.visible{ opacity:1;transform:none;transition:none!important; } #contact .dm-contact-card::after,#contact .dm-contact-icon{transition:none!important} } /* Only desktop/tablet-in-landscape: fit the COMPLETE hero in the viewport. */ @media (min-width:921px) { #top.hero { height:100vh; height:100svh; min-height:0; padding:clamp(96px,12.5vh,128px) 0 clamp(30px,5vh,46px); } #top .hero-grid { min-height:0; } #top .hero-copy { padding-top:0; } #top .hero h1, #top h1 { font-size:clamp(52px,min(5.7vw,9.5vh),86px); line-height:.99; margin:clamp(13px,2.3vh,23px) 0; } #top .hero-description { font-size:clamp(14px,1.3vw,16px);line-height:1.62; } #top .hero-buttons { margin-top:clamp(16px,2.7vh,25px); gap:clamp(12px,1.5vw,24px); } #top .hero-proof { margin-top:clamp(16px,3.2vh,30px); } #top .visual-wrap { height:min(540px,calc(100svh - 165px)); } #top .workflow-window { min-height:0; } #top .window-top { padding:16px 22px; } #top .window-body { padding:21px 22px 17px; } #top .workflow-title-row { margin-bottom:17px; } #top .flow-stack { gap:12px; } #top .flow-step { padding:12px 14px; } #top .window-footer { margin-top:13px;padding-top:10px; } #top .hero-bottom { bottom:clamp(8px,2vh,20px); } } @media (min-width:921px) and (max-height:740px) { #top.hero { padding-top:94px;padding-bottom:22px; } #top h1 {font-size:clamp(48px,min(5.2vw,9vh),70px);margin:12px 0;} #top .hero-description{font-size:14px;line-height:1.52;} #top .hero-buttons{margin-top:15px;} #top .hero-proof{margin-top:14px;} #top .visual-wrap{height:calc(100svh - 135px);} #top .window-body{padding:15px 17px 12px;} #top .window-top{padding:12px 18px;} #top .workflow-title-row{margin-bottom:12px;} #top .flow-stack{gap:8px;} #top .flow-step{padding:9px 11px;} #top .window-footer{margin-top:9px;padding-top:8px;} } .service-visit-link{text-align:right;margin:20px 2px 0;color:#008B9B;font-size:14px;font-weight:700}.service-visit-link a{display:inline-flex;gap:8px;align-items:center;text-decoration:underline;text-underline-offset:4px}.service-visit-link a:hover{color:#00636E} /* Hover stability: workflow rows must not move out from under the pointer. The old stepFocus keyframes animated transform/background, while hover applied another transform and restarted the animation on mouseleave. */ .flow-step, .flow-step:nth-child(2), .flow-step:nth-child(3), .flow-step:nth-child(4), .kinetic-scene.is-hovering .flow-step { animation: none !important; transform: none !important; transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease; } .flow-step:hover, .kinetic-scene.is-hovering .flow-step:hover { animation: none !important; transform: none !important; background: rgba(0,139,155,.06); border-color: #008B9B; box-shadow: 0 12px 26px rgba(0,139,155,.14); } /* Prevent the animated sweep from flashing across a hovered row. */ .flow-step:after, .flow-step:nth-child(2):after, .flow-step:nth-child(3):after, .flow-step:nth-child(4):after { animation: none !important; opacity: 0; } /* Hero cleanup: remove every ambient teal overlay (including later legacy overrides). Brand teal stays on text, buttons, icons, and workflow progress markers. */ #top.hero { background: #FFFFFF !important; } #top.hero::before, #top.hero::after, #top .hero-glow, #top .visual-wrap::before { content: none !important; background: none !important; box-shadow: none !important; filter: none !important; animation: none !important; } /* Keep both decorative orbit rings visible; do not reintroduce ambient tint. */ #top .orbit, #top .orbit.two { display: block !important; } #top .workflow-window { border: 3px solid #008B9B; box-shadow: 0 22px 50px rgba(15,23,42,.12), 0 6px 14px rgba(15,23,42,.05); } #top .workflow-window::before { background: none !important; } /* Keep a neutral background behind the board on all screen sizes. */ #top .visual-wrap, #top .orbit-stage { background: transparent !important; } /* Align logged-in WordPress admin toolbar with fixed site header. */ body.admin-bar .site-header{top:34px} @media(max-width:782px){body.admin-bar .site-header{top:48px}}