:root{
  --blue:#1687f8;
  --sky:#38bdf8;
  --deep:#070a10;
  --ink:#0b1018;
  --muted:#667085;
  --line:#e5e9ef;
  --soft:#f5f8fb;
  --white:#fff;
  --radius:24px;
  --shadow:0 22px 70px rgba(7,10,16,.10);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:Inter,Arial,sans-serif;color:var(--ink);background:#fff;line-height:1.6;overflow-x:hidden}
body.menu-open{overflow:hidden}
a{text-decoration:none;color:inherit}
button,input,textarea,select{font:inherit}
button{cursor:pointer}
img{max-width:100%;display:block}
.container{width:min(1180px,calc(100% - 48px));margin:auto}
.page-noise{position:fixed;inset:0;pointer-events:none;opacity:.025;z-index:100;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E")}
.site-header{
    height:85px;
    position:fixed;
    top:0;
    left:0;
    right:0;
    z-index:1000;
    overflow-y: hidden;
    background:rgba(255,255,255,0.96);
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);

    border-bottom:1px solid rgba(10,16,24,0.08);

    transition:
        background 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;
}.site-header.scrolled{background:rgba(255,255,255,.84);backdrop-filter:blur(18px);border-color:rgba(10,16,24,.08);box-shadow:0 10px 35px rgba(10,16,24,.05)}
.nav-wrap{height:100%;display:flex;align-items:center;justify-content:space-between;gap:32px}
.brand img{width:168px;height:auto;object-fit:contain}
.main-nav{display:flex;align-items:center;gap:30px;font-size:14px;font-weight:600}
.main-nav a{position:relative;padding:8px 0;color:#4b5563;transition:.25s}
.main-nav a:hover,.main-nav a.active{color:var(--ink)}
.main-nav a.active:after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--blue)}
.nav-cta{background:var(--deep);color:white;padding:12px 19px;border-radius:999px;font-size:13px;font-weight:700;transition:.25s}
.nav-cta:hover{transform:translateY(-2px);background:var(--blue)}
.nav-cta span,.btn span,.text-link span,.arrow-link,.card-arrow{margin-left:7px}
.menu-toggle{display:none;background:none;border:0;width:40px;height:40px}
.menu-toggle span{display:block;width:24px;height:2px;background:var(--ink);margin:5px auto;transition:.25s}
.section{padding:115px 0}
.section-sm{padding:70px 0}
.hero{min-height:820px;padding-top:150px;display:flex;flex-direction:column;justify-content:center;background:radial-gradient(circle at 76% 34%,rgba(56,189,248,.18),transparent 28%),linear-gradient(180deg,#fff 0%,#f8fbff 100%);position:relative}
.hero-grid{display:grid;grid-template-columns:1.04fr .96fr;gap:60px;align-items:center}
.eyebrow,.kicker{display:inline-flex;align-items:center;gap:9px;font-size:11px;letter-spacing:.20em;font-weight:800;color:#64748b}
.eyebrow-dot{width:7px;height:7px;background:var(--blue);border-radius:50%;box-shadow:0 0 0 5px rgba(22,135,248,.1)}
.hero h1{font-family:"Space Grotesk",sans-serif;font-size:clamp(48px,6vw,78px);line-height:1.02;letter-spacing:-.055em;max-width:760px;margin:24px 0}
.hero h1 em,.section-heading h2 em,.tech-layout h2 em,.about-copy h2 em,.contact-copy h2 em,.inner-hero h1 em{font-style:normal;color:var(--blue)}
.hero-text{font-size:18px;color:#596474;max-width:620px;line-height:1.8}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:34px}
.btn{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;padding:15px 22px;font-size:14px;font-weight:700;border:1px solid transparent;transition:.25s ease}
.btn:hover{transform:translateY(-3px)}
.btn-primary{background:var(--blue);color:#fff;box-shadow:0 14px 32px rgba(22,135,248,.22)}
.btn-primary:hover{background:#0875e3}
.btn-ghost{background:white;border-color:#dfe5ec}
.btn-ghost:hover{border-color:var(--blue)}
.btn-dark{background:var(--deep);color:#fff}
.hero-meta{display:flex;gap:32px;margin-top:56px}
.hero-meta div{display:flex;flex-direction:column;gap:1px;border-left:1px solid #dbe1e8;padding-left:13px}
.hero-meta strong{font-family:"Space Grotesk";font-size:13px;color:var(--blue)}
.hero-meta span{font-size:11px;color:#7b8491;text-transform:uppercase;letter-spacing:.08em}
.hero-art{min-height:540px;position:relative;display:grid;place-items:center}
.hero-card{width:min(430px,80%);aspect-ratio:1/1;position:relative;background:linear-gradient(145deg,#0b111b,#171e2a);border-radius:44px;box-shadow:0 35px 90px rgba(7,10,16,.22);overflow:hidden;display:flex;align-items:center;justify-content:center}
.hero-card:before{content:"";position:absolute;width:360px;height:360px;border-radius:50%;background:radial-gradient(circle,rgba(22,135,248,.38),transparent 65%);filter:blur(5px)}
.mini-brand{position:absolute;top:25px;left:28px;color:#fff;font-weight:800;font-family:"Space Grotesk";letter-spacing:.12em}
.hero-symbol{position:relative;font-family:"Space Grotesk";font-weight:800;font-size:185px;line-height:1;letter-spacing:-.2em;transform:translateX(-12px);z-index:2}
.symbol-t{color:#1687f8}.symbol-x{color:#f4f7fa;margin-left:-15px}
.hero-symbol i,.hero-symbol b,.hero-symbol small{position:absolute;background:#1687f8}
.hero-symbol i{width:25px;height:25px;right:-7px;top:6px}.hero-symbol b{width:17px;height:17px;right:-35px;top:45px}.hero-symbol small{width:11px;height:11px;right:-55px;top:86px}
.hero-card-bottom{position:absolute;bottom:24px;left:28px;right:28px;display:flex;justify-content:space-between;color:#9ca7b7;font-size:9px;letter-spacing:.16em;font-weight:700}
.hero-orbit{position:absolute;border:1px solid rgba(22,135,248,.22);border-radius:50%}
.orbit-a{width:580px;height:580px;animation:spin 24s linear infinite}
.orbit-b{width:700px;height:300px;transform:rotate(-35deg);border-color:rgba(11,16,24,.08)}
@keyframes spin{to{transform:rotate(360deg)}}
.float-card{position:absolute;z-index:5;display:flex;align-items:center;gap:11px;background:rgba(255,255,255,.94);border:1px solid rgba(10,16,24,.08);padding:12px 15px;border-radius:16px;box-shadow:0 18px 40px rgba(10,16,24,.10);backdrop-filter:blur(10px);animation:float 4s ease-in-out infinite}
.float-card b,.float-card small{display:block}.float-card b{font-size:12px}.float-card small{font-size:10px;color:#8892a0;margin-top:2px}.float-icon{display:grid;place-items:center;width:33px;height:33px;border-radius:10px;background:#0d131d;color:white}.float-icon.blue{background:var(--blue)}
.float-one{left:0;top:20%}.float-two{right:-8px;top:36%;animation-delay:-1.3s}.float-three{left:8%;bottom:12%;animation-delay:-2.2s}
@keyframes float{50%{transform:translateY(-9px)}}
.hero-bottom-line{display:flex;align-items:center;gap:20px;margin-top:80px;font-size:10px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:#7c8795}
.hero-bottom-line .line{height:1px;background:#dfe5eb;flex:1}
.stats{background:var(--deep);color:white}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:30px}
.stat{border-left:1px solid rgba(255,255,255,.12);padding-left:22px}.stat strong{font:700 40px "Space Grotesk";display:block}.stat span{color:#8e9aaa;font-size:12px;text-transform:uppercase;letter-spacing:.1em}
.section-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:50px;margin-bottom:55px}.section-heading h2{font:700 clamp(38px,4.4vw,62px)/1.05 "Space Grotesk";letter-spacing:-.045em;margin-top:13px;max-width:700px}.section-heading p{color:var(--muted);max-width:390px;font-size:15px}
.service-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:15px}.service-card{border:1px solid var(--line);border-radius:var(--radius);padding:27px;min-height:365px;display:flex;flex-direction:column;transition:.3s;background:white}.service-card:hover{transform:translateY(-7px);box-shadow:var(--shadow);border-color:#cbd7e5}.service-card.featured{background:var(--deep);color:white;border-color:var(--deep)}.service-top{display:flex;justify-content:space-between}.service-number{font-size:11px;color:#8a95a4;font-weight:700}.service-icon{width:44px;height:44px;border-radius:13px;background:#f0f6fd;color:var(--blue);display:grid;place-items:center;font-size:20px}.featured .service-icon{background:rgba(255,255,255,.09)}.service-card h3{font:700 25px "Space Grotesk";margin-top:75px}.service-card p{font-size:13px;color:#707b89;margin-top:10px;line-height:1.7}.featured p{color:#a9b3c0}.tag-row{display:flex;gap:6px;flex-wrap:wrap;margin-top:18px}.tag-row span{font-size:9px;padding:6px 8px;border-radius:999px;background:#f3f6f9;color:#6c7785;font-weight:700}.featured .tag-row span{background:rgba(255,255,255,.08);color:#c3ccd7}.service-card a{margin-top:auto;font-size:11px;font-weight:800;color:var(--blue);padding-top:22px}
.projects-feature{background:#f7f9fc}.project-showcase{display:grid;grid-template-columns:1.15fr .85fr;gap:18px}.project-feature-card{border-radius:28px;overflow:hidden;display:block;transition:.3s}.project-feature-card:hover{transform:translateY(-6px);box-shadow:var(--shadow)}.project-dark{background:var(--deep);color:white}.project-light{background:white;border:1px solid var(--line)}.project-image{height:390px;position:relative;display:grid;place-items:center;overflow:hidden}.water-visual{background:radial-gradient(circle at 55% 45%,#1b8cff 0,#0d2749 31%,#0a1019 65%)}.visual-grid{position:absolute;inset:0;opacity:.25;background-image:linear-gradient(rgba(255,255,255,.14) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.14) 1px,transparent 1px);background-size:32px 32px;transform:perspective(500px) rotateX(55deg) scale(1.5);transform-origin:center bottom}
.device-phone{width:190px;height:350px;border:7px solid #222d3b;border-radius:30px;background:#05090f;position:relative;z-index:2;box-shadow:0 25px 70px rgba(0,0,0,.35);padding:12px}.phone-notch{width:55px;height:7px;background:#1e2a39;border-radius:10px;margin:0 auto 15px}.phone-screen{height:300px;border-radius:20px;background:linear-gradient(180deg,#111c2a,#0a1019);padding:18px;text-align:center;color:white;position:relative}.screen-label{display:block;font-size:7px;letter-spacing:.14em;color:#8c9aab}.phone-screen strong{display:block;font:700 49px "Space Grotesk";margin-top:8px}.phone-screen strong span{font-size:16px;color:var(--blue)}.water-ring{width:105px;height:105px;border-radius:50%;border:9px solid #1d344e;margin:10px auto;position:relative}.water-ring:after{content:"";position:absolute;inset:-9px;border-radius:50%;border:9px solid var(--blue);clip-path:polygon(0 0,100% 0,100% 78%,0 78%)}.phone-screen small{font-size:8px;color:#8793a2}.project-badge,.mini-chip{position:absolute;left:25px;top:25px;padding:8px 10px;border-radius:999px;background:rgba(255,255,255,.1);color:#dbe7f4;border:1px solid rgba(255,255,255,.14);font-size:9px;font-weight:800;letter-spacing:.1em;z-index:4}.project-badge.dark{background:#101722;color:#fff;border-color:#101722}.project-info{padding:25px 28px 29px}.project-info>div{display:flex;align-items:center;gap:15px}.project-index{font-size:10px;color:var(--blue);font-weight:800}.project-info h3{font:700 27px "Space Grotesk"}.project-info p{font-size:13px;color:#87919f;margin:10px 0 19px;max-width:520px}.project-dark .project-info p{color:#8f9aaa}.arrow-link{font-size:11px;font-weight:800;color:var(--blue)}
.pet-visual{background:linear-gradient(135deg,#dff3ff,#f7fbff)}.pet-ui{width:170px;min-height:250px;background:rgba(255,255,255,.86);border:1px solid #dce8f1;border-radius:27px;padding:23px;box-shadow:0 25px 55px rgba(29,83,120,.13);text-align:center;position:relative;z-index:2}.pet-ui.large{width:230px;min-height:285px}.pet-avatar{width:72px;height:72px;border-radius:23px;background:#0c1420;color:white;display:grid;place-items:center;font-size:31px;margin:0 auto 13px}.pet-ui b{display:block;font-family:"Space Grotesk";font-size:20px}.pet-ui small{display:block;color:#8994a2;font-size:9px;margin-top:3px}.pet-lines{margin:18px 0}.pet-lines i{display:block;height:5px;background:#e9eef3;border-radius:5px;margin:7px auto;width:80%}.pet-button{margin-top:20px;border-radius:999px;background:var(--blue);color:#fff;font-size:9px;font-weight:800;padding:11px}.tech-section{background:var(--deep);color:white}.tech-layout{display:grid;grid-template-columns:.8fr 1.2fr;gap:100px;align-items:center}.tech-layout h2{font:700 clamp(40px,4.7vw,64px)/1.04 "Space Grotesk";letter-spacing:-.05em;margin:14px 0 20px}.tech-layout p{color:#929eae;max-width:460px}.tech-cloud{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;padding:35px}.tech-pill{border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.045);padding:15px 19px;border-radius:999px;font-size:14px;font-weight:700}.tech-pill.blue{border-color:rgba(56,189,248,.35);color:#75cfff;background:rgba(22,135,248,.08)}.tech-pill.big{font-size:18px;padding:18px 24px}.process-grid{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line)}.process-card{padding:27px 25px 10px;border-right:1px solid var(--line);min-height:230px}.process-card:last-child{border-right:0}.process-card>span{font:700 12px "Space Grotesk";color:var(--blue)}.process-line{width:100%;height:1px;background:var(--line);margin:20px 0}.process-card h3{font:700 27px "Space Grotesk"}.process-card p{font-size:13px;color:#7c8795;margin-top:8px}.about-section{background:#eef7ff}.about-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:100px;align-items:center}.about-mark{min-height:420px;border-radius:35px;background:var(--deep);display:flex;flex-direction:column;justify-content:center;align-items:center;position:relative;overflow:hidden;color:#8995a5}.about-mark:before{content:"";position:absolute;width:350px;height:350px;border-radius:50%;background:radial-gradient(circle,rgba(22,135,248,.35),transparent 65%)}.about-logo{position:relative;width:240px;z-index:2}.about-logo img{filter:none}.about-mark>span{position:relative;z-index:2;font-size:10px;letter-spacing:.2em;margin-top:20px}.about-copy h2{font:700 clamp(40px,4.2vw,59px)/1.06 "Space Grotesk";letter-spacing:-.045em;margin:14px 0 24px}.about-copy p{color:#687585;max-width:600px;margin:12px 0}.about-copy .btn{margin-top:20px}.contact-section{padding:110px 0;background:var(--deep)}.contact-box{display:grid;grid-template-columns:1fr 1fr;gap:75px;background:#101720;border:1px solid rgba(255,255,255,.08);border-radius:34px;padding:60px;color:white}.contact-copy h2{font:700 clamp(42px,4.7vw,67px)/1.03 "Space Grotesk";letter-spacing:-.05em;margin:15px 0}.contact-copy>p{color:#929dac;max-width:480px}.contact-details{display:flex;flex-direction:column;gap:7px;margin-top:45px}.contact-details a{color:#fff;font-weight:700}.contact-details span{color:#7f8a99;font-size:13px}.contact-form{display:flex;flex-direction:column;gap:17px}.contact-form label{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:#8f9baa;font-weight:700}.contact-form input,.contact-form select,.contact-form textarea{display:block;width:100%;margin-top:7px;border:1px solid rgba(255,255,255,.1);background:#0a1017;color:white;border-radius:12px;padding:13px 14px;outline:none;font-size:13px;resize:none}.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(22,135,248,.1)}.contact-form select option{background:#0a1017}.form-note{font-size:12px;color:#71d6a1;min-height:18px}
.footer{background:#070a10;color:white;padding:75px 0 25px;border-top:1px solid rgba(255,255,255,.06)}.footer-top{display:grid;grid-template-columns:2fr repeat(3,1fr);gap:40px}
.footer-brand img{
    width:190px;
    height:auto;
    display:block;

    background:#ffffff;
    border-radius:14px;
    padding:7px;

    filter:none;
    opacity:1;
}

.footer-brand p{color:#727e8d;font-size:12px;margin-top:12px}.footer-col{display:flex;flex-direction:column;gap:10px}.footer-col h4{font-size:10px;text-transform:uppercase;letter-spacing:.16em;color:#7f8a98;margin-bottom:6px}.footer-col a{font-size:12px;color:#c3cad3;transition:.2s}.footer-col a:hover{color:var(--sky)}.footer-bottom{border-top:1px solid rgba(255,255,255,.08);margin-top:55px;padding-top:20px;display:flex;justify-content:space-between;color:#626d7c;font-size:10px}
.inner-hero{padding:190px 0 100px;background:radial-gradient(circle at 75% 25%,rgba(56,189,248,.14),transparent 28%),#f8fbff}.inner-hero-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:80px;align-items:end}.inner-hero h1{font:700 clamp(53px,7vw,86px)/.98 "Space Grotesk";letter-spacing:-.06em;margin-top:18px}.inner-hero-copy{border-left:1px solid #dbe2e9;padding-left:30px}.inner-hero-copy p{color:#667384;max-width:420px}.filter-bar{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:42px}.filter{border:1px solid var(--line);background:white;border-radius:999px;padding:11px 18px;font-size:11px;font-weight:800;color:#657181}.filter.active,.filter:hover{background:var(--deep);border-color:var(--deep);color:#fff}.project-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}.library-card{border:1px solid var(--line);border-radius:28px;overflow:hidden;background:white;transition:.3s}.library-card:hover{transform:translateY(-7px);box-shadow:var(--shadow)}.library-card.hidden{display:none}.library-card.featured-card{grid-column:span 2}.library-image{height:360px;position:relative;display:grid;place-items:center;overflow:hidden}.featured-card .library-image{height:440px}.library-info{padding:27px}.library-info>span:first-child{font-size:9px;color:var(--blue);font-weight:800;text-transform:uppercase;letter-spacing:.14em}.library-info h2{font:700 31px "Space Grotesk";margin-top:8px}.library-info p{font-size:13px;color:#748091;max-width:600px;margin:8px 0 19px}.card-arrow{font-size:11px;font-weight:800;color:var(--ink)}.dashboard-card{width:320px;background:rgba(8,14,23,.82);border:1px solid rgba(255,255,255,.14);border-radius:25px;padding:27px;color:white;box-shadow:0 30px 80px rgba(0,0,0,.35);position:relative;z-index:2}.dashboard-card span{font-size:9px;color:#8796a8;letter-spacing:.15em}.dashboard-card strong{display:block;font:700 72px "Space Grotesk";line-height:1;margin:14px 0 7px}.dashboard-card small{color:#8391a2}.dashboard-bar{height:8px;border-radius:10px;background:#243449;margin-top:25px;overflow:hidden}.dashboard-bar i{display:block;width:78%;height:100%;background:linear-gradient(90deg,#1687f8,#38bdf8)}.mini-chip{left:auto;right:22px;top:22px}.browser-frame{width:75%;height:220px;background:white;border-radius:17px;box-shadow:0 30px 60px rgba(13,28,43,.15);overflow:hidden;position:relative}.browser-top{height:30px;background:#edf2f6;display:flex;gap:5px;align-items:center;padding:0 12px}.browser-top i{width:6px;height:6px;background:#b7c2ce;border-radius:50%}.browser-body{padding:24px}.browser-body b{font:700 22px "Space Grotesk";display:block}.browser-body span{height:12px;background:#edf1f5;border-radius:4px;display:block;width:85%;margin-top:15px}.browser-body span:nth-of-type(2){width:62%}.browser-body span:nth-of-type(3){width:75%}.browser-body span:nth-of-type(4){width:45%}.task-visual{background:#eef7ff}.task-panel{width:250px;background:#fff;border:1px solid #dfeaf3;border-radius:20px;padding:22px;box-shadow:0 25px 60px rgba(20,68,101,.12);position:relative;z-index:2}.task-title{font:700 22px "Space Grotesk";margin-bottom:16px}.task-row{padding:11px 0;border-top:1px solid #edf0f4;font-size:11px;color:#536070}.task-row.done{color:#1687f8}.sensor-visual{background:#0a1018}.sensor-board{width:260px;height:180px;background:#153b36;border:8px solid #234c44;border-radius:18px;position:relative;z-index:2;box-shadow:0 25px 70px rgba(0,0,0,.4);padding:30px}.board-chip{background:#0a1a19;color:#78d4be;padding:10px;border-radius:7px;font:700 12px monospace}.sensor-board i{display:block;width:9px;height:9px;background:#38bdf8;border-radius:50%;margin-top:12px}.sensor-board span{position:absolute;right:18px;bottom:18px;color:#78d4be;font-size:8px;letter-spacing:.12em}.signal{position:absolute;border:1px solid rgba(56,189,248,.25);border-radius:50%}.s1{width:260px;height:260px}.s2{width:400px;height:400px}.s3{width:540px;height:540px}.portal-visual{background:#f3f8fc}.portal-card{width:280px;background:#fff;border:1px solid #dce7f0;border-radius:22px;padding:25px;box-shadow:0 25px 55px rgba(20,68,101,.11);position:relative;z-index:2}.portal-card b{font:700 30px "Space Grotesk";display:block}.portal-card span{font-size:10px;color:#8591a0}.portal-card div{display:flex;gap:8px;margin-top:25px}.portal-card i{height:70px;flex:1;border-radius:9px;background:#edf4f9}.portal-card i:first-child{background:linear-gradient(180deg,#1687f8,#8fdcff)}
.project-detail-hero{padding:145px 0 80px;background:radial-gradient(circle at 70% 25%,rgba(56,189,248,.15),transparent 27%),#f8fbff}.back-link{font-size:11px;font-weight:800;color:#687586}.detail-heading{text-align:center;max-width:850px;margin:65px auto 55px}.detail-heading h1{font:700 clamp(58px,8vw,100px)/.94 "Space Grotesk";letter-spacing:-.065em;margin:17px 0}.detail-heading>p{font-size:17px;color:#687586;max-width:620px;margin:auto}.detail-actions{display:flex;justify-content:center;gap:10px;margin-top:30px;flex-wrap:wrap}.case-hero-visual{height:550px;border-radius:35px;overflow:hidden;background:#07101a;box-shadow:0 35px 90px rgba(7,10,16,.17)}.case-water{height:100%;display:grid;place-items:center;position:relative;background:radial-gradient(circle at center,#1687f8 0,#0c294b 25%,#07101a 63%)}.case-phone{width:270px;height:480px;border:9px solid #1e2a37;border-radius:42px;background:#05090f;box-shadow:0 35px 90px rgba(0,0,0,.5);padding:15px;z-index:2}.case-screen{height:420px;border-radius:29px;background:linear-gradient(180deg,#111d2c,#090e16);color:white;text-align:center;padding:30px 20px}.case-screen>span{font-size:8px;letter-spacing:.17em;color:#8795a8}.case-screen>strong{display:block;font:700 85px "Space Grotesk";line-height:1;margin-top:28px}.case-screen>strong small{font-size:24px;color:var(--blue)}.case-water-ring{width:170px;height:170px;border:11px solid #20364f;border-radius:50%;margin:25px auto;position:relative}.case-water-ring:after{content:"";position:absolute;inset:-11px;border-radius:50%;border:11px solid var(--blue);clip-path:polygon(0 0,100% 0,100% 78%,0 78%)}.case-stats{display:flex;justify-content:space-between;font-size:10px;color:#8794a6}.case-status{margin-top:25px;color:#63d3a2;font-size:8px;letter-spacing:.12em}.case-orb{position:absolute;border:1px solid rgba(56,189,248,.2);border-radius:50%}.orb-one{width:600px;height:600px}.orb-two{width:950px;height:350px;transform:rotate(-20deg)}
.case-grid{display:grid;grid-template-columns:1fr .35fr;gap:100px}.case-main h2{font:700 clamp(39px,4.4vw,59px)/1.05 "Space Grotesk";letter-spacing:-.045em;margin:15px 0 25px}.case-main p{color:#697687;max-width:750px;margin:13px 0;font-size:15px}.case-sidebar{border-top:1px solid var(--line)}.meta-block{padding:19px 0;border-bottom:1px solid var(--line)}.meta-block span{display:block;color:#8a95a3;font-size:9px;font-weight:800;letter-spacing:.12em}.meta-block strong{display:block;font-size:12px;margin-top:6px}.case-tech{background:var(--deep);color:#fff}.case-tech-list{display:flex;gap:9px;flex-wrap:wrap;margin-top:22px}.case-tech-list span{border:1px solid rgba(255,255,255,.12);padding:13px 17px;border-radius:999px;font-size:12px;font-weight:700;color:#b7c2cf}.feature-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:15px}.feature-card{border:1px solid var(--line);border-radius:22px;padding:25px;min-height:210px}.feature-card .feature-number{font:700 11px "Space Grotesk";color:var(--blue)}.feature-card h3{font:700 23px "Space Grotesk";margin-top:50px}.feature-card p{font-size:12px;color:#778391;margin-top:7px}.gallery-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:18px}.gallery-tile{min-height:340px;border-radius:28px;overflow:hidden;position:relative}.gallery-large{grid-row:span 2;min-height:700px}.water-shot{background:radial-gradient(circle at 50% 35%,#1687f8,#0a213b 36%,#07101a 70%);display:grid;place-items:center}.gallery-dashboard{width:340px;background:rgba(8,14,23,.85);border:1px solid rgba(255,255,255,.13);border-radius:25px;color:white;padding:28px;text-align:center}.gallery-dashboard span{font-size:8px;color:#8c99aa;letter-spacing:.14em}.gallery-dashboard strong{display:block;font:700 76px "Space Grotesk";line-height:1.1;margin:10px}.gauge{height:9px;background:#24354b;border-radius:9px;overflow:hidden}.gauge:after{content:"";display:block;width:78%;height:100%;background:var(--blue)}.gallery-dashboard small{display:block;color:#7c899a;margin-top:15px}.gallery-light{background:#eef7ff;display:grid;place-items:center}.mobile-list{background:#fff;border:1px solid #dce7f0;border-radius:23px;padding:25px;width:78%;box-shadow:0 20px 50px rgba(16,58,91,.1)}.mobile-list>b{font:700 22px "Space Grotesk";display:block;margin-bottom:18px}.mobile-list span{display:flex;justify-content:space-between;border-top:1px solid #edf0f3;padding:13px 0;font-size:10px;color:#788493}.mobile-list strong{color:#1687f8}.gallery-dark{background:#101720;display:grid;place-items:center}.code-window{font:12px/2 monospace;color:#a8b4c3;width:75%}.code-window span{color:#5c7187}.code-window b{display:block;color:#70cbff;font-weight:500}.next-project{padding:95px 0;background:#eaf6ff}.next-project-inner{display:flex;align-items:center;justify-content:space-between;gap:30px}.next-project h2{font:700 clamp(44px,5vw,70px) "Space Grotesk";letter-spacing:-.05em;margin-top:10px}
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease}.reveal.is-visible{opacity:1;transform:none}.reveal-delay{transition-delay:.12s}
@media(max-width:1050px){.main-nav{gap:18px}.service-grid{grid-template-columns:repeat(2,1fr)}.hero-grid{gap:30px}.project-showcase{grid-template-columns:1fr}.tech-layout{gap:40px}.feature-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:800px){
  .container{width:min(100% - 32px,650px)}
  .site-header{height:72px}.brand img{width:145px}.nav-cta{display:none}.menu-toggle{display:block}
  .main-nav{position:fixed;top:72px;left:16px;right:16px;background:#fff;border:1px solid var(--line);border-radius:20px;padding:20px;display:none;flex-direction:column;align-items:flex-start;box-shadow:var(--shadow)}.main-nav.open{display:flex}.main-nav a{width:100%;padding:11px 0}.main-nav a.active:after{display:none}
  .hero{padding-top:125px;min-height:auto}.hero-grid{grid-template-columns:1fr}.hero h1{font-size:52px}.hero-art{min-height:460px}.hero-card{width:320px}.hero-symbol{font-size:140px}.float-one{left:0}.float-two{right:0}.orbit-a{width:440px;height:440px}
  .stats-grid{grid-template-columns:repeat(2,1fr);gap:25px}.section{padding:85px 0}.section-heading{display:block;margin-bottom:38px}.section-heading p{margin-top:20px}
  .service-grid{grid-template-columns:1fr}.service-card{min-height:310px}.service-card h3{margin-top:50px}
  .tech-layout,.about-grid,.contact-box,.case-grid,.inner-hero-grid{grid-template-columns:1fr}.tech-cloud{padding:15px 0;margin-top:25px}.process-grid{grid-template-columns:1fr 1fr}.process-card{border-bottom:1px solid var(--line)}.about-grid{gap:40px}.about-mark{min-height:330px}.contact-box{padding:32px;gap:50px}.footer-top{grid-template-columns:1fr 1fr}
  .footer-brand{grid-column:span 2}.footer-bottom{display:block}.footer-bottom span{display:block;margin-top:7px}
  .inner-hero{padding:140px 0 75px}.inner-hero-grid{gap:40px}.inner-hero-copy{border-left:0;border-top:1px solid #dbe2e9;padding:20px 0 0}
  .project-grid{grid-template-columns:1fr}.library-card.featured-card{grid-column:auto}.featured-card .library-image,.library-image{height:330px}
  .project-detail-hero{padding-top:120px}.detail-heading{margin:50px auto 40px}.detail-heading h1{font-size:58px}.case-hero-visual{height:450px}.case-phone{width:225px;height:405px}.case-screen{height:355px}.case-water-ring{width:135px;height:135px}.case-sidebar{margin-top:15px}.gallery-grid{grid-template-columns:1fr}.gallery-large{grid-row:auto;min-height:520px}.feature-grid{grid-template-columns:1fr 1fr}.next-project-inner{display:block}.next-project .btn{margin-top:25px}
}
@media(max-width:500px){
  .hero h1{font-size:45px}.hero-text{font-size:16px}.hero-meta{gap:13px;justify-content:space-between}.hero-meta div{padding-left:8px}.hero-art{min-height:390px}.hero-card{width:280px;border-radius:30px}.hero-symbol{font-size:120px}.float-card{padding:9px 10px}.float-card b{font-size:10px}.float-card small{font-size:8px}.float-icon{width:27px;height:27px;font-size:13px}.float-one{top:14%}.float-two{right:-3px;top:40%}.float-three{bottom:7%}.stats-grid{grid-template-columns:1fr 1fr}.stat strong{font-size:31px}.section-heading h2{font-size:39px}.project-image{height:300px}.project-info h3{font-size:23px}.tech-pill{font-size:11px;padding:11px 14px}.process-grid{grid-template-columns:1fr}.process-card{border-right:0}.contact-box{padding:25px}.contact-copy h2{font-size:43px}.footer-top{grid-template-columns:1fr}.footer-brand{grid-column:auto}.feature-grid{grid-template-columns:1fr}.detail-heading h1{font-size:50px}.case-hero-visual{height:390px}.case-phone{width:195px;height:350px}.case-screen{height:305px;padding:23px 12px}.case-screen>strong{font-size:65px}.case-water-ring{width:110px;height:110px;margin:15px auto}.gallery-dashboard{width:82%}.mobile-list{width:85%}
}

/* =========================================
   FLOATING BACK TO TOP BUTTON
========================================= */

/* =========================================
   FLOATING BACK TO TOP BUTTON
========================================= */

.back-to-top {
    position: fixed;
    right: 25px;
    bottom: 25px;

    width: 52px;
    height: 52px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0;
    margin: 0;

    border: 2px solid #000;
    border-radius: 50%;

    background: #1687f8;
    color: #000;

    font-family: Arial, sans-serif;
    font-size: 25px;
    font-weight: 900;
    line-height: 1;

    cursor: pointer;

    /* IMPORTANT */
    z-index: 99999;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transform: translateY(20px);

    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.25);

    transition:
        opacity 0.3s ease,
        visibility 0.3s ease,
        transform 0.3s ease,
        background 0.2s ease;
}


/* SHOW BUTTON */

.back-to-top.show {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}


/* HOVER */

.back-to-top:hover {
    background: #150ba2;
    color: #fff;
    transform: translateY(-4px);
}


/* CLICK */

.back-to-top:active {
    transform: translateY(-1px);
}


/* ARROW */

.back-to-top span {
    display: block;
    font-size: 27px;
    font-weight: 900;
    line-height: 1;
    transform: translateY(-2px);
}


/* MOBILE */

@media (max-width: 768px) {

    .back-to-top {
        right: 18px;
        bottom: 18px;
        width: 48px;
        height: 48px;
        font-size: 22px;
    }

    .back-to-top span {
        font-size: 24px;
    }
}
/* =========================================
   SMOOTH CUSTOM CURSOR
   ========================================= */

.cursor-dot {
    position: fixed;
    width: 7px;
    height: 7px;
    background: #38bdf8;
    border-radius: 50%;
    pointer-events: none;
    z-index: 99999;

    transform: translate(-50%, -50%);

    box-shadow:
        0 0 8px rgba(56, 189, 248, 0.9),
        0 0 20px rgba(56, 189, 248, 0.5);

    transition:
        width 0.2s ease,
        height 0.2s ease,
        background 0.2s ease;
}

.cursor-ring {
    position: fixed;
    width: 34px;
    height: 34px;
    border: 1px solid rgba(56, 189, 248, 0.65);
    border-radius: 50%;
    pointer-events: none;
    z-index: 99998;

    transform: translate(-50%, -50%);

    box-shadow:
        0 0 15px rgba(56, 189, 248, 0.12),
        inset 0 0 10px rgba(56, 189, 248, 0.05);

    transition:
        width 0.3s cubic-bezier(.2,.8,.2,1),
        height 0.3s cubic-bezier(.2,.8,.2,1),
        border-color 0.3s ease,
        background 0.3s ease,
        box-shadow 0.3s ease;
}

/* Hovering clickable elements */

body.cursor-hover .cursor-ring {
    width: 54px;
    height: 54px;

    border-color: rgba(56, 189, 248, 0.9);

    background: rgba(56, 189, 248, 0.07);

    box-shadow:
        0 0 25px rgba(56, 189, 248, 0.25),
        inset 0 0 15px rgba(56, 189, 248, 0.08);
}

body.cursor-hover .cursor-dot {
    width: 10px;
    height: 10px;
    background: #ffffff;

    box-shadow:
        0 0 10px rgba(255, 255, 255, 0.9),
        0 0 25px rgba(56, 189, 248, 0.8);
}


/* Hide on touch devices */

@media (hover: none), (pointer: coarse) {
    .cursor-dot,
    .cursor-ring {
        display: none;
    }
}


/* Optional: hide normal cursor on desktop */

@media (hover: hover) and (pointer: fine) {
    body {
        cursor: none;
    }

    a,
    button,
    input,
    textarea,
    select {
        cursor: none;
    }
}

/* =========================================
   SUCCESS MESSAGE
========================================= */

.success-section {
    padding: 0 0 70px;
    background: #fff;
}

.success-box {
    position: relative;
    display: flex;
    align-items: center;
    gap: 26px;
    padding: 30px 34px;
    border: 1px solid rgba(22, 135, 248, 0.18);
    border-radius: var(--radius);
    background: linear-gradient( 135deg, #f8fbff 0%, #eef8ff 100% );
    overflow: hidden;
    box-shadow: 0 18px 50px rgba(22, 135, 248, 0.08);
}

    /* Blue accent line */

    .success-box::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 4px;
        background: linear-gradient( 180deg, var(--blue), var(--sky) );
    }

    /* Decorative glow */

    .success-box::after {
        content: "";
        position: absolute;
        width: 220px;
        height: 220px;
        right: -80px;
        top: -110px;
        border-radius: 50%;
        background: radial-gradient( circle, rgba(56, 189, 248, 0.16), transparent 70% );
        pointer-events: none;
    }

/* Success icon */

.success-icon {
    flex: 0 0 58px;
    width: 58px;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--blue);
    color: var(--white);
    font-size: 25px;
    font-weight: 800;
    box-shadow: 0 12px 30px rgba(22, 135, 248, 0.25), 0 0 0 7px rgba(22, 135, 248, 0.08);
    position: relative;
    z-index: 2;
}

/* Content */

.success-content {
    flex: 1;
    position: relative;
    z-index: 2;
}

    .success-content .kicker {
        display: inline-flex;
        color: var(--blue);
        margin-bottom: 6px;
    }

    .success-content h2 {
        margin: 0 0 5px;
        font-family: "Space Grotesk", sans-serif;
        font-size: 27px;
        line-height: 1.15;
        letter-spacing: -0.03em;
        color: var(--ink);
    }

        .success-content h2 em {
            font-style: normal;
            color: var(--blue);
        }

    .success-content p {
        margin: 0;
        color: #687585;
        font-size: 13px;
        line-height: 1.7;
    }

/* Action button */

.success-action {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 17px;
    border: 1px solid #d7e4ef;
    border-radius: 999px;
    background: #fff;
    color: var(--ink);
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
    transition: transform .25s ease, background .25s ease, color .25s ease, border-color .25s ease, box-shadow .25s ease;
}

    .success-action:hover {
        transform: translateY(-3px);
        background: var(--blue);
        border-color: var(--blue);
        color: #fff;
        box-shadow: 0 12px 28px rgba(22, 135, 248, 0.22);
    }

    .success-action span {
        margin-left: 2px;
        font-size: 14px;
    }


/* =========================================
   MOBILE
========================================= */

@media (max-width: 768px) {

    .success-section {
        padding: 0 0 55px;
    }

    .success-box {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
        padding: 28px 24px;
    }

    .success-content h2 {
        font-size: 23px;
    }

    .success-action {
        width: 100%;
        justify-content: center;
    }
}

.schedule-section {
    padding: 80px 0;
    background: #ffffff;
}

.schedule-card {
    position: relative;
    min-height: 390px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    overflow: hidden;
    padding: 65px 70px;
    border-radius: 32px;
    background: radial-gradient( circle at 85% 50%, rgba(56, 189, 248, 0.18), transparent 30% ), linear-gradient( 135deg, #07111f 0%, #0b1728 55%, #06101c 100% );
    box-shadow: 0 30px 70px rgba(15, 23, 42, 0.16);
}


/* =========================
   CONTENT
========================= */

.schedule-content {
    position: relative;
    z-index: 3;
    max-width: 570px;
}

.schedule-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 18px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.8px;
    color: #38bdf8;
}

    .schedule-kicker::before {
        content: "";
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: #38bdf8;
        box-shadow: 0 0 15px rgba(56, 189, 248, 0.8);
    }


.schedule-content h2 {
    margin: 0;
    font-size: clamp(38px, 5vw, 64px);
    line-height: 1.02;
    letter-spacing: -2px;
    font-weight: 800;
    color: #ffffff;
}

    .schedule-content h2 em {
        display: block;
        color: #38bdf8;
        font-style: normal;
    }


.schedule-content p {
    max-width: 530px;
    margin: 22px 0 30px;
    color: #94a3b8;
    font-size: 15px;
    line-height: 1.8;
}


/* =========================
   BUTTON
========================= */

.schedule-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 15px 22px;
    border-radius: 13px;
    background: #ffffff;
    color: #07111f;
    text-decoration: none;
    font-size: 14px;
    font-weight: 800;
    transition: transform 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}

    .schedule-btn span {
        font-size: 17px;
        transition: transform 0.25s ease;
    }

    .schedule-btn:hover {
        transform: translateY(-3px);
        background: #38bdf8;
        box-shadow: 0 12px 30px rgba(56, 189, 248, 0.25);
    }

        .schedule-btn:hover span {
            transform: translate(3px, -3px);
        }


/* =========================
   VISUAL
========================= */

.schedule-visual {
    position: relative;
    width: 330px;
    height: 300px;
    flex-shrink: 0;
}


/* GLOW */

.schedule-glow {
    position: absolute;
    width: 230px;
    height: 230px;
    top: 30px;
    left: 45px;
    border-radius: 50%;
    background: rgba(14, 165, 233, 0.15);
    filter: blur(35px);
}


/* CLOCK */

.schedule-clock {
    position: absolute;
    width: 210px;
    height: 210px;
    top: 40px;
    left: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: radial-gradient( circle, #10243a 0%, #091625 65%, #07111f 100% );
    border: 1px solid rgba(125, 211, 252, 0.22);
    box-shadow: 0 0 50px rgba(14, 165, 233, 0.12), inset 0 0 40px rgba(56, 189, 248, 0.04);
}


.clock-ring {
    position: absolute;
    inset: 13px;
    border-radius: 50%;
    border: 1px dashed rgba(56, 189, 248, 0.3);
    animation: scheduleSpin 18s linear infinite;
}


    .clock-ring::after {
        content: "";
        position: absolute;
        width: 8px;
        height: 8px;
        top: -4px;
        left: 50%;
        transform: translateX(-50%);
        border-radius: 50%;
        background: #38bdf8;
        box-shadow: 0 0 15px #38bdf8;
    }


.clock-center {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

    .clock-center span {
        font-size: 9px;
        font-weight: 800;
        letter-spacing: 2px;
        color: #64748b;
    }

    .clock-center strong {
        margin-top: 5px;
        font-size: 25px;
        letter-spacing: -0.5px;
        color: #ffffff;
    }


/* =========================
   FLOATING CARDS
========================= */

.schedule-floating {
    position: absolute;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 14px;
    border: 1px solid rgba(125, 211, 252, 0.16);
    border-radius: 13px;
    background: rgba(15, 32, 50, 0.9);
    backdrop-filter: blur(12px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
}

    .schedule-floating span {
        width: 29px;
        height: 29px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 9px;
        background: rgba(56, 189, 248, 0.12);
        color: #38bdf8;
        font-size: 10px;
        font-weight: 800;
    }

    .schedule-floating div {
        display: flex;
        flex-direction: column;
    }

    .schedule-floating strong {
        color: #ffffff;
        font-size: 11px;
    }

    .schedule-floating small {
        margin-top: 2px;
        color: #64748b;
        font-size: 9px;
    }


.schedule-floating-one {
    top: 35px;
    right: 0;
    animation: scheduleFloatOne 4s ease-in-out infinite;
}


.schedule-floating-two {
    bottom: 28px;
    left: 0;
    animation: scheduleFloatTwo 4.5s ease-in-out infinite;
}
/* =========================================================
   ABOUT SECTION
   ========================================================= */

.about-section {
    position: relative;
    background: #eef7ff;
    overflow: hidden;
}


    /* Subtle background glow */

    .about-section::before {
        content: "";
        position: absolute;
        width: 500px;
        height: 500px;
        top: -250px;
        right: -180px;
        border-radius: 50%;
        background: radial-gradient( circle, rgba(56, 189, 248, .12), transparent 70% );
        pointer-events: none;
    }


/* =========================================================
   ABOUT INTRO
   ========================================================= */

.about-grid {
    position: relative;
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: 100px;
    align-items: center;
}


/* =========================================================
   ABOUT BRAND BLOCK
   ========================================================= */

.about-mark {
    position: relative;
    min-height: 430px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 50px;
    border-radius: 30px;
    background: radial-gradient( circle at 50% 30%, rgba(22, 135, 248, .28), transparent 45% ), #070a10;
    overflow: hidden;
    box-shadow: 0 30px 80px rgba(7, 10, 16, .20);
}


    /* Decorative border */

    .about-mark::before {
        content: "";
        position: absolute;
        inset: 16px;
        border: 1px solid rgba(255,255,255,.08);
        border-radius: 22px;
        pointer-events: none;
    }


    /* Blue glow */

    .about-mark::after {
        content: "";
        position: absolute;
        width: 220px;
        height: 220px;
        border-radius: 50%;
        background: rgba(22, 135, 248, .20);
        filter: blur(70px);
        pointer-events: none;
    }


/* Logo */

.about-logo {
    position: relative;
    z-index: 2;
    width: 230px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
}


    .about-logo img {
        width: 100%;
        max-width: 230px;
        height: auto;
        object-fit: contain;
    }


/* Tagline */

.about-mark > span {
    position: relative;
    z-index: 2;
    margin-top: 28px;
    font-family: "Space Grotesk", sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .22em;
    color: rgba(255,255,255,.65);
    text-align: center;
}


/* =========================================================
   ABOUT COPY
   ========================================================= */

.about-copy {
    max-width: 650px;
}


    .about-copy .kicker {
        display: inline-block;
        margin-bottom: 16px;
    }


    .about-copy h2 {
        margin: 0 0 24px;
        font-family: "Space Grotesk", sans-serif;
        font-size: clamp(38px, 4vw, 58px);
        font-weight: 700;
        line-height: 1.05;
        letter-spacing: -.045em;
        color: var(--deep);
    }


        .about-copy h2 em {
            display: block;
            font-style: normal;
            color: var(--blue);
        }


    .about-copy p {
        max-width: 620px;
        margin: 0 0 18px;
        color: var(--muted);
        font-size: 16px;
        line-height: 1.8;
    }


    .about-copy .btn {
        margin-top: 12px;
    }


/* =========================================================
   TEAM SECTION
   ========================================================= */

.team-section {
    position: relative;
    margin-top: 130px;
    padding-top: 90px;
    border-top: 1px solid rgba(7,10,16,.08);
}


/* =========================================================
   TEAM HEADER
   ========================================================= */

.team-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 60px;
    margin-bottom: 55px;
}


    .team-heading > div {
        max-width: 600px;
    }


    .team-heading .kicker {
        display: inline-block;
        margin-bottom: 15px;
    }


    .team-heading h2 {
        margin: 0;
        font-family: "Space Grotesk", sans-serif;
        font-size: clamp(40px, 5vw, 64px);
        font-weight: 700;
        line-height: 1;
        letter-spacing: -.05em;
        color: var(--deep);
    }


        .team-heading h2 em {
            font-style: normal;
            color: var(--blue);
        }


    .team-heading > p {
        max-width: 390px;
        margin: 0;
        color: var(--muted);
        font-size: 15px;
        line-height: 1.8;
    }


/* =========================================================
   TEAM GRID
   ========================================================= */

.team-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 55px 28px;
}


/* =========================================================
   TEAM CARD
   ========================================================= */

.team-card {
    position: relative;
    min-width: 0;
}


/* =========================================================
   TEAM IMAGE
   ========================================================= */

.team-image {
    position: relative;
    height: 470px;
    overflow: hidden;
    border-radius: 24px;
    background: #dcecf8;
    box-shadow: 0 20px 55px rgba(7,10,16,.10);
}


    .team-image::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient( to top, rgba(7,10,16,.45), transparent 45% );
        pointer-events: none;
        transition: opacity .35s ease;
    }


    .team-image img {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
        object-position: center;
        transition: transform .6s cubic-bezier(.2,.8,.2,1), filter .4s ease;
    }


/* =========================================================
   TEAM NUMBER
   ========================================================= */

.team-number {
    position: absolute;
    z-index: 3;
    top: 20px;
    left: 20px;
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255,255,255,.92);
    backdrop-filter: blur(10px);
    color: var(--deep);
    font-family: "Space Grotesk", sans-serif;
    font-size: 12px;
    font-weight: 800;
    box-shadow: 0 8px 25px rgba(0,0,0,.12);
}


/* =========================================================
   TEAM IMAGE OVERLAY
   ========================================================= */

.team-overlay {
    position: absolute;
    z-index: 3;
    left: 22px;
    bottom: 22px;
    display: inline-flex;
    align-items: center;
    padding: 9px 13px;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 999px;
    background: rgba(7,10,16,.60);
    backdrop-filter: blur(12px);
    color: #fff;
    font-family: "Space Grotesk", sans-serif;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .16em;
}


.team-card:hover .team-image img {
    transform: scale(1.045);
}


.team-card:hover .team-image::after {
    opacity: .8;
}


/* =========================================================
   TEAM INFORMATION
   ========================================================= */

.team-info {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    padding: 24px 4px 0;
}


.team-info-content {
    min-width: 0;
}


/* =========================================================
   TEAM CATEGORY
   ========================================================= */

.team-label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 9px;
    font-family: "Space Grotesk", sans-serif;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .16em;
    color: var(--blue);
}


    .team-label::before {
        content: "";
        width: 6px;
        height: 6px;
        flex: 0 0 6px;
        border-radius: 50%;
        background: var(--blue);
        box-shadow: 0 0 12px rgba(22,135,248,.55);
    }


/* =========================================================
   TEAM MEMBER NAME
   ========================================================= */

.team-info h3 {
    margin: 0 0 11px;
    font-family: "Space Grotesk", sans-serif;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -.02em;
    color: var(--deep);
}


/* =========================================================
   TEAM ROLE — MAIN HIGHLIGHT
   ========================================================= */

.team-role {
    display: inline-block;
    max-width: 100%;
    padding: 10px 14px;
    border: 1px solid rgba(22,135,248,.20);
    border-radius: 11px;
    background: linear-gradient( 135deg, rgba(22,135,248,.11), rgba(56,189,248,.06) );
    color: var(--blue);
    font-family: "Inter", sans-serif;
    font-size: 13px;
    font-weight: 750;
    line-height: 1.5;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
    transition: background .25s ease, border-color .25s ease, transform .25s ease;
}


    .team-role span {
        color: var(--deep);
        font-weight: 800;
    }


.team-card:hover .team-role {
    border-color: rgba(22,135,248,.35);
    background: linear-gradient( 135deg, rgba(22,135,248,.16), rgba(56,189,248,.09) );
    transform: translateY(-2px);
}


/* =========================================================
   TEAM ARROW
   ========================================================= */

.team-arrow {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: rgba(255,255,255,.55);
    color: var(--deep);
    text-decoration: none;
    font-size: 18px;
    transition: background .25s ease, color .25s ease, border-color .25s ease, transform .25s ease;
}


    .team-arrow:hover {
        background: var(--blue);
        border-color: var(--blue);
        color: #fff;
        transform: translate(3px, -3px);
    }


.team-card:hover .team-arrow {
    background: var(--blue);
    border-color: var(--blue);
    color: #fff;
    transform: translate(3px, -3px);
}


/* =========================================================
   RESPONSIVE — TABLET
   ========================================================= */

@media (max-width: 1050px) {

    .about-grid {
        grid-template-columns: 1fr;
        gap: 55px;
    }


    .about-mark {
        min-height: 360px;
    }


    .about-copy {
        max-width: 850px;
    }


    .team-section {
        margin-top: 100px;
        padding-top: 75px;
    }


    .team-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 45px 22px;
    }


    .team-image {
        height: 420px;
    }
}


/* =========================================================
   RESPONSIVE — MOBILE
   ========================================================= */

@media (max-width: 800px) {

    .about-grid {
        gap: 40px;
    }


    .about-mark {
        min-height: 320px;
        padding: 35px;
    }


    .about-logo {
        width: 190px;
    }


    .about-copy h2 {
        font-size: 40px;
    }


    .team-section {
        margin-top: 80px;
        padding-top: 60px;
    }


    .team-heading {
        display: block;
        margin-bottom: 40px;
    }


        .team-heading > p {
            margin-top: 22px;
            max-width: 550px;
        }


    .team-grid {
        grid-template-columns: 1fr;
        gap: 45px;
    }


    .team-image {
        height: 500px;
    }
}


/* =========================================================
   RESPONSIVE — SMALL MOBILE
   ========================================================= */

@media (max-width: 500px) {

    .about-mark {
        min-height: 280px;
        padding: 25px;
    }


        .about-mark::before {
            inset: 10px;
            border-radius: 18px;
        }


    .about-logo {
        width: 170px;
    }


    .about-mark > span {
        font-size: 9px;
        letter-spacing: .15em;
    }


    .about-copy h2 {
        font-size: 34px;
    }


    .about-copy p {
        font-size: 15px;
        line-height: 1.7;
    }


    .team-heading h2 {
        font-size: 42px;
    }


    .team-image {
        height: 420px;
        border-radius: 20px;
    }


    .team-number {
        top: 15px;
        left: 15px;
        width: 42px;
        height: 42px;
    }


    .team-overlay {
        left: 15px;
        bottom: 15px;
    }


    .team-info {
        align-items: flex-start;
        padding-top: 20px;
    }


        .team-info h3 {
            font-size: 21px;
        }


    .team-role {
        font-size: 12px;
        padding: 9px 11px;
    }


    .team-arrow {
        width: 40px;
        height: 40px;
        font-size: 16px;
    }
}

/* =========================
   ANIMATIONS
========================= */

@keyframes scheduleSpin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes scheduleFloatOne {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }
}

@keyframes scheduleFloatTwo {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(8px);
    }
}


/* =========================
   MOBILE
========================= */

@media (max-width: 800px) {

    .schedule-section {
        padding: 55px 0;
    }

    .schedule-card {
        min-height: auto;
        padding: 42px 28px;
        flex-direction: column;
        align-items: flex-start;
    }

    .schedule-content h2 {
        font-size: 42px;
        letter-spacing: -1.5px;
    }

    .schedule-visual {
        width: 100%;
        height: 270px;
        margin-top: 35px;
    }

    .schedule-clock {
        left: 50%;
        transform: translateX(-50%);
    }

    .schedule-floating-one {
        right: 0;
    }

    .schedule-floating-two {
        left: 0;
    }
}


@media (max-width: 500px) {

    .schedule-card {
        padding: 35px 22px;
        border-radius: 25px;
    }

    .schedule-content h2 {
        font-size: 36px;
    }

    .schedule-content p {
        font-size: 14px;
    }

    .schedule-visual {
        transform: scale(0.85);
        transform-origin: center;
    }
}