:root{color-scheme:dark;--bg:#070a1a;--bg-2:#0a1028;--panel:#101733;--border:rgba(179,191,241,.14);--text:#f6f8ff;--muted:#a0a9c5;--cyan:#2ad9f6;--blue:#3977ff;--violet:#8a5cf6;--magenta:#df39db;--max:1200px;--ease:cubic-bezier(.2,.7,.1,1)}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:110px}body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,"Segoe UI",-apple-system,BlinkMacSystemFont,Arial,sans-serif;font-size:16px;-webkit-font-smoothing:antialiased;line-height:1.55;overflow-x:hidden}::selection{color:#fff;background:#424ac8}a{color:inherit;text-decoration:none}button,input,select,textarea{font:inherit}button{cursor:pointer}img{max-width:100%}p,h1,h2,h3{margin:0}section{scroll-margin-top:105px}.skip-link{position:absolute;left:-999px;z-index:101;background:white;color:#080b22;padding:10px}.skip-link:focus{left:20px;top:15px}.site-ambient{position:absolute;left:0;right:0;top:0;height:1100px;pointer-events:none;background:radial-gradient(ellipse 35% 40% at 80% 16%,rgba(85,63,220,.22),transparent 80%),radial-gradient(ellipse 40% 30% at 13% 30%,rgba(14,81,175,.12),transparent 80%);z-index:0}.site-ambient:after{content:"";position:absolute;inset:0;opacity:.11;background-image:radial-gradient(#7d8bd9 0.65px,transparent 0.7px);background-size:22px 22px;mask-image:linear-gradient(to bottom,black,transparent 95%)}.section-container{width:min(calc(100% - 88px),var(--max));margin-inline:auto}.section{padding:112px 0}.section-heading{margin-bottom:40px}.section-kicker{font:600 11px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:2px;color:#9fa6c3;display:inline-block;margin-bottom:27px}.section-kicker:before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--cyan);margin-right:10px;vertical-align:1px;box-shadow:0 0 14px rgba(42,217,246,.65)}.section-heading h2,.about-intro h2,.stack-wrapper h2,.contact-left h2{font-size:clamp(38px,5vw,68px);line-height:1.08;letter-spacing:-.06em;font-weight:650}.muted-heading{color:#919dbe}.gradient-text{background:linear-gradient(95deg,var(--cyan),#6d7bff 58%,var(--magenta));background-clip:text;-webkit-background-clip:text;color:transparent}.heading-row{display:flex;justify-content:space-between;align-items:end;gap:35px}.heading-row>p{max-width:335px;color:var(--muted);font-size:15px;line-height:1.8;padding-bottom:5px}
.header{position:fixed;top:25px;left:0;width:100%;z-index:100;pointer-events:none}.nav-shell{pointer-events:auto;margin:auto;max-width:max-content;display:flex;align-items:center;gap:7px;padding:7px;border-radius:999px;border:1px solid rgba(202,207,253,.18);background:rgba(17,21,53,.8);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);box-shadow:0 10px 50px rgba(0,0,0,.27)}.nav-logo{width:46px;height:42px;display:grid;place-items:center;border-radius:50%;transition:background .2s}.nav-logo:hover{background:rgba(255,255,255,.06)}.nav-logo img{width:33px;height:auto;object-fit:contain}.nav-separator{width:1px;height:22px;background:#384366;margin-inline:2px 10px}.nav-links{display:flex;gap:3px}.nav-links a{font-size:13px;color:#b6bed8;padding:11px 14px;border-radius:99px;transition:color .18s,background .18s}.nav-links a:hover,.nav-links a.active{background:#273155;color:white}.nav-contact{font-size:13px;background:#f6f8ff;color:#090d21;padding:10px 16px;border-radius:99px;font-weight:700;margin-left:7px;transition:transform .2s,background .2s}.nav-contact:hover{transform:translateY(-1px);background:#d8e1ff}.nav-contact span{margin-left:9px;font-size:16px}.menu-button{display:none;border:0;background:#263057;color:white;width:43px;height:42px;border-radius:50%;align-items:center;justify-content:center;flex-direction:column;gap:5px}.menu-button span{display:block;width:17px;height:1.5px;background:white;transition:transform .2s}.menu-button[aria-expanded=true] span:first-child{transform:translateY(3.25px) rotate(45deg)}.menu-button[aria-expanded=true] span:last-child{transform:translateY(-3.25px) rotate(-45deg)}.mobile-menu{pointer-events:auto;position:absolute;top:66px;left:50%;transform:translateX(-50%) translateY(-10px);width:min(360px,calc(100vw - 40px));border:1px solid #384164;border-radius:22px;padding:12px;background:#151b39;box-shadow:0 25px 55px rgba(0,0,0,.5);opacity:0;visibility:hidden;transition:all .2s}.mobile-menu.open{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}.mobile-menu a{display:flex;align-items:center;gap:18px;padding:13px 14px;border-radius:12px;font-size:17px;font-weight:600}.mobile-menu a:hover{background:#27315a}.mobile-menu span{font:12px ui-monospace,monospace;color:#8693be}
.hero{min-height:870px;height:min(940px,100svh);padding-top:190px;padding-bottom:92px;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(400px,.85fr);gap:56px;align-items:center;position:relative;z-index:1}.hero-content{padding-bottom:12px}.eyebrow{font:600 11px ui-monospace,Menlo,monospace;letter-spacing:1.6px;color:#adb9da;display:flex;align-items:center;gap:10px;margin-bottom:28px}.tiny-signal,.pulse-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#52dab9;box-shadow:0 0 0 5px rgba(62,207,161,.12)}.hero h1{font-size:clamp(49px,5.4vw,82px);font-weight:670;line-height:1.08;letter-spacing:-.076em;white-space:nowrap}.hero-line{background:linear-gradient(105deg,#f7faff 5%,#b9c8fa 57%,#72b2ff 100%);background-clip:text;-webkit-background-clip:text;color:transparent}.period{color:#42d9ec}.hero-description{max-width:520px;font-size:18px;color:#abb4d3;margin:26px 0 32px;line-height:1.85}.hero-actions{display:flex;align-items:center;gap:18px;flex-wrap:wrap}.button{display:inline-flex;align-items:center;justify-content:center;gap:23px;border:0;border-radius:100px;padding:14px 23px;line-height:1.5;font-weight:650;font-size:14px;transition:transform .22s var(--ease),box-shadow .22s,color .2s;white-space:nowrap}.button:hover{transform:translateY(-3px)}.button-primary{background:linear-gradient(115deg,#3e74ff,#7155e5);color:white;box-shadow:0 9px 30px rgba(63,94,242,.22)}.button-primary:hover{box-shadow:0 14px 38px rgba(63,94,242,.38)}.button-quiet{padding-inline:6px;background:transparent;color:#e4eafa}.button-quiet:hover{color:var(--cyan)}.hero-tags{display:flex;gap:10px;margin-top:43px;flex-wrap:wrap}.hero-tags span{border:1px solid #323a60;padding:6px 11px;border-radius:99px;color:#8f9cbe;font-size:11px}.hero-scroll{position:absolute;bottom:48px;left:0;display:flex;align-items:center;gap:12px;font:600 10px ui-monospace,monospace;color:#7684ab;letter-spacing:1.8px}.scroll-line{width:22px;height:1px;background:#5366a8}.hero-visual{min-width:0;position:relative;transform:perspective(1300px) rotateY(-6deg) rotateX(2deg)}.visual-frame{border:1px solid rgba(163,182,255,.3);border-radius:19px;background:linear-gradient(145deg,rgba(27,37,85,.96),rgba(9,14,36,.98));overflow:hidden;box-shadow:0 30px 110px rgba(15,27,111,.33),inset 0 1px rgba(255,255,255,.08)}.frame-top{height:54px;display:flex;align-items:center;padding:0 19px;gap:6px;border-bottom:1px solid #303a69}.frame-dot{width:7px;height:7px;background:#404d7b;border-radius:50%}.frame-dot.cyan{background:#39cee8}.frame-label{font:10px ui-monospace,monospace;color:#8694c4;letter-spacing:1px;margin-left:12px;white-space:nowrap}.frame-code{margin-left:auto;font:11px ui-monospace,monospace;color:#7884b6}.visual-main{height:458px;position:relative;overflow:hidden;background:radial-gradient(circle at 81% 18%,rgba(81,53,211,.29),transparent 42%),radial-gradient(circle at 0% 100%,rgba(0,112,239,.19),transparent 44%),linear-gradient(145deg,#131f54,#0b122f 70%)}.visual-main:after{content:"";position:absolute;inset:0;opacity:.26;background-image:linear-gradient(rgba(155,181,252,.1) 1px,transparent 1px),linear-gradient(90deg,rgba(155,181,252,.1) 1px,transparent 1px);background-size:32px 32px;mask-image:linear-gradient(to bottom,transparent 20%,black 90%)}.visual-micro{position:absolute;left:30px;top:30px;font:10px ui-monospace,monospace;letter-spacing:2.1px;color:#8996d2}.visual-mark{position:absolute;right:-18px;top:65px;width:270px;transform:rotate(-12deg);opacity:.55;filter:drop-shadow(0 0 32px rgba(69,104,250,.13))}.visual-mark img{width:100%;display:block}.visual-headline{position:absolute;top:110px;left:30px;font-size:clamp(50px,5vw,75px);font-weight:700;letter-spacing:-.065em;line-height:1.08;z-index:2}.visual-headline em{font-style:normal;background:linear-gradient(90deg,#3cddec,#6a78ff,#c94ae1);background-clip:text;-webkit-background-clip:text;color:transparent}.visual-bottom{position:absolute;left:30px;bottom:24px;right:28px;z-index:2;display:flex;align-items:center;justify-content:space-between;border-top:1px solid rgba(185,197,250,.2);padding-top:20px;color:#9fabca;font-size:11px}.visual-bottom .pulse-dot{margin-right:10px;width:6px;height:6px}.visual-arrows{font-size:19px;color:#637ee8}.frame-footer{height:46px;display:flex;align-items:center;justify-content:space-between;padding:0 19px;background:#101831;font:10px ui-monospace,monospace;color:#7180ac;letter-spacing:1px}.visual-caption{font:10px ui-monospace,monospace;color:#8290bc;display:block;margin:17px 4px;text-align:right;letter-spacing:1.4px}.band{border-top:1px solid #252d4b;border-bottom:1px solid #252d4b;overflow:hidden;background:#0c1129}.band-content{width:max-content;min-width:100%;display:flex;align-items:center;justify-content:space-around;gap:45px;white-space:nowrap;padding:19px 25px;font-size:11px;letter-spacing:3px;font-weight:600;color:#8895bb}.band-content b{color:#5868aa;font-size:13px}
.service-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.service-card{border:1px solid var(--border);border-radius:22px;min-height:315px;padding:27px 25px;background:linear-gradient(155deg,rgba(34,42,85,.58),rgba(15,22,48,.5));display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden;transition:transform .3s var(--ease),border-color .3s,background .3s}.service-card:hover{transform:translateY(-6px);border-color:#5b68a5;background:#1a234c}.service-top{display:flex;align-items:start;justify-content:space-between}.service-index{font:11px ui-monospace,monospace;color:#7283bb}.service-top svg{width:35px;height:35px;fill:none;stroke:#70a9ff;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}.service-card h3{font-size:22px;line-height:1.22;letter-spacing:-.04em;margin-bottom:13px}.service-card p{font-size:13px;line-height:1.8;color:#9faacd;max-width:200px}.card-more{position:absolute;bottom:23px;right:24px;font-size:20px;color:#7b8ac3}
.projects-section{background:linear-gradient(180deg,#0c112b,#0a0d21 85%);border-top:1px solid rgba(143,164,248,.09);border-bottom:1px solid rgba(143,164,248,.09)}.project-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:21px}.project-card{border:1px solid rgba(162,177,239,.19);border-radius:25px;background:#111730;overflow:hidden}.project-visual{height:386px;position:relative;overflow:hidden}.project-visual:after{content:"";position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(#fff .6px,transparent .7px);background-size:24px 24px;opacity:.08}.project-visual-people{background:radial-gradient(ellipse at 55% 72%,rgba(123,52,221,.44),transparent 58%),linear-gradient(155deg,#1c234f,#0c102d)}.project-visual-barber{background:radial-gradient(ellipse at 58% 68%,rgba(30,123,215,.38),transparent 62%),linear-gradient(150deg,#19345b,#0c102d)}.project-art-label{position:absolute;top:21px;left:24px;color:#a5b2d5;font:9px ui-monospace,monospace;letter-spacing:1px;z-index:2}.phone-illustration{position:absolute;width:200px;height:345px;left:calc(50% - 90px);top:58px;background:#070a17;border:6px solid #252b4f;border-radius:31px;box-shadow:0 25px 45px rgba(0,0,0,.4),0 0 0 2px #4b5281;transform:rotate(-9deg)}.phone-notch{position:absolute;width:75px;height:13px;left:calc(50% - 37px);top:0;background:#090b19;border-radius:0 0 12px 12px;z-index:1}.phone-screen{position:absolute;inset:8px;border-radius:20px;background:linear-gradient(160deg,#1c1e50,#0c0e29);padding:32px 14px 12px;overflow:hidden}.tiny-event{font:7px ui-monospace,monospace;letter-spacing:2px;color:#b8aaff}.event-head{font-size:24px;font-weight:750;line-height:1.06;letter-spacing:-1px;margin-top:12px}.event-head span{color:#bd8cff}.event-ticket{margin-top:18px;background:#1d2055;border:1px solid #554d9b;border-radius:11px;padding:12px}.ticket-head{display:flex;justify-content:space-between;font:8px ui-monospace,monospace;color:#d2bbff}.qr-decoration{margin:13px auto;width:83px;height:83px;opacity:.9;background:repeating-conic-gradient(#fafbff 0% 25%,transparent 0% 50%) 50%/15px 15px;border:9px solid white;filter:drop-shadow(0 0 8px rgba(255,255,255,.3))}.ticket-bottom{font:7px ui-monospace,monospace;display:flex;justify-content:space-between;color:#c7c0ef}.ticket-bottom b{font-size:10px}.event-nav{display:flex;justify-content:space-around;margin-top:12px;color:#a8a3de}.floating-chip{position:absolute;z-index:2;border:1px solid #6b6bba;background:rgba(35,37,99,.85);backdrop-filter:blur(8px);padding:9px 13px;border-radius:99px;box-shadow:0 10px 25px #0004;font:9px ui-monospace,monospace;color:#dce1fc;letter-spacing:1px}.chip-a{left:12%;top:36%}.chip-b{right:8%;bottom:25%}.booking-ui{position:absolute;width:min(340px,76%);left:12%;top:66px;transform:rotate(-5deg);background:#f3f7ff;border:1px solid #d7def4;border-radius:20px;padding:22px;box-shadow:0 26px 55px #0007;color:#18213a}.booking-header{display:flex;gap:10px;align-items:center}.booking-circle{width:38px;height:38px;border-radius:13px;display:grid;place-items:center;background:#21356e;color:white;font-weight:800;font-size:13px}.booking-header strong{font-size:13px;display:block}.booking-header small{font-size:10px;color:#8992ae}.booking-menu{margin-left:auto;font-size:22px}.booking-sub{font-size:12px;font-weight:750;margin:24px 0 10px}.booking-days,.booking-hours{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}.booking-days span{text-align:center;border:1px solid #e1e4f1;padding:8px 5px;border-radius:9px;font-size:9px;color:#808ba9}.booking-days em{display:block;font-style:normal;font-size:16px;font-weight:750;color:#1b2542}.booking-days .day-active{color:#3772f0;background:#e4ecff;border-color:#8aaaff}.booking-hours{margin-top:11px}.booking-hours span{text-align:center;padding:8px 2px;border:1px solid #e0e6f3;border-radius:8px;font-size:9px}.booking-hours .hour-active{color:white;border-color:#4774eb;background:#4774eb}.booking-confirm{background:#20366e;border-radius:8px;color:white;margin-top:19px;padding:11px;font-size:11px;font-weight:650;display:flex;justify-content:space-between}.chip-c{right:4%;top:26%;background:#1f4686;border-color:#4a91f4}.project-info{padding:27px 29px 32px}.project-meta{font:10px ui-monospace,monospace;letter-spacing:1px;color:#93a1c5;display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between}.project-stage{color:#83d8ce}.project-info h3{font-size:34px;font-weight:650;letter-spacing:-.055em;margin:11px 0}.project-info p{font-size:14px;color:#aab4d0;line-height:1.75;max-width:460px}.project-tags{display:flex;gap:7px;flex-wrap:wrap;margin:22px 0 24px}.project-tags span,.dialog-stack span{padding:6px 11px;color:#b2bddf;border:1px solid #374266;border-radius:99px;font-size:11px}.text-link{display:inline-flex;align-items:center;gap:14px;background:transparent;border:0;color:#f3f6ff;font-size:13px;font-weight:650;padding:4px 0}.text-link span{font-size:18px;transition:transform .2s}.text-link:hover span{transform:translate(2px,-2px)}.project-footer{margin-top:28px;display:flex;align-items:center;gap:16px;color:#909dbd;font-size:13px}.project-footer .project-dash{width:29px;height:1px;background:#576ca6}.project-footer .text-link{margin-left:auto}
.about-layout{display:grid;grid-template-columns:1fr 1fr;gap:95px}.about-intro h2{margin-bottom:28px}.about-intro>p{color:#a4aecf;line-height:1.85;font-size:15px;max-width:510px;margin:0 0 18px}.about-signature{display:flex;align-items:center;gap:20px;margin-top:45px;flex-wrap:wrap}.about-signature img{display:block;width:140px;height:auto}.about-signature span{border-left:1px solid #535d86;padding-left:20px;color:#8b96b6;font:10px ui-monospace,monospace;letter-spacing:1.5px}.values-stack{display:flex;flex-direction:column;gap:12px;padding-top:50px}.value-card{display:flex;align-items:flex-start;gap:20px;padding:25px 25px;background:#11172f;border:1px solid #2a3356;border-radius:17px}.value-no{font:11px ui-monospace,monospace;color:#677dab;padding-top:3px}.value-card h3{font-size:18px;margin-bottom:7px;letter-spacing:-.035em}.value-card p{font-size:12px;line-height:1.7;color:#a3acc8}.value-arrow{color:#8aa4e8;margin-left:auto}.process-section{background:#0c1128;border-block:1px solid #202b50}.steps{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid #364064;margin-top:58px}.step{padding:27px 20px 10px 4px;border-right:1px solid #313c61}.step:not(:first-child){padding-left:24px}.step:last-child{border:0}.step>span{font:12px ui-monospace,monospace;color:#6e92fa}.step h3{font-size:22px;margin:42px 0 13px;letter-spacing:-.04em}.step p{font-size:13px;color:#a8b1cd;max-width:210px;line-height:1.85}.stack-wrapper{display:grid;grid-template-columns:1.2fr 1fr;gap:65px;align-items:center;background:linear-gradient(115deg,#101937,#14183c);border-radius:27px;border:1px solid #2a365a;padding:57px}.stack-wrapper h2{font-size:clamp(30px,3.4vw,48px)}.stack-wrapper p{font-size:14px;color:#a7b1ce;margin-top:20px;max-width:360px;line-height:1.8}.stack-tags{display:flex;flex-wrap:wrap;gap:9px}.stack-tags span{padding:10px 14px;border-radius:12px;border:1px solid #3d4a77;background:#1c294e;color:#d7def5;font-size:13px}
.contact-section{background:radial-gradient(circle at 20% 75%,rgba(23,88,180,.17),transparent 45%),radial-gradient(circle at 80% 10%,rgba(125,71,220,.16),transparent 42%),#0c1030;border-top:1px solid #29345b}.contact-layout{display:grid;grid-template-columns:1fr 450px;gap:95px;align-items:start}.contact-left h2{margin-bottom:28px}.contact-left>p{color:#aeb7d2;max-width:480px;line-height:1.85;font-size:16px}.social-link{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #3c4976;padding:24px 0 16px;font-size:19px;font-weight:600;margin-top:48px;max-width:430px}.social-link span:last-child{color:#6ec9ff;font-size:25px}.social-link:hover{color:#8abfff}.contact-location{margin-top:45px;color:#889abf;font:10px ui-monospace,monospace;letter-spacing:1.2px;display:flex;gap:13px;align-items:center}.contact-form{background:#111a3a;border:1px solid #364369;border-radius:22px;padding:31px;box-shadow:0 20px 60px #04051e50}.form-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:28px}.form-heading strong{font-size:20px;letter-spacing:-.04em}.form-heading span{font:11px ui-monospace,monospace;color:#8395c4}.contact-form label{display:block;margin:18px 0 8px;font-size:13px;color:#d9e0f7}.contact-form input,.contact-form select,.contact-form textarea{width:100%;border:1px solid #364368;color:white;background:#10152f;border-radius:10px;outline:0;padding:13px 14px;appearance:none;transition:border-color .2s,box-shadow .2s;resize:vertical;font-size:13px}.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus{border-color:#6a80ef;box-shadow:0 0 0 3px #5064d82e}.contact-form input::placeholder,.contact-form textarea::placeholder{color:#7682a3}.form-submit{width:100%;margin-top:22px}.form-note{font-size:10px;line-height:1.7;color:#8491b2;margin-top:14px}.form-feedback{color:#6fe7da;font-size:12px;min-height:20px;margin-top:10px}.footer{padding:65px 0 27px;border-top:1px solid #2c345a;background:#070a19}.footer-top{display:flex;justify-content:space-between;align-items:center;padding-bottom:55px}.footer-top img{width:215px;height:auto}.footer-top p{text-align:right;color:#8996ba;font-size:13px;line-height:1.8}.footer-bottom{border-top:1px solid #2c3354;padding-top:20px;display:flex;align-items:center;justify-content:space-between;gap:15px;font:10px ui-monospace,monospace;color:#7481a4;letter-spacing:.6px}.footer-bottom>div{display:flex;gap:24px}.footer-bottom a:hover{color:#e8f0ff}
.project-dialog{width:min(520px,calc(100% - 28px));border:1px solid #52618c;background:#111a3b;color:#f3f6ff;border-radius:22px;padding:33px 35px 32px;box-shadow:0 30px 85px #0008}.project-dialog::backdrop{background:rgba(3,4,17,.8);backdrop-filter:blur(8px)}.project-dialog h2{font-size:38px;letter-spacing:-.05em;line-height:1.15;margin:0 0 18px}.project-dialog p{font-size:14px;line-height:1.75;color:#b0bad9}.project-dialog h3{font-size:15px;margin:25px 0 12px}.project-dialog ul{margin:0;padding-left:20px;color:#c7d2ec;font-size:13px;line-height:2}.dialog-close{position:absolute;right:19px;top:15px;border:0;background:#293453;color:white;font-size:29px;border-radius:50%;width:38px;height:38px;line-height:1}.dialog-stack{display:flex;gap:7px;flex-wrap:wrap;margin:23px 0}.project-dialog .dialog-notice{font-size:11px;color:#8e9cbf;margin-bottom:18px}.dialog-cta{width:100%}.toast{position:fixed;left:50%;bottom:25px;z-index:120;transform:translate(-50%,100px);opacity:0;pointer-events:none;background:#233a5e;border:1px solid #617abe;border-radius:99px;padding:13px 23px;color:#e7f6ff;font-size:12px;transition:all .3s}.toast.show{transform:translate(-50%,0);opacity:1}.reveal{opacity:0;transform:translateY(23px);transition:opacity .7s var(--ease),transform .7s var(--ease)}.reveal.visible{opacity:1;transform:translateY(0)}.delay-1{transition-delay:.1s}.delay-2{transition-delay:.18s}.delay-3{transition-delay:.26s}
@media(max-width:1150px){.section-container{width:min(calc(100% - 70px),var(--max))}.hero{grid-template-columns:1fr 400px;gap:20px}.hero h1{font-size:clamp(48px,5.1vw,68px)}.hero-description{font-size:16px}.visual-main{height:400px}.visual-mark{width:240px}.visual-headline{font-size:61px}.service-card{padding:22px 20px}.service-card h3{font-size:20px}.about-layout,.contact-layout{gap:50px}.stack-wrapper{padding:40px}}
@media(max-width:950px){.hero{height:auto;min-height:0;padding-top:195px;padding-bottom:135px;grid-template-columns:1fr 1fr;gap:24px}.hero h1{font-size:clamp(44px,5.2vw,60px)}.hero-description{font-size:15px}.visual-main{height:350px}.visual-headline{font-size:47px;top:100px}.visual-mark{width:190px}.frame-label{display:none}.service-grid{grid-template-columns:repeat(2,1fr)}.service-card{min-height:260px}.about-layout{gap:30px}.contact-layout{grid-template-columns:1fr 420px;gap:30px}.contact-left h2{font-size:48px}.stack-wrapper{gap:25px}}
@media(max-width:720px){.section-container{width:calc(100% - 40px)}.section{padding:79px 0}.header{top:14px}.nav-shell{padding:6px;gap:5px}.nav-links{display:none}.nav-contact{margin-left:0;padding:10px 16px}.nav-logo{width:42px;height:40px}.nav-logo img{width:30px}.nav-separator{margin:0 1px 0 0}.menu-button{display:flex;width:40px;height:40px}.hero{padding-top:160px;padding-bottom:105px;display:block}.eyebrow{font-size:9px;letter-spacing:1.05px;margin-bottom:28px}.hero h1{font-size:clamp(42px,9.4vw,68px);white-space:normal;line-height:1.09}.hero-description{font-size:15px;margin:23px 0 24px;max-width:470px}.hero-actions{gap:11px}.button{font-size:13px;padding:13px 18px;gap:15px}.hero-tags{margin-top:27px}.hero-tags span{font-size:10px}.hero-visual{margin:55px auto 0;max-width:500px;transform:none}.visual-main{height:350px}.visual-headline{font-size:61px}.visual-mark{width:230px}.hero-scroll{left:0;bottom:36px;font-size:9px}.band-content{gap:20px;padding:14px;font-size:9px;letter-spacing:2px}.section-kicker{margin-bottom:20px}.section-heading h2,.about-intro h2,.stack-wrapper h2,.contact-left h2{font-size:clamp(40px,8vw,55px)}.heading-row{display:block}.heading-row p{margin-top:21px;max-width:480px;font-size:13px}.service-grid{gap:10px}.service-card{min-height:260px;padding:19px;border-radius:17px}.service-card h3{font-size:19px}.service-card p{font-size:12px}.service-top svg{width:29px;height:29px}.project-grid{grid-template-columns:1fr}.project-visual{height:360px}.project-art-label{font-size:8px}.project-info h3{font-size:31px}.project-info p{font-size:13px}.project-footer{align-items:flex-start}.project-footer p{max-width:150px}.about-layout,.contact-layout{grid-template-columns:1fr;gap:28px}.values-stack{padding-top:15px}.value-card{padding:20px}.about-signature{margin-top:26px}.steps{grid-template-columns:repeat(2,1fr);row-gap:25px}.step{padding:22px 14px 0 0}.step:nth-child(2){border:0;padding-left:20px}.step:nth-child(3){padding-left:0}.step:nth-child(4){border:0;padding-left:20px}.step h3{margin:24px 0 10px;font-size:20px}.step p{font-size:12px}.stack-wrapper{grid-template-columns:1fr;padding:28px;border-radius:19px}.stack-tags{margin-top:6px}.contact-layout{gap:33px}.contact-left h2{font-size:clamp(38px,8vw,55px)}.contact-left>p{font-size:14px}.social-link{margin-top:29px}.contact-location{margin-top:25px}.footer-top{display:block;padding-bottom:35px}.footer-top img{width:180px}.footer-top p{text-align:left;margin-top:25px}.footer-bottom{flex-wrap:wrap;line-height:1.9}.footer-bottom span:last-child{width:100%}}
@media(max-width:390px){.hero h1{font-size:40px}.hero-actions .button-quiet{padding-inline:3px}.visual-main{height:310px}.visual-headline{font-size:48px}.visual-mark{width:190px}.service-card{min-height:270px;padding:15px}.service-card h3{font-size:18px}.service-card p{font-size:11px}.card-more{right:15px}.project-art-label{left:12px}.project-meta{font-size:9px}.project-info{padding:22px}.contact-form{padding:22px}.section-container{width:calc(100% - 30px)}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}.reveal{opacity:1;transform:none}}

.form-instagram{display:flex;align-items:center;justify-content:center;gap:12px;color:#a9c9ff;font-weight:600;font-size:12px;padding:13px 0 3px}.form-instagram:hover{color:#e9f8ff}


/* ============================================
   ASTRION · Motion System 2.1
   Animaciones ligeras, progresivas y accesibles.
   ============================================ */

/* Avance discreto de lectura; no ocupa espacio del contenido. */
.reading-progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:200;pointer-events:none;background:transparent}
.reading-progress span{display:block;width:100%;height:100%;transform:scaleX(0);transform-origin:0 50%;background:linear-gradient(90deg,#15dff2,#477aff 52%,#c443e9);box-shadow:0 0 12px rgba(66,122,255,.45);will-change:transform}
.header.scrolled .nav-shell{background:rgba(10,15,39,.92);border-color:rgba(182,199,255,.27);box-shadow:0 18px 55px rgba(0,0,0,.42),0 0 35px rgba(67,91,210,.07)}
.nav-shell{transition:background .4s ease,border-color .4s ease,box-shadow .4s ease;animation:astrion-nav-arrive .8s cubic-bezier(.2,.7,.1,1) both}
@keyframes astrion-nav-arrive{from{opacity:0;transform:translateY(-18px)}to{opacity:1;transform:translateY(0)}}

/* Ambiente en movimiento, con transparencias controladas. */
.site-ambient{overflow:hidden;isolation:isolate}
.site-ambient:before{content:"";position:absolute;right:-11%;top:7%;width:min(70vw,780px);height:620px;border-radius:50%;background:radial-gradient(ellipse at center,rgba(62,79,199,.22),rgba(102,52,170,.09) 40%,transparent 70%);filter:blur(32px);animation:astrion-aurora 18s ease-in-out infinite alternate;will-change:transform}
.site-ambient:after{animation:astrion-grid-drift 35s linear infinite alternate}
@keyframes astrion-aurora{0%{transform:translate3d(0,0,0) scale(.9)}50%{transform:translate3d(-6%,11%,0) scale(1.1)}100%{transform:translate3d(8%,-4%,0) scale(.95)}}
@keyframes astrion-grid-drift{to{background-position:48px 36px}}
.cursor-aura{display:none}
@media(hover:hover) and (pointer:fine){
  .cursor-aura{display:block;position:fixed;left:0;top:0;width:300px;height:300px;border-radius:50%;pointer-events:none;z-index:3;opacity:0;transform:translate3d(-400px,-400px,0);background:radial-gradient(circle,rgba(75,114,246,.10),rgba(77,60,180,.04) 40%,transparent 72%);transition:opacity .4s ease;will-change:transform;mix-blend-mode:screen}
  body.pointer-active .cursor-aura{opacity:.75}
}

/* Entrada principal y titulares con gradiente que respira. */
.hero-content.visible .eyebrow{animation:astrion-enter-up .65s .1s both}
.hero-content.visible h1{animation:astrion-enter-up .82s .19s both}
.hero-content.visible .hero-description{animation:astrion-enter-up .72s .33s both}
.hero-content.visible .hero-actions{animation:astrion-enter-up .75s .44s both}
.hero-content.visible .hero-tags{animation:astrion-enter-up .75s .54s both}
@keyframes astrion-enter-up{from{opacity:0;transform:translate3d(0,18px,0)}to{opacity:1;transform:translate3d(0,0,0)}}
.hero-line{background-size:210% 100%;animation:astrion-text-shimmer 9s ease-in-out infinite alternate}
@keyframes astrion-text-shimmer{from{background-position:0% 50%}to{background-position:95% 50%}}
.tiny-signal{animation:astrion-signal 2.7s ease-out infinite}
@keyframes astrion-signal{0%,100%{box-shadow:0 0 0 4px rgba(62,207,161,.11)}55%{box-shadow:0 0 0 10px rgba(62,207,161,0)}}
.hero-scroll .scroll-line{animation:astrion-scroll-cue 1.7s ease-in-out infinite}
@keyframes astrion-scroll-cue{0%,100%{transform:scaleY(.65);opacity:.6}55%{transform:scaleY(1.15);opacity:1}}

/* Panel principal: parallax interactivo sutil y símbolo flotante. */
.visual-frame{position:relative;transition:transform .5s cubic-bezier(.2,.7,.1,1),box-shadow .4s ease,border-color .4s ease;transform-style:preserve-3d;will-change:transform}
.visual-frame:before{content:"";position:absolute;z-index:4;inset:0;pointer-events:none;background:radial-gradient(280px circle at var(--spot-x,50%) var(--spot-y,50%),rgba(105,119,246,.11),transparent 70%);opacity:0;transition:opacity .4s}
.visual-frame:hover:before{opacity:1}
.visual-mark{animation:astrion-mark-float 7s ease-in-out infinite;will-change:transform}
@keyframes astrion-mark-float{0%,100%{transform:translate3d(0,0,0) rotate(-12deg)}50%{transform:translate3d(-7px,-15px,0) rotate(-9deg)}}
.frame-dot.cyan{animation:astrion-soft-blink 2.9s ease-in-out infinite}
@keyframes astrion-soft-blink{50%{opacity:.45;box-shadow:0 0 11px #2ad9f6}}
.visual-arrows{animation:astrion-arrows-slide 2.5s ease-in-out infinite}
@keyframes astrion-arrows-slide{0%,100%{transform:translateX(0);opacity:.7}50%{transform:translateX(6px);opacity:1}}

/* Cinta infinita, construida por duplicación del contenido en JS. */
.band{overflow:hidden}
.band-content.motion-ready{min-width:max-content;justify-content:flex-start;animation:astrion-marquee 35s linear infinite;will-change:transform}
.band:hover .band-content.motion-ready{animation-play-state:paused}
@keyframes astrion-marquee{to{transform:translateX(-50%)}}

/* Interacción con profundidad que no compite con el contenido. */
.service-card{isolation:isolate}
.service-card:before{content:"";position:absolute;z-index:-1;inset:0;pointer-events:none;background:radial-gradient(320px circle at var(--spot-x,50%) var(--spot-y,0%),rgba(90,113,231,.19),transparent 72%);opacity:0;transition:opacity .35s ease}
.service-card:after{content:"";position:absolute;top:0;left:20%;width:60%;height:1px;pointer-events:none;background:linear-gradient(90deg,transparent,rgba(115,183,255,.65),transparent);opacity:0;transform:translateX(-40%);transition:opacity .35s ease,transform .5s ease}
.service-card:hover:before,.service-card:hover:after{opacity:1}
.service-card:hover:after{transform:translateX(40%)}
.service-card svg{transition:transform .4s cubic-bezier(.2,.7,.1,1),stroke .3s}
.service-card:hover svg{transform:translateY(-4px) rotate(-4deg);stroke:#6adafb}
.service-card h3,.value-card h3{transition:color .3s ease}
.service-card:hover h3,.value-card:hover h3{color:#fff}
.project-card{transition:border-color .35s ease,box-shadow .4s ease,transform .5s cubic-bezier(.2,.7,.1,1);transform-style:preserve-3d;will-change:transform}
.project-card:hover{border-color:rgba(126,153,255,.5);box-shadow:0 24px 70px rgba(5,10,42,.28)}
.project-visual{isolation:isolate}
.project-visual:before{content:"";position:absolute;inset:-30%;z-index:0;pointer-events:none;opacity:.65;background:radial-gradient(ellipse at 50% 60%,rgba(113,98,225,.15),transparent 58%);animation:astrion-project-glow 12s ease-in-out infinite alternate}
@keyframes astrion-project-glow{to{transform:translate3d(6%,-8%,0) scale(1.12)}}
.phone-illustration,.booking-ui{transition:transform .55s cubic-bezier(.2,.7,.1,1)}
.project-card:hover .phone-illustration,.project-card:hover .booking-ui{transform:translateY(-8px) rotate(-1.3deg)}
.floating-chip{animation:astrion-chip-bob 5s ease-in-out infinite}
.floating-chip:nth-of-type(even){animation-delay:-2.4s}
@keyframes astrion-chip-bob{50%{translate:0 -8px}}
.value-card{transition:background .35s ease,border-color .35s ease,transform .35s cubic-bezier(.2,.7,.1,1)}
.value-card:hover{background:#172044;border-color:#465b94;transform:translateX(7px)}
.value-arrow{transition:transform .3s ease,color .3s ease}
.value-card:hover .value-arrow{transform:translate(3px,-3px);color:#54d7ff}
.step{transition:background .3s ease}
.step:hover{background:linear-gradient(180deg,rgba(74,103,226,.1),transparent 90%)}
.stack-tags span{transition:transform .25s ease,background .25s ease,border-color .25s ease}
.stack-tags span:hover{transform:translateY(-4px);background:#2a376b;border-color:#6d86e0}

/* Botones / enlaces: barrido luminoso pequeño, estados de foco legibles. */
.button-primary{position:relative;overflow:hidden;isolation:isolate}
.button-primary:before{content:"";position:absolute;z-index:-1;top:-50%;left:-90%;width:55%;height:200%;transform:skewX(-25deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.14),transparent);transition:left .65s ease;pointer-events:none}
.button-primary:hover:before{left:135%}
.text-link span,.social-link span:last-child{display:inline-block;transition:transform .25s ease}
.text-link:hover span,.social-link:hover span:last-child{transform:translate(3px,-3px)}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid #68dffc;outline-offset:4px}

/* Cuadro modal animado; permanece accesible por teclado. */
.project-dialog[open]{animation:astrion-dialog-enter .34s cubic-bezier(.2,.7,.1,1) both}
.project-dialog[open]::backdrop{animation:astrion-backdrop-enter .3s ease both}
@keyframes astrion-dialog-enter{from{opacity:0;transform:translateY(16px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes astrion-backdrop-enter{from{opacity:0}to{opacity:1}}

/* Aparece con una trayectoria un poco más marcada y limpia. */
.reveal{transform:translate3d(0,35px,0);filter:blur(3px);transition:opacity .8s cubic-bezier(.2,.7,.1,1),transform .8s cubic-bezier(.2,.7,.1,1),filter .8s ease}
.reveal.visible{transform:translate3d(0,0,0);filter:blur(0)}

@media(min-width:721px) and (hover:hover) and (pointer:fine){
  .visual-frame:hover{transform:perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-5px);box-shadow:0 35px 105px rgba(28,47,130,.38)}
  .service-card.reveal.visible:hover{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-7px)}
  .project-card.reveal.visible:hover{transform:perspective(1200px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-6px)}
}
@media(max-width:720px){
  .site-ambient:before{filter:blur(18px);animation-duration:22s}
  .band-content.motion-ready{animation-duration:28s}
  .visual-mark{animation-duration:8s}
  .floating-chip{animation-duration:7s}
  .project-card:hover{transform:none}
  .service-card:hover{transform:none}
  .cursor-aura{display:none!important}
  .reveal{filter:none;transform:translate3d(0,18px,0)}
  .reveal.visible{transform:translate3d(0,0,0)}
}
@media(prefers-reduced-motion:reduce){
  .site-ambient:before,.site-ambient:after,.visual-mark,.band-content.motion-ready,.floating-chip,.tiny-signal,.hero-line,.frame-dot.cyan,.hero-scroll .scroll-line,.project-visual:before,.visual-arrows,.nav-shell,.hero-content.visible .eyebrow,.hero-content.visible h1,.hero-content.visible .hero-description,.hero-content.visible .hero-actions,.hero-content.visible .hero-tags{animation:none!important}
  .cursor-aura{display:none!important}
  .reveal,.reveal.visible{opacity:1;transform:none!important;filter:none!important}
  .visual-frame,.service-card,.project-card,.service-card.reveal.visible:hover,.project-card.reveal.visible:hover{transform:none!important}
}


/* ASTRION 2.2 · contactos reales: enlaces accesibles, sin elementos externos */
.contact-methods{max-width:430px;margin-top:32px;display:grid;gap:10px}
.contact-method{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:17px 19px;border:1px solid rgba(142,167,238,.28);border-radius:16px;background:linear-gradient(105deg,rgba(33,48,103,.6),rgba(13,19,49,.65));transition:border-color .2s,background .2s,transform .25s}
.contact-method:hover{border-color:rgba(86,207,248,.65);background:rgba(28,43,95,.78);transform:translateY(-2px)}
.contact-method-detail{display:flex;flex-direction:column;gap:3px;min-width:0}
.contact-method-label{font:600 10px ui-monospace,Menlo,monospace;letter-spacing:1.2px;color:#90a7d6}
.contact-method strong{font-size:18px;color:#f6f8ff;letter-spacing:.01em}
.contact-method-arrow{color:#80dbff;font-size:25px;line-height:1}
.contact-methods + .social-link{margin-top:20px}
.footer-bottom>div{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
@media(max-width:720px){.contact-methods{max-width:none}.contact-method{padding:16px}.contact-method strong{font-size:17px}.footer-bottom>div{column-gap:18px;row-gap:7px}}
@media(prefers-reduced-motion:reduce){.contact-method{transition:none}.contact-method:hover{transform:none}}


/* ASTRION 2.3 / fichas de proyectos estilo caso de estudio */
.project-dialog{width:min(760px,calc(100% - 28px));max-height:min(88dvh,850px);overflow-y:auto;padding:0;border-radius:24px;overscroll-behavior:contain}
.case-heading{padding:35px 40px 30px;border-bottom:1px solid rgba(150,170,237,.18);background:radial-gradient(ellipse at 90% 0%,rgba(103,89,249,.25),transparent 60%)}
.project-dialog .case-heading h2{font-size:clamp(33px,5vw,50px);margin:7px 0 13px}
.case-heading p{max-width:580px;margin:0 0 17px}
.case-status{display:inline-flex;border:1px solid rgba(119,226,211,.36);border-radius:100px;padding:7px 11px;background:rgba(55,169,146,.1);font-size:11px;color:#96dfd4;font-weight:650}
.case-body{padding:30px 40px 36px}
.case-intro{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.case-intro section{background:rgba(38,54,99,.38);border:1px solid rgba(145,164,226,.17);border-radius:16px;padding:20px}
.project-dialog .case-intro h3{font-size:12px;text-transform:uppercase;letter-spacing:.13em;color:#8faffb;margin:0 0 12px}
.project-dialog .case-intro p{font-size:13px;line-height:1.8;margin:0}
.project-dialog .case-flow h3,.project-dialog .case-features h3{font-size:15px;margin:28px 0 13px}
.case-flow ol{counter-reset:case-step;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:11px;padding:0;margin:0;list-style:none}
.case-flow li{border:1px solid rgba(145,164,226,.17);border-radius:14px;padding:38px 15px 16px;min-height:140px;position:relative;font-size:12px;line-height:1.6;color:#c9d1e8}
.case-flow li::before{counter-increment:case-step;content:'0' counter(case-step);position:absolute;top:12px;left:15px;color:#63d5fa;font:700 11px ui-monospace,monospace}
.case-features ul{display:grid;grid-template-columns:1fr 1fr;gap:8px 20px;padding-left:18px}
.case-features li{line-height:1.55;padding-right:6px}
.case-stack-label{font-size:10px;letter-spacing:.17em;color:#93a1c5;margin-top:27px}
.case-actions{display:flex;gap:12px;margin-top:21px}
.case-actions>.button{flex:1;justify-content:center;text-align:center}
.case-actions .button-quiet{border:1px solid rgba(145,164,226,.28);border-radius:100px;padding:13px 22px}
.project-dialog .dialog-close{z-index:2;position:sticky;float:right;top:12px;margin:12px 12px -50px 0}
.project-dialog .dialog-notice{margin:15px 0;color:#9ba8ca}
@media(max-width:600px){
 .project-dialog{width:calc(100% - 18px);max-height:88dvh;border-radius:18px}
 .case-heading{padding:31px 20px 22px}
 .case-body{padding:20px 20px 25px}
 .case-intro,.case-flow ol{grid-template-columns:1fr}
 .case-flow li{min-height:0;padding:17px 15px 17px 54px}
 .case-flow li::before{top:18px}
 .case-features ul{grid-template-columns:1fr}
 .case-actions{flex-direction:column}
}


/* ASTRION · Presentación final: información concreta, gráfica sin pantallas simuladas */
.band-content b{font-size:8px;line-height:1;color:#56b7f4;font-weight:400}
.service-top{justify-content:flex-end}
.service-top svg{width:38px;height:38px}
.project-visual{display:flex;align-items:stretch;justify-content:stretch}
.portfolio-art{height:100%;width:100%;display:grid;place-items:center;position:relative;isolation:isolate;overflow:hidden}
.portfolio-art::before{content:"";position:absolute;width:340px;height:340px;border:1px solid rgba(155,188,255,.25);border-radius:50%;transform:translate(90px,-35px);z-index:-1}
.portfolio-art::after{content:"";position:absolute;width:500px;height:2px;background:linear-gradient(90deg,transparent,rgba(34,212,239,.7),rgba(142,77,255,.7),transparent);transform:rotate(-26deg);z-index:-1}
.portfolio-symbol{width:152px;height:152px;display:grid;place-items:center;border:1px solid rgba(178,192,251,.26);border-radius:33px;background:linear-gradient(145deg,rgba(27,61,123,.84),rgba(43,35,94,.78));box-shadow:0 25px 70px rgba(4,8,28,.5),inset 0 1px rgba(255,255,255,.14);transform:rotate(-8deg);transition:transform .4s var(--ease)}
.portfolio-symbol svg{width:83px;height:83px;color:#88d8ff;transform:rotate(8deg)}
.project-card:hover .portfolio-symbol{transform:rotate(0deg) translateY(-5px)}
.project-visual-barber .portfolio-symbol{background:linear-gradient(145deg,rgba(27,85,128,.83),rgba(30,40,94,.9))}
.project-visual-barber .portfolio-symbol svg{color:#86d9ec}
.portfolio-art-caption{position:absolute;bottom:28px;left:28px;font:600 10px Inter,"Segoe UI",sans-serif;letter-spacing:1.5px;color:#c1cff3}
.visual-main-clean{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px}
.visual-main-clean .visual-mark{position:relative;top:auto;right:auto;width:min(55%,255px);opacity:1;transform:none;filter:none;z-index:2}
.visual-wordmark{display:block;width:min(65%,290px);height:auto;z-index:2;filter:drop-shadow(0 8px 24px rgba(2,6,24,.2))}
.visual-main-clean:after{opacity:.14}
.about-layout{grid-template-columns:minmax(0,1fr);gap:0;max-width:850px}
.about-intro>p{max-width:720px}
.about-signature{margin-top:32px}
.step h3{margin-top:16px}
@media(max-width:720px){.portfolio-symbol{width:130px;height:130px}.portfolio-symbol svg{width:74px;height:74px}.portfolio-art-caption{left:20px;font-size:9px;bottom:23px}.visual-main-clean .visual-mark{width:min(52%,220px)}.visual-wordmark{width:min(65%,270px)}.step h3{margin-top:12px}}

/* ==========================================================
   ASTRION v2.5 | Interfaces visuales del portafolio
   Imágenes vectoriales locales + efectos discretos, sin librerías.
   ========================================================== */
.project-visual { isolation:isolate; }
.showcase-viewport { position:absolute;inset:0;overflow:hidden;background:#0c1128; }
.showcase-image { display:block;width:100%;height:100%;object-fit:cover;object-position:center;transform:scale(1.025);transition:transform .85s cubic-bezier(.2,.7,.1,1),filter .5s ease;filter:saturate(.94); }
.project-card:hover .showcase-image { transform:scale(1.075) translateY(-3px);filter:saturate(1.08); }
.project-visual:after { background:linear-gradient(180deg,rgba(5,9,26,.14),transparent 31%,transparent 76%,rgba(5,8,25,.3));opacity:1;z-index:1; }
.project-visual-barber:after { background:linear-gradient(180deg,rgba(5,9,26,.04),transparent 45%,rgba(5,8,25,.3)); }
.showcase-corner { position:absolute;bottom:19px;left:20px;z-index:3;display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border:1px solid rgba(189,211,255,.23);border-radius:999px;background:rgba(8,14,31,.79);color:#e7edff;font:600 9px/1.2 Inter,"Segoe UI",sans-serif;letter-spacing:1px;backdrop-filter:blur(14px);box-shadow:0 5px 22px #0005; }
.showcase-indicator { width:5px;height:5px;border-radius:50%;background:#56dfcc;box-shadow:0 0 0 4px #5bdec929; }
.project-visual-barber .showcase-indicator {background:#e3b282;box-shadow:0 0 0 4px #dfb38625}
.showcase-light { position:absolute;inset:-70% auto -70% -60%;width:28%;z-index:2;pointer-events:none;transform:rotate(18deg) translateX(0);background:linear-gradient(90deg,transparent,rgba(255,255,255,.09),transparent);animation:showcase-shimmer 11s linear infinite; }
.project-visual-barber .showcase-light{animation-delay:-5s}
@keyframes showcase-shimmer {0%,66%{transform:rotate(18deg) translateX(-350%)}86%,100%{transform:rotate(18deg) translateX(1100%)}}
@media(hover:hover) and (pointer:fine){
  .project-card:hover .showcase-corner{border-color:rgba(174,193,255,.48)}
}
.case-showcase {overflow:hidden;border:1px solid rgba(159,180,244,.24);border-radius:17px;background:#151630;margin:10px 0 7px;aspect-ratio:1200/740;}
.case-showcase-image {display:block;width:100%;height:100%;object-fit:cover;}
.project-dialog { width:min(760px,calc(100% - 24px)); max-height:min(90dvh,900px);overflow-y:auto;overscroll-behavior:contain; }
.project-dialog .case-heading {padding-right:28px;}
@media(max-width:720px) {
  .project-visual {height:clamp(235px,61vw,365px)}
  .showcase-corner {left:13px;bottom:13px;font-size:8px;padding:7px 10px}
  .project-dialog { width:calc(100% - 18px);max-height:92dvh;padding:20px 18px; }
  .case-showcase {border-radius:11px;margin:8px 0}
}
@media(prefers-reduced-motion:reduce) {
  .showcase-light{display:none}
  .showcase-image,.project-card:hover .showcase-image{transform:none;transition:none}
}