/* ---- phase18-premium.css ---- */
/* Phase 18 — premium Navy/Gold visual treatment, scoped to existing /web-design/ content.
   Keeps all 26 portfolio cards, original media and links, FAQ behavior, schema, SEO, GTM/GA4 and V80 navbar/footer. */
main[role="main"]{--tyz18-navy:#081b32;--tyz18-navy-2:#102d4a;--tyz18-navy-3:#183b59;--tyz18-gold:#edc58c;--tyz18-cream:#f5dbb2;color:#e8f1fb;background:#091d34;font-family:Cairo,"Noto Kufi Arabic",Tahoma,sans-serif}
main[role="main"] .container{max-width:1220px}
main[role="main"] .hero{position:relative;isolation:isolate;min-height:680px;padding:145px 24px 112px;background:radial-gradient(ellipse 43% 62% at 82% 12%,rgba(229,179,115,.15),transparent 78%),radial-gradient(ellipse 48% 56% at 14% 89%,rgba(61,107,157,.16),transparent 80%),linear-gradient(122deg,#112f4e,#07182e);border-bottom:1px solid rgba(226,181,127,.21)}
main[role="main"] .hero::before{width:min(700px,95vw);height:min(700px,95vw);background:radial-gradient(ellipse,rgba(225,181,114,.1),transparent 67%);animation:none}
main[role="main"] .hero-content{max-width:930px}
main[role="main"] .hero-badge{padding:10px 19px;border-radius:99px;border:1px solid rgba(237,195,136,.46);background:rgba(227,179,116,.08);color:#f4d19f;font-size:13px;box-shadow:0 9px 22px rgba(1,9,25,.1)}
main[role="main"] .hero h1{max-width:900px;margin:19px auto 23px!important;color:#f4d4a6;font-size:clamp(35px,4.4vw,58px)!important;line-height:1.66!important;font-weight:900!important;background:linear-gradient(110deg,#f8e4c4,#efc994 55%,#f2d8ac);-webkit-background-clip:text;background-clip:text}
main[role="main"] .hero p{max-width:790px;color:#d9e8f5;font-size:clamp(15px,1.35vw,18px);line-height:2.08;margin-bottom:30px}
main[role="main"] .hero-cta,main[role="main"] .cta-btn-primary{min-height:52px;display:inline-flex;align-items:center;gap:11px;border-radius:13px;padding:13px 27px;color:#142940!important;background:linear-gradient(122deg,#f4d6a6,#d8a66d);font-weight:800;box-shadow:0 16px 28px rgba(0,10,28,.16);transition:transform .18s,box-shadow .18s}
main[role="main"] .hero-cta:hover,main[role="main"] .cta-btn-primary:hover{background:linear-gradient(122deg,#f6ddb2,#e6b67a);transform:translateY(-2px);box-shadow:0 21px 35px rgba(0,8,21,.2)}
main[role="main"] .hero-stats{gap:13px;margin-top:43px}
main[role="main"] .stat-item{min-width:154px;min-height:107px;display:flex;flex-direction:column;justify-content:center;padding:15px 20px;background:rgba(21,49,75,.78);border:1px solid rgba(228,185,127,.29);border-radius:16px}
main[role="main"] .stat-number{font-weight:900;font-size:28px;color:#f1ca92}
main[role="main"] .stat-label{color:#d1e0ee;font-size:12px;margin-top:6px}
main[role="main"] .section{padding:86px 20px 96px}
main[role="main"] .section-alt{background:#102940}
main[role="main"] #intro{background:radial-gradient(ellipse 45% 50% at 8% 30%,rgba(62,113,166,.12),transparent 79%),#0d2741}
main[role="main"] #services{background:#091f37}
main[role="main"] #stats-banner{background:#0d253e}
main[role="main"] #portfolio{background:radial-gradient(ellipse 50% 24% at 90% 3%,rgba(54,102,156,.12),transparent 80%),#081d35;scroll-margin-top:95px}
main[role="main"] #partners{background:#102940}
main[role="main"] #faq{background:#0c233d}
main[role="main"] #cta{background:#081b32}
main[role="main"] .section-header{margin-bottom:38px}
main[role="main"] .section-header h2{font-size:clamp(27px,3vw,41px)!important;color:#f3d5a8!important;font-weight:900!important;line-height:1.75!important}
main[role="main"] .section-header p{max-width:790px;color:#d2e0ed;font-size:15px;line-height:2}
main[role="main"] .section-divider{width:77px;height:3px;border-radius:9px;background:linear-gradient(90deg,#f2d4a0,#d8a66b)}
main[role="main"] .intro-grid{gap:50px}
main[role="main"] .intro-text h2{color:#f5d6a6;font-size:clamp(25px,2.75vw,35px)!important;line-height:1.8!important}
main[role="main"] .intro-text p{color:#dbe7f3;line-height:2.05}
main[role="main"] .intro-features{gap:13px}
main[role="main"] .intro-features li{padding:10px 13px;border:1px solid rgba(232,191,136,.15);border-radius:10px;background:rgba(241,208,160,.035);color:#ebf2fb;font-size:14px}
main[role="main"] .intro-features li i{color:#edc790}
main[role="main"] .intro-icon-box{border-radius:34px;width:min(390px,100%);height:350px;background:radial-gradient(circle at 44% 35%,rgba(224,177,119,.15),transparent 70%),linear-gradient(135deg,#1b405f,#0d2b49);border:1px solid rgba(237,191,129,.36);box-shadow:0 22px 48px rgba(0,11,28,.19)}
main[role="main"] .features-grid{gap:19px}
main[role="main"] .feature-card,main[role="main"] .benefit-card{border-radius:19px;border:1px solid rgba(231,189,130,.28);background:linear-gradient(137deg,#1a3a57,#112b47);box-shadow:0 15px 35px rgba(0,8,22,.13);transition:transform .18s,border-color .18s}
main[role="main"] .feature-card{padding:28px;min-height:245px}
main[role="main"] .feature-card:hover,main[role="main"] .benefit-card:hover{border-color:rgba(242,202,143,.59);background:linear-gradient(137deg,#234865,#173653);transform:translateY(-3px)}
main[role="main"] .feature-icon,main[role="main"] .benefit-icon{border-radius:13px;background:linear-gradient(138deg,rgba(231,184,121,.16),rgba(231,184,121,.055));border:1px solid rgba(228,183,122,.17)}
main[role="main"] .feature-icon i,main[role="main"] .benefit-icon i{color:#efc990}
main[role="main"] .feature-card h3,main[role="main"] .benefit-card h3{color:#f5d4a2!important;line-height:1.75!important}
main[role="main"] .feature-card p,main[role="main"] .benefit-card p{color:#d2e2f1;line-height:1.92}
main[role="main"] .benefits-grid{gap:18px}
main[role="main"] .benefit-card{padding:22px;min-height:166px}
main[role="main"] .portfolio-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:19px}
main[role="main"] .portfolio-card{position:relative;overflow:hidden;text-align:center;border-radius:19px;border:1px solid rgba(229,187,130,.3);background:linear-gradient(142deg,#1d3c59,#102b48);box-shadow:0 17px 38px rgba(0,8,23,.15);transition:transform .18s,border-color .18s}
main[role="main"] .portfolio-card:hover{transform:translateY(-4px);border-color:rgba(247,209,145,.7);background:linear-gradient(142deg,#1d3c59,#102b48)}
main[role="main"] .portfolio-card a{display:flex;flex-direction:column;min-height:100%}
main[role="main"] .portfolio-card img{display:block;object-fit:cover;width:100%;height:200px;min-height:200px;background:#102f4c;border-bottom:1px solid rgba(233,190,136,.23);transition:transform .24s}
main[role="main"] .portfolio-card .portfolio-info{padding:18px 13px;flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center}
main[role="main"] .portfolio-card h3{color:#f2d4a6!important;font-size:15px!important;font-weight:800!important;line-height:1.7!important;overflow-wrap:anywhere}
main[role="main"] .portfolio-card i{color:#eec990;font-size:20px;margin-bottom:7px}
main[role="main"] .partners-grid{gap:12px}
main[role="main"] .partner-item{border:1px solid rgba(233,189,130,.28);border-radius:15px;background:linear-gradient(135deg,#1a3a58,#112d49);min-width:145px;min-height:100px;display:grid;place-items:center;overflow:hidden}
main[role="main"] .partner-item:hover{background:#234461;border-color:rgba(245,203,143,.65)}
main[role="main"] .partner-item img{max-width:100%;max-height:80px;width:auto;height:auto;object-fit:contain}
main[role="main"] #faq .faq-item{border-color:rgba(234,189,132,.29);border-radius:15px;background:linear-gradient(130deg,#173550,#112b47);margin-bottom:12px;overflow:hidden}
main[role="main"] #faq .faq-question{color:#eef4fc!important;font-weight:700!important}
main[role="main"] #faq .faq-answer{color:#d2e2f0!important;line-height:2}
main[role="main"] #faq .faq-question i{color:#efca95}
main[role="main"] .cta-section{max-width:1000px;padding:54px 30px;border-radius:24px;border:1px solid rgba(233,192,134,.43);background:radial-gradient(ellipse 47% 60% at 82% 4%,rgba(234,188,127,.09),transparent 78%),linear-gradient(135deg,#22425e,#112c4a);box-shadow:0 23px 55px rgba(0,8,22,.13)}
main[role="main"] .cta-section h2{color:#f4d3a0!important;font-size:clamp(27px,2.8vw,38px)!important;line-height:1.8!important}
main[role="main"] .cta-section p{color:#dce8f3;line-height:2}
main[role="main"] .cta-btn-primary,main[role="main"] .cta-btn-secondary{border-radius:12px;min-height:50px;padding:12px 25px}
main[role="main"] .cta-btn-secondary{color:#f4d3a3!important;border:1px solid rgba(240,194,132,.5);background:rgba(230,178,111,.07)}
main[role="main"] .breadcrumb-nav ol li.active{color:#eec997}
main[role="main"] :is(a,button,summary):focus-visible{outline:2px solid #f3d4a1;outline-offset:4px}
@media(max-width:1130px){main[role="main"] .portfolio-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:900px){main[role="main"] .hero{min-height:570px;padding-top:125px}main[role="main"] .intro-grid{gap:30px}main[role="main"] .portfolio-grid{grid-template-columns:repeat(2,minmax(0,1fr))}main[role="main"] .features-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:650px){main[role="main"] .hero{padding:115px 15px 71px;min-height:510px}main[role="main"] .hero h1{font-size:clamp(31px,8vw,41px)!important;line-height:1.7!important}main[role="main"] .hero p{font-size:14px}main[role="main"] .hero-stats{gap:8px;margin-top:27px}main[role="main"] .stat-item{min-width:calc(50% - 8px);min-height:100px;padding:9px}main[role="main"] .section{padding:57px 16px 69px}main[role="main"] .section-header{margin-bottom:27px}main[role="main"] .intro-grid{grid-template-columns:1fr}main[role="main"] .features-grid,main[role="main"] .benefits-grid{grid-template-columns:1fr}main[role="main"] .feature-card{min-height:0}main[role="main"] .intro-icon-box{width:min(310px,100%);height:275px}main[role="main"] .portfolio-grid{gap:12px}main[role="main"] .portfolio-card img{height:140px;min-height:140px}main[role="main"] .portfolio-card .portfolio-info{padding:12px 8px}main[role="main"] .portfolio-card h3{font-size:12px!important}main[role="main"] .portfolio-card i{font-size:16px;margin-bottom:4px}main[role="main"] .partners-grid{gap:10px}main[role="main"] .partner-item{padding:12px;min-width:120px;min-height:84px}main[role="main"] .cta-section{padding:30px 16px}}
@media(max-width:370px){main[role="main"] .portfolio-grid{grid-template-columns:1fr}main[role="main"] .portfolio-card img{height:195px;min-height:195px}}
@media(prefers-reduced-motion:reduce){main[role="main"] .hero::before{animation:none!important}main[role="main"] .portfolio-card,main[role="main"] .feature-card,main[role="main"] .benefit-card{transition:none!important}}
/* The legacy FAQ uses native details/summary, not .faq-question/.faq-answer. */
main[role="main"] #faq details.faq-item{border:1px solid rgba(233,189,128,.3);border-radius:15px;background:linear-gradient(138deg,#1a3a58,#102b47);overflow:hidden;margin-bottom:12px}
main[role="main"] #faq details.faq-item[open]{border-color:rgba(243,203,143,.55);background:linear-gradient(138deg,#22415e,#143450)}
main[role="main"] #faq details.faq-item summary{color:#f3d4a6;font-weight:700;cursor:pointer}
main[role="main"] #faq details.faq-item>div,main[role="main"] #faq details.faq-item p{color:#dbe7f4;line-height:2.05}
main[role="main"] #faq details.faq-item summary:focus-visible{outline:2px solid #f2c990;outline-offset:-3px}


/* ---- phase19-seo-experience.css ---- */
/* Tamiyouz Alrowad /web-design/ — SEO + experience refinement 2026-11-11. Scoped to landing page. */
main[role="main"] { --tyz19-gold:#f0c98e; --tyz19-gold2:#d6a969; --tyz19-ink:#07192e; --tyz19-panel:#122f49; --tyz19-text:#d7e4f0; }
main[role="main"] .tyz19-section{position:relative;isolation:isolate;padding:92px 20px 100px;background:#081e34;color:#edf4fb;overflow:hidden;scroll-margin-top:95px}
main[role="main"] .tyz19-section *{box-sizing:border-box}
main[role="main"] .tyz19-section .container{max-width:1220px;margin:0 auto}
main[role="main"] .tyz19-section h2,main[role="main"] .tyz19-section h3{margin:0;color:#f7d9ac;font-family:inherit;letter-spacing:0}
main[role="main"] .tyz19-section h2{font-size:clamp(27px,3.2vw,43px);font-weight:900;line-height:1.62}
main[role="main"] .tyz19-section h2 em{font-style:normal;background:linear-gradient(105deg,#fff0d5,#e7b978);color:transparent;background-clip:text;-webkit-background-clip:text}
main[role="main"] .tyz19-section p{color:var(--tyz19-text);line-height:2.02;font-size:15px}
main[role="main"] .tyz19-eyebrow{display:inline-flex;align-items:center;gap:9px;color:#f3cc91;font-size:12px;letter-spacing:.3px;font-weight:800;margin-bottom:16px}
main[role="main"] .tyz19-eyebrow::before{content:"";width:24px;height:2px;background:#e6ba7e;border-radius:10px}
main[role="main"] .tyz19-heading{max-width:860px;margin:0 auto 43px;text-align:center}
main[role="main"] .tyz19-heading .tyz19-eyebrow{justify-content:center}
main[role="main"] .tyz19-heading p{max-width:760px;margin:14px auto 0}
main[role="main"] .tyz19-solutions{background:radial-gradient(ellipse 46% 45% at 85% 5%,rgba(216,176,116,.095),transparent 75%),#0d263e}
main[role="main"] .tyz19-solutions-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
main[role="main"] .tyz19-solution{position:relative;min-width:0;min-height:298px;padding:28px 22px 24px;border-radius:20px;overflow:hidden;border:1px solid rgba(238,195,132,.25);background:linear-gradient(150deg,#1b3b57,#112b45);box-shadow:0 14px 38px rgba(0,9,23,.12);transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease}
main[role="main"] .tyz19-solution::after{content:"";position:absolute;inset:0;width:55%;background:linear-gradient(95deg,transparent,rgba(255,221,169,.08),transparent);transform:translateX(260%) skewX(-19deg);transition:transform .8s ease;pointer-events:none}
main[role="main"] .tyz19-solution:hover{transform:translateY(-5px);border-color:rgba(245,207,149,.58);box-shadow:0 22px 48px rgba(0,7,21,.22)}
main[role="main"] .tyz19-solution:hover::after{transform:translateX(-300%) skewX(-19deg)}
main[role="main"] .tyz19-solution-num{font:700 10px/1.5 inherit;color:#b9cadd;direction:ltr;text-align:left;display:block;letter-spacing:1.5px}
main[role="main"] .tyz19-visual-icon{width:51px;height:51px;border:1px solid rgba(233,187,120,.32);border-radius:15px;display:grid;place-items:center;color:#f5cf9a;font-size:29px;background:rgba(235,192,132,.09);margin:20px 0 19px}
main[role="main"] .tyz19-solution h3{font-size:18px;line-height:1.55;font-weight:900}
main[role="main"] .tyz19-solution p{font-size:13px;line-height:1.95;margin:10px 0 18px}
main[role="main"] .tyz19-chip{display:inline-block;margin-top:auto;color:#ead1ac;border:1px solid rgba(243,198,137,.24);background:rgba(245,203,141,.07);padding:5px 12px;font-size:11px;border-radius:100px}
main[role="main"] .tyz19-lab{background:linear-gradient(125deg,#06192d,#112f4c)}
main[role="main"] .tyz19-lab-layout{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:55px;align-items:center}
main[role="main"] .tyz19-lab-copy h2{font-size:clamp(28px,3.1vw,42px);margin-bottom:15px}
main[role="main"] .tyz19-lab-copy strong{color:#f3d6ac}
main[role="main"] .tyz19-checks{list-style:none;margin:24px 0;padding:0;display:grid;gap:12px}
main[role="main"] .tyz19-checks li{display:flex;gap:12px;align-items:center;color:#e7f0f8;font-size:14px;line-height:1.9}
main[role="main"] .tyz19-checks li span{flex:0 0 auto;display:grid;place-items:center;width:24px;height:24px;border-radius:8px;background:rgba(239,194,130,.13);color:#f2cc98;font-weight:900}
main[role="main"] .tyz19-link{display:inline-flex;gap:10px;align-items:center;color:#f6d39f;font-weight:800;font-size:14px;border-bottom:1px solid rgba(247,211,159,.4);padding-bottom:5px}
main[role="main"] .tyz19-link:hover{color:#fff0d4}
main[role="main"] .tyz19-preview-wrapper{min-width:0;padding:19px 19px 16px;background:linear-gradient(155deg,rgba(32,70,101,.85),rgba(15,39,65,.97));border:1px solid rgba(244,197,132,.35);border-radius:25px;box-shadow:0 30px 70px rgba(0,5,17,.25)}
main[role="main"] .tyz19-preview-head{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:13px}
main[role="main"] .tyz19-toggle{display:flex;gap:4px;padding:4px;background:rgba(3,20,37,.7);border:1px solid rgba(248,205,149,.18);border-radius:12px}
main[role="main"] .tyz19-toggle-button{font-family:inherit;border:0;cursor:pointer;border-radius:9px;padding:8px 13px;background:transparent;color:#d1deed;font-weight:800;font-size:12px;transition:background .2s,color .2s}
main[role="main"] .tyz19-toggle-button.is-active{color:#152b41;background:linear-gradient(130deg,#ffdfb0,#d9aa72)}
main[role="main"] .tyz19-toggle-button:focus-visible{outline:2px solid #ffdfa9;outline-offset:2px}
main[role="main"] .tyz19-preview-hint{color:#b8cadc;font-size:10px}
main[role="main"] .tyz19-device-stage{min-height:374px;display:grid;place-items:center;padding:18px;background:radial-gradient(circle at 50% 45%,rgba(238,187,126,.1),transparent 70%),#091d32;border-radius:19px;overflow:hidden}
main[role="main"] .tyz19-browser{width:100%;max-width:580px;border:6px solid #172c42;border-radius:16px;overflow:hidden;background:#f7f4ef;box-shadow:0 22px 45px rgba(0,8,24,.3);transition:width .4s ease,border-radius .4s ease,border-width .4s ease}
main[role="main"] .tyz19-browser-bar{height:26px;display:flex;align-items:center;justify-content:space-between;gap:5px;padding:0 10px;background:#1b344d;color:#c6d3df;font:500 9px/1.4 sans-serif}
main[role="main"] .tyz19-browser-dots{display:flex;gap:4px}
main[role="main"] .tyz19-browser-dots i{width:5px;height:5px;border-radius:50%;background:#d69a86;display:block}
main[role="main"] .tyz19-browser-dots i:nth-child(2){background:#efd498}
main[role="main"] .tyz19-browser-dots i:nth-child(3){background:#9dc7b5}
main[role="main"] .tyz19-address{opacity:.6;direction:ltr}
main[role="main"] .tyz19-demo{min-height:264px;background:#f6f1e9;direction:rtl;color:#1b3048;overflow:hidden}
main[role="main"] .tyz19-demo-nav{height:49px;padding:0 21px;display:flex;justify-content:space-between;align-items:center;gap:10px;border-bottom:1px solid #e7dfd3}
main[role="main"] .tyz19-demo-logo{font:900 14px/1.3 sans-serif;letter-spacing:1.1px;direction:ltr}
main[role="main"] .tyz19-demo-logo span{color:#bc865a}
main[role="main"] .tyz19-demo-menu{font-size:9px;font-weight:800;color:#5a6774}
main[role="main"] .tyz19-demo-menu-icon{display:none}
main[role="main"] .tyz19-demo-body{padding:26px 24px 23px;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:22px;min-height:207px}
main[role="main"] .tyz19-demo-copy{min-width:0}
main[role="main"] .tyz19-demo-tag{display:block;direction:ltr;text-align:right;color:#ad7c58;font:800 8px/1.5 sans-serif;letter-spacing:1px;margin-bottom:9px}
main[role="main"] .tyz19-demo-copy>strong{display:block;color:#162f46;font-size:clamp(19px,2.3vw,28px);line-height:1.42;font-weight:900}
main[role="main"] .tyz19-demo-copy p{color:#596875;font-size:10px;line-height:1.85;margin:7px 0 13px}
main[role="main"] .tyz19-demo-button{display:inline-flex;align-items:center;gap:11px;padding:8px 13px;border-radius:7px;background:#193d56;color:#ffebcf;font-size:10px;font-weight:800}
main[role="main"] .tyz19-demo-art{height:169px;min-width:0;border-radius:13px;background:linear-gradient(140deg,#17344e,#38566d);position:relative;overflow:hidden;display:grid;place-items:center}
main[role="main"] .tyz19-orbit{position:absolute;width:170px;height:170px;border-radius:50%;border:1px solid rgba(241,201,141,.28);transform:rotate(-25deg) scaleX(.67)}
main[role="main"] .tyz19-art-card{position:relative;z-index:1;display:flex;flex-direction:column;justify-content:space-between;width:70%;height:107px;padding:13px;border:1px solid rgba(249,226,189,.35);border-radius:12px;background:linear-gradient(120deg,rgba(247,205,140,.18),rgba(255,255,255,.04));box-shadow:0 13px 30px rgba(0,0,0,.15);transform:rotate(-7deg)}
main[role="main"] .tyz19-art-card span,main[role="main"] .tyz19-art-card small{color:#f7d6ad;font:700 9px/1.2 sans-serif}
main[role="main"] .tyz19-art-card b{color:white;font:700 15px/1.4 sans-serif}
main[role="main"] .tyz19-art-glow{position:absolute;bottom:-65px;width:180px;height:130px;border-radius:50%;background:rgba(229,168,101,.3);filter:blur(25px)}
main[role="main"] .tyz19-demo-bottom{display:flex;align-items:center;justify-content:space-around;gap:10px;padding:9px 15px;background:#eee9e1;border-top:1px solid #e4dacf;color:#40566a;font-size:9px;font-weight:800}
main[role="main"] .tyz19-device-stage[data-view="mobile"]{min-height:455px}
main[role="main"] .tyz19-device-stage[data-view="mobile"] .tyz19-browser{width:236px;max-width:100%;border-width:7px;border-radius:28px}
main[role="main"] .tyz19-device-stage[data-view="mobile"] .tyz19-browser-bar{height:18px}
main[role="main"] .tyz19-device-stage[data-view="mobile"] .tyz19-demo-nav{height:37px;padding:0 13px}
main[role="main"] .tyz19-device-stage[data-view="mobile"] .tyz19-demo-logo{font-size:10px}
main[role="main"] .tyz19-device-stage[data-view="mobile"] .tyz19-demo-menu{display:none}
main[role="main"] .tyz19-device-stage[data-view="mobile"] .tyz19-demo-menu-icon{display:block;font-size:12px}
main[role="main"] .tyz19-device-stage[data-view="mobile"] .tyz19-demo-body{display:flex;flex-direction:column;gap:13px;align-items:stretch;padding:17px 16px 15px;text-align:center}
main[role="main"] .tyz19-device-stage[data-view="mobile"] .tyz19-demo-tag{text-align:center;font-size:7px}
main[role="main"] .tyz19-device-stage[data-view="mobile"] .tyz19-demo-copy>strong{font-size:19px}
main[role="main"] .tyz19-device-stage[data-view="mobile"] .tyz19-demo-copy p{font-size:9px;margin:4px 0 9px}
main[role="main"] .tyz19-device-stage[data-view="mobile"] .tyz19-demo-button{font-size:9px;padding:7px 12px}
main[role="main"] .tyz19-device-stage[data-view="mobile"] .tyz19-demo-art{height:110px}
main[role="main"] .tyz19-device-stage[data-view="mobile"] .tyz19-art-card{height:76px;width:60%;padding:9px}
main[role="main"] .tyz19-device-stage[data-view="mobile"] .tyz19-art-card b{font-size:11px}
main[role="main"] .tyz19-device-stage[data-view="mobile"] .tyz19-demo-bottom{flex-wrap:wrap;font-size:7px;gap:5px}
main[role="main"] .tyz19-preview-foot{font-size:11px;margin-top:10px;text-align:center;color:#c5d4e2}
main[role="main"] .tyz19-process{background:radial-gradient(ellipse 43% 33% at 0 0,rgba(219,177,121,.065),transparent 80%),#0d283f}
main[role="main"] .tyz19-steps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
main[role="main"] .tyz19-step{padding:24px 18px 25px;min-width:0;border:1px solid rgba(232,190,134,.24);border-radius:17px;background:#14334d;position:relative}
main[role="main"] .tyz19-step::before{content:"";width:25px;height:2px;position:absolute;top:37px;right:60px;background:linear-gradient(90deg,transparent,#e6bc85);opacity:.5}
main[role="main"] .tyz19-step-no{display:inline-grid;place-items:center;width:40px;height:40px;border:1px solid rgba(236,197,142,.43);border-radius:12px;background:rgba(234,191,132,.09);color:#f3c994;font:900 15px/1 sans-serif;direction:ltr}
main[role="main"] .tyz19-step h3{font-size:16px;line-height:1.7;margin:19px 0 8px}
main[role="main"] .tyz19-step p{font-size:12px;line-height:2;margin:0}
main[role="main"] .tyz19-inline-cta{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:30px;padding:25px 29px;border-radius:18px;background:linear-gradient(115deg,#234660,#18344f);border:1px solid rgba(241,195,131,.32)}
main[role="main"] .tyz19-inline-cta>div{display:flex;flex-direction:column;gap:7px}
main[role="main"] .tyz19-inline-cta strong{font-size:17px;color:#f5d7aa;line-height:1.8}
main[role="main"] .tyz19-inline-cta span{font-size:13px;color:#d9e6f0}
main[role="main"] .tyz19-button{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:48px;padding:12px 24px;border-radius:11px;color:#142a40!important;font-size:13px;font-weight:900;background:linear-gradient(113deg,#ffdfab,#dfae73);box-shadow:0 10px 25px rgba(3,18,36,.16);white-space:nowrap;overflow:hidden;transition:transform .2s,box-shadow .2s}
main[role="main"] .tyz19-button::before{content:"";position:absolute;inset:0;width:40%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);transform:translateX(320%) skewX(-20deg);transition:transform .65s;pointer-events:none}
main[role="main"] .tyz19-button:hover{transform:translateY(-2px);box-shadow:0 16px 30px rgba(3,18,36,.23)}
main[role="main"] .tyz19-button:hover::before{transform:translateX(-350%) skewX(-20deg)}
main[role="main"] .tyz19-answers{background:#081d34}
main[role="main"] .tyz19-heading .tyz19-lead-answer{font-size:16px;line-height:2.1;color:#e6eef6;padding:19px 24px;background:rgba(23,56,84,.68);border:1px solid rgba(232,189,126,.19);border-radius:17px}
main[role="main"] .tyz19-answer-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:19px}
main[role="main"] .tyz19-answer{border-radius:19px;padding:26px 30px;border:1px solid rgba(240,196,132,.25);background:linear-gradient(150deg,#173754,#102b45);transition:border-color .2s,transform .2s}
main[role="main"] .tyz19-answer:hover{border-color:rgba(243,199,132,.58);transform:translateY(-3px)}
main[role="main"] .tyz19-answer-tag{display:inline-block;font:800 11px/1.6 inherit;color:#c9d6e3;margin-bottom:13px}
main[role="main"] .tyz19-answer h3{font-size:20px;line-height:1.65;margin-bottom:12px}
main[role="main"] .tyz19-answer p{font-size:14px;line-height:2.05;margin:0}
main[role="main"] .tyz19-secondary-links{display:flex;justify-content:center;align-items:center;gap:24px;flex-wrap:wrap;margin-top:29px}
main[role="main"] .tyz19-secondary-links a{font-size:13px;color:#f0d09e;border-bottom:1px solid rgba(240,208,158,.4);font-weight:800;padding-bottom:5px}
main[role="main"] .tyz19-deliverables{background:linear-gradient(140deg,#0c263d,#14344f)}
main[role="main"] .tyz19-deliver-layout{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);align-items:center;gap:65px}
main[role="main"] .tyz19-deliver-copy h2{margin-bottom:16px}
main[role="main"] .tyz19-deliver-copy p{margin-bottom:26px}
main[role="main"] .tyz19-deliver-list{border:1px solid rgba(239,195,133,.3);border-radius:22px;background:rgba(22,54,80,.84);padding:11px 24px}
main[role="main"] .tyz19-deliver-list>div{display:flex;gap:15px;align-items:flex-start;padding:19px 0;border-bottom:1px solid rgba(232,190,134,.16)}
main[role="main"] .tyz19-deliver-list>div:last-child{border-bottom:none}
main[role="main"] .tyz19-deliver-list>div>span{display:grid;place-items:center;width:36px;height:36px;flex:0 0 36px;border-radius:11px;background:rgba(238,193,129,.1);color:#efd09d;font-size:17px}
main[role="main"] .tyz19-deliver-list strong{display:block;color:#f6d6a5;font-size:15px;margin-bottom:4px}
main[role="main"] .tyz19-deliver-list p{font-size:12px;line-height:1.95;margin:0}
main[role="main"] .hero .tyz19-hero-actions{display:flex;justify-content:center;gap:13px;align-items:center;flex-wrap:wrap;margin-top:26px}
main[role="main"] .hero .tyz19-hero-actions .hero-cta{margin:0}
main[role="main"] .tyz19-hero-secondary{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:12px 23px;border:1px solid rgba(242,200,144,.5);border-radius:13px;color:#f5d5a6!important;background:rgba(255,255,255,.035);font-size:14px;font-weight:800;transition:background .2s,transform .2s}
main[role="main"] .tyz19-hero-secondary:hover{transform:translateY(-2px);background:rgba(239,196,138,.11)}
main[role="main"] .hero .tyz19-stats{margin-top:35px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;max-width:810px;margin-right:auto;margin-left:auto}
main[role="main"] .hero .tyz19-stat{padding:15px 15px 13px;border:1px solid rgba(234,188,128,.26);border-radius:14px;background:rgba(19,49,76,.68);text-align:center}
main[role="main"] .hero .tyz19-stat strong{display:block;color:#f6d8aa;font-size:13px;font-weight:900;line-height:1.6}
main[role="main"] .hero .tyz19-stat span{display:block;color:#cadceb;font-size:11px;line-height:1.9;margin-top:3px}
main[role="main"] .hero{scroll-margin-top:95px}
main[role="main"] .hero h1{max-width:960px}
main[role="main"] .hero p{max-width:865px}
main[role="main"] .tyz19-section a:focus-visible{outline:2px solid #f3d3a2;outline-offset:4px}
main[role="main"] .tyz19-ready .tyz19-reveal:not(.tyz19-in){opacity:0;transform:translateY(17px)}
main[role="main"] .tyz19-reveal{transition:opacity .55s ease,transform .55s cubic-bezier(.2,.8,.3,1)}
main[role="main"] .tyz19-reveal.tyz19-in{opacity:1;transform:none}
main[role="main"] .portfolio-card img{aspect-ratio:16/10;object-fit:cover;display:block}
main[role="main"] .portfolio-card:focus-within{outline:2px solid #f4d39d;outline-offset:3px}
main[role="main"] #faq details.faq-item summary{line-height:1.85}
main[role="main"] #faq details.faq-item>div p{font-size:14px}
body #loader{display:none!important}
@media(max-width:1120px){
 main[role="main"] .tyz19-solutions-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 main[role="main"] .tyz19-solution{min-height:260px}
 main[role="main"] .tyz19-steps{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:900px){
 main[role="main"] .tyz19-lab-layout,main[role="main"] .tyz19-deliver-layout{grid-template-columns:1fr;gap:32px}
 main[role="main"] .tyz19-lab-copy,main[role="main"] .tyz19-deliver-copy{max-width:760px}
 main[role="main"] .tyz19-device-stage{min-height:340px}
}
@media(max-width:650px){
 main[role="main"] .tyz19-section{padding:66px 16px 72px}
 main[role="main"] .tyz19-heading{margin-bottom:25px}
 main[role="main"] .tyz19-section h2{font-size:clamp(26px,7vw,34px);line-height:1.68}
 main[role="main"] .tyz19-section p{font-size:13px;line-height:2}
 main[role="main"] .tyz19-solutions-grid,.tyz19-answer-grid{grid-template-columns:1fr}
 main[role="main"] .tyz19-solution{min-height:0;padding:23px}
 main[role="main"] .tyz19-solution p{font-size:13px}
 main[role="main"] .tyz19-lab-layout{gap:26px}
 main[role="main"] .tyz19-preview-wrapper{padding:12px;border-radius:19px}
 main[role="main"] .tyz19-device-stage{min-height:284px;padding:11px}
 main[role="main"] .tyz19-preview-head{gap:10px}
 main[role="main"] .tyz19-preview-hint{font-size:9px}
 main[role="main"] .tyz19-browser{border-width:4px}
 main[role="main"] .tyz19-demo-nav{height:38px;padding:0 11px}
 main[role="main"] .tyz19-demo-logo{font-size:10px}
 main[role="main"] .tyz19-demo-menu{font-size:7px}
 main[role="main"] .tyz19-demo-body{padding:16px 12px;gap:10px;min-height:162px}
 main[role="main"] .tyz19-demo-copy>strong{font-size:16px}
 main[role="main"] .tyz19-demo-copy p{font-size:8px;margin:5px 0 8px}
 main[role="main"] .tyz19-demo-button{font-size:8px;padding:6px}
 main[role="main"] .tyz19-demo-art{height:120px}
 main[role="main"] .tyz19-art-card{height:80px;padding:9px}
 main[role="main"] .tyz19-art-card b{font-size:11px}
 main[role="main"] .tyz19-demo-bottom{font-size:7px}
 main[role="main"] .tyz19-device-stage[data-view="mobile"]{min-height:420px}
 main[role="main"] .tyz19-steps{grid-template-columns:1fr;gap:10px}
 main[role="main"] .tyz19-step{padding:18px 20px}
 main[role="main"] .tyz19-step h3{margin:12px 0 4px}
 main[role="main"] .tyz19-step::before{display:none}
 main[role="main"] .tyz19-inline-cta{flex-direction:column;align-items:stretch;padding:21px}
 main[role="main"] .tyz19-inline-cta .tyz19-button{width:100%}
 main[role="main"] .tyz19-answer-grid{grid-template-columns:1fr;gap:12px}
 main[role="main"] .tyz19-answer{padding:21px}
 main[role="main"] .tyz19-answer h3{font-size:18px}
 main[role="main"] .tyz19-heading .tyz19-lead-answer{padding:16px;font-size:14px}
 main[role="main"] .tyz19-deliver-list{padding:6px 15px}
 main[role="main"] .tyz19-secondary-links{gap:16px}
 main[role="main"] .hero .tyz19-hero-actions{flex-direction:column;align-items:stretch;max-width:320px;margin:25px auto 0}
 main[role="main"] .hero .tyz19-hero-actions>a{width:100%;min-height:48px;text-align:center}
 main[role="main"] .hero .tyz19-stats{grid-template-columns:1fr;gap:7px;margin-top:23px}
 main[role="main"] .hero .tyz19-stat{padding:9px 13px}
 main[role="main"] .hero .tyz19-stat strong{font-size:12px}
 main[role="main"] .hero .tyz19-stat span{font-size:10px}
 main[role="main"] .hero h1{font-size:clamp(29px,7.7vw,38px)!important;line-height:1.55!important}
 main[role="main"] .hero{padding-bottom:64px}
 main[role="main"] .portfolio-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 main[role="main"] .portfolio-card img{height:150px;min-height:150px}
}
@media(max-width:370px){
 main[role="main"] .tyz19-preview-hint{display:none}
 main[role="main"] .tyz19-device-stage{padding:8px}
 main[role="main"] .portfolio-grid{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
 main[role="main"] .tyz19-reveal,main[role="main"] .tyz19-solution,main[role="main"] .tyz19-answer,main[role="main"] .tyz19-browser,main[role="main"] .tyz19-button{transition:none!important}
 main[role="main"] .tyz19-ready .tyz19-reveal:not(.tyz19-in){opacity:1!important;transform:none!important}
 main[role="main"] .tyz19-button::before,main[role="main"] .tyz19-solution::after{display:none}
}


/* ---- phase20-visual-motion.css ---- */
/* Tamiyouz Alrowad web-design V20 — professional studio artwork + brush reveal + premium button swipes.
   Assets scoped exclusively to /web-design/. No third-party libraries. */
main[role="main"] #intro .intro-grid{gap:clamp(26px,4vw,56px);grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)}
main[role="main"] #intro .intro-text{min-width:0}
main[role="main"] #intro .intro-visual{min-width:0}
main[role="main"] #intro .intro-icon-box.tyz20-studio-box{
  position:relative;isolation:isolate;display:flex;flex-direction:column;justify-content:center;align-items:center;
  width:min(490px,100%);height:auto;min-height:0;margin:0;padding:9px 9px 15px;overflow:hidden;
  border-radius:29px;border:1px solid rgba(248,202,142,.39);
  background:radial-gradient(ellipse 72% 80% at 56% 35%,rgba(65,107,139,.26),transparent 82%),linear-gradient(145deg,#1c3c59,#0a2139 77%);
  box-shadow:0 24px 56px rgba(1,12,29,.33),inset 0 1px 0 rgba(255,225,181,.13);
  transform:translateZ(0);transition:border-color .35s,box-shadow .35s
}
main[role="main"] #intro .intro-icon-box.tyz20-studio-box:hover{
  border-color:rgba(251,218,169,.68);box-shadow:0 29px 65px rgba(0,11,26,.4),0 0 40px rgba(219,167,100,.07)
}
main[role="main"] #intro .intro-icon-box.tyz20-studio-box::after{content:none!important;animation:none!important}
main[role="main"] #intro .tyz20-studio-box::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(ellipse at 70% 5%,rgba(234,185,115,.12),transparent 48%);opacity:1
}
main[role="main"] #intro .tyz20-studio-art{
  position:relative;z-index:1;display:block;width:100%;max-width:100%;height:auto;
  aspect-ratio:760/620;object-fit:contain;filter:drop-shadow(0 8px 13px rgba(2,14,33,.17))
}
main[role="main"] #intro .tyz20-art-caption{
  position:relative;z-index:1;display:flex;align-items:center;justify-content:center;gap:8px;
  width:calc(100% - 24px);padding:8px 10px;margin:-10px 0 0;border-top:1px solid rgba(233,191,137,.19);
  text-align:center;font-weight:700;color:#ead1aa;font-size:11px;line-height:1.7;letter-spacing:.1px
}
main[role="main"] #intro .tyz20-art-spark{color:#f6cf96;font-size:14px}
main[role="main"] .tyz20-brush-heading{position:relative;overflow:visible}
main[role="main"] .tyz20-brush-heading .tyz20-brush-line{
  display:block;width:max-content;max-width:100%;position:relative;min-width:0
}
main[role="main"] .tyz20-brush-heading .tyz20-brush-words{display:block;position:relative}
main[role="main"] #intro .tyz20-brush-heading .tyz20-highlight{color:#f3c58a}
main[role="main"] .tyz20-brush-heading.tyz20-draw .tyz20-brush-words{
  animation:tyz20-write 1.15s cubic-bezier(.17,.71,.24,1) both
}
main[role="main"] .tyz20-brush-heading.tyz20-draw .tyz20-brush-line:nth-child(2) .tyz20-brush-words{animation-delay:.45s}
main[role="main"] .tyz20-brush-heading.tyz20-draw .tyz20-brush-line::after{
  content:"";position:absolute;top:56%;right:0;z-index:3;width:clamp(27px,8vw,72px);height:10px;
  pointer-events:none;border-radius:80% 30% 75% 22%;
  background:linear-gradient(90deg,transparent 0%,rgba(249,222,179,.55) 16%,#f8daa6 52%,#c7904f 90%,transparent 100%);
  box-shadow:0 0 15px rgba(250,196,118,.39);filter:drop-shadow(0 0 5px rgba(240,193,116,.33));
  transform:translateY(-50%) rotate(-7deg);
  animation:tyz20-brush-trace 1.17s cubic-bezier(.17,.71,.24,1) both
}
main[role="main"] .tyz20-brush-heading.tyz20-draw .tyz20-brush-line:nth-child(2)::after{animation-delay:.45s}
@keyframes tyz20-write{
  0%{clip-path:inset(0 0 0 100%);opacity:.78}
  16%{opacity:1}
  100%{clip-path:inset(0 0 0 0);opacity:1}
}
@keyframes tyz20-brush-trace{
  0%{right:0;opacity:0}
  12%{opacity:1}
  82%{opacity:.85}
  100%{right:calc(100% - 10px);opacity:0}
}
main[role="main"] #intro .tyz20-services-actions{
  display:flex;align-items:center;justify-content:flex-start;gap:17px;flex-wrap:wrap;margin-top:26px
}
main[role="main"] #intro .tyz20-services-btn{
  position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:16px;
  min-height:52px;padding:13px 25px;border-radius:12px;text-decoration:none;
  background:linear-gradient(117deg,#ffe2b5 0%,#e2ae71 53%,#f3d4a4 100%);
  color:#0d2841!important;font-family:inherit;font-size:14px;font-weight:900;line-height:1.6;
  border:1px solid rgba(255,225,179,.6);
  box-shadow:0 12px 27px rgba(0,11,26,.21),inset 0 1px 0 rgba(255,255,255,.36);
  transition:transform .22s,box-shadow .22s,border-color .22s
}
main[role="main"] #intro .tyz20-services-btn i{font-size:13px;transition:transform .24s}
main[role="main"] #intro .tyz20-services-btn:hover{transform:translateY(-3px);box-shadow:0 18px 35px rgba(0,11,26,.3)}
main[role="main"] #intro .tyz20-services-btn:hover i{transform:translateX(-4px)}
main[role="main"] #intro .tyz20-services-btn::before,
main[role="main"] .hero .tyz19-hero-actions>a::before,
main[role="main"] #cta .cta-buttons>a::before{
  content:"";position:absolute;z-index:1;pointer-events:none;inset:0 auto 0 0;width:42%;height:100%;
  background:linear-gradient(98deg,transparent,rgba(255,255,255,.12) 22%,rgba(255,255,255,.54) 50%,rgba(255,255,255,.08) 80%,transparent);
  transform:translateX(-290%) skewX(-21deg);animation:tyz20-button-sweep 6.5s cubic-bezier(.28,.75,.3,1) infinite
}
@keyframes tyz20-button-sweep{
  0%,37%,100%{transform:translateX(-290%) skewX(-21deg)}
  55%{transform:translateX(590%) skewX(-21deg)}
}
main[role="main"] .hero .tyz19-hero-actions>a,
main[role="main"] #cta .cta-buttons>a{position:relative;overflow:hidden;isolation:isolate}
main[role="main"] .hero .tyz19-hero-actions>a:nth-child(2)::before{animation-delay:1s}
main[role="main"] .hero .tyz19-hero-actions>a:nth-child(3)::before{animation-delay:2s}
main[role="main"] #cta .cta-buttons>a:nth-child(2)::before{animation-delay:1.5s}
main[role="main"] #intro .tyz20-explore-link{
  display:inline-flex;align-items:center;gap:9px;padding:8px 0;font-size:13px;
  font-weight:800;color:#f4d2a2!important;border-bottom:1px solid rgba(237,194,135,.47);transition:color .2s,border-color .2s
}
main[role="main"] #intro .tyz20-explore-link:hover{color:#fff3d9!important;border-color:#f3cf97}
main[role="main"] #intro .intro-features li{
  position:relative;isolation:isolate;overflow:hidden;min-height:47px;padding:11px 16px;
  transition:background .25s,border-color .25s,transform .25s
}
main[role="main"] #intro .intro-features li::before{
  content:"";position:absolute;inset:0 auto 0 0;width:37%;pointer-events:none;z-index:1;
  background:linear-gradient(94deg,transparent,rgba(252,217,164,.12),rgba(255,234,202,.24),transparent);
  transform:translateX(-330%) skewX(-18deg);transition:transform .7s cubic-bezier(.18,.7,.3,1)
}
main[role="main"] #intro .intro-features li:hover{
  background:rgba(236,191,131,.085);border-color:rgba(244,207,150,.49);transform:translateY(-2px)
}
main[role="main"] #intro .intro-features li:hover::before{transform:translateX(780%) skewX(-18deg)}
main[role="main"] #intro .intro-features li i{
  flex-shrink:0;color:#f2ca94;filter:drop-shadow(0 0 5px rgba(228,185,121,.15))
}
main[role="main"] #services .feature-card{position:relative;isolation:isolate;overflow:hidden}
main[role="main"] #services .feature-card::after{
  content:"";position:absolute;inset:0 auto 0 0;width:35%;z-index:2;pointer-events:none;
  background:linear-gradient(95deg,transparent,rgba(255,233,193,.16),transparent);
  transform:translateX(-340%) skewX(-17deg);transition:transform .76s ease
}
main[role="main"] #services .feature-card:hover::after{transform:translateX(830%) skewX(-17deg)}
main[role="main"] #intro .tyz20-services-actions a:focus-visible,
main[role="main"] .hero .tyz19-hero-actions a:focus-visible{outline:3px solid #ffe2b0;outline-offset:4px}
@media(max-width:900px){
 main[role="main"] #intro .intro-grid{grid-template-columns:1fr;gap:34px}
 main[role="main"] #intro .intro-visual{justify-content:center}
 main[role="main"] #intro .intro-icon-box.tyz20-studio-box{width:min(500px,100%)}
}
@media(max-width:650px){
 main[role="main"] #intro .intro-icon-box.tyz20-studio-box{width:min(370px,100%);min-height:0;padding:5px 5px 10px;border-radius:20px}
 main[role="main"] #intro .tyz20-art-caption{width:calc(100% - 16px);font-size:10px;padding:5px 6px;margin:-6px 0 0}
 main[role="main"] #intro .tyz20-services-actions{flex-direction:column;align-items:stretch;gap:12px;margin-top:20px}
 main[role="main"] #intro .tyz20-services-btn{width:100%;min-height:50px;font-size:13px}
 main[role="main"] #intro .tyz20-explore-link{align-self:center}
 main[role="main"] #intro .intro-text h2{font-size:clamp(25px,6.5vw,32px)!important;line-height:1.7!important}
 main[role="main"] #intro .intro-features li{font-size:12.5px;line-height:1.8}
 main[role="main"] .tyz20-brush-heading.tyz20-draw .tyz20-brush-line::after{height:7px}
}
@media(prefers-reduced-motion:reduce){
 main[role="main"] .tyz20-brush-heading .tyz20-brush-words,
 main[role="main"] .tyz20-brush-heading .tyz20-brush-line::after{animation:none!important;clip-path:none!important;opacity:1!important}
 main[role="main"] .tyz20-brush-heading .tyz20-brush-line::after{display:none!important}
 main[role="main"] #intro .tyz20-services-btn::before,
 main[role="main"] .hero .tyz19-hero-actions>a::before,
 main[role="main"] #cta .cta-buttons>a::before{animation:none!important;display:none}
 main[role="main"] #services .feature-card::after{display:none}
 main[role="main"] #intro .intro-features li::before{display:none}
 main[role="main"] #intro .intro-features li,
 main[role="main"] #intro .tyz20-services-btn,
 main[role="main"] #services .feature-card{transition:none!important}
}

/* ---- phase21-services-light.css ---- */
/* Web Design V21 — "ماذا نقدم" light section, original navy cards, lightweight SVGs and readable motion. */
main[role="main"] #services.tyz21-services-light{
  position:relative;isolation:isolate;overflow:hidden;
  padding-top:clamp(64px,7vw,98px);padding-bottom:clamp(70px,7vw,102px);
  background:
    radial-gradient(ellipse 44% 42% at 4% 12%,rgba(198,155,95,.10),transparent 80%),
    radial-gradient(ellipse 40% 52% at 96% 80%,rgba(40,93,143,.065),transparent 80%),
    linear-gradient(155deg,#fafcfe 0%,#f0f5f9 55%,#f5f8fb 100%)!important;
  color:#15314a;
}
main[role="main"] #services.tyz21-services-light::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:-1;
  background-image:radial-gradient(rgba(42,76,104,.18) .65px,transparent .65px);
  background-size:30px 30px;opacity:.16;
}
main[role="main"] #services.tyz21-services-light .section-header{max-width:950px;margin-inline:auto;margin-bottom:42px;text-align:center}
main[role="main"] #services.tyz21-services-light .section-header h2{
  color:#122d46!important;font-size:clamp(30px,3.15vw,44px)!important;
  line-height:1.65;font-weight:900!important;text-wrap:balance;text-shadow:none;
}
main[role="main"] #services.tyz21-services-light .section-header h2 span{color:#b57b37!important}
main[role="main"] #services.tyz21-services-light .section-divider{
  width:76px;height:3px;margin:12px auto 18px;border-radius:9px;
  background:linear-gradient(90deg,#f2d19c,#bc8750);
}
main[role="main"] #services.tyz21-services-light .section-header p{
  color:#435c72!important;max-width:790px;margin:0 auto;
  font-size:clamp(13px,1.2vw,15px);font-weight:600;line-height:2.1;
}
main[role="main"] #services.tyz21-services-light .features-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch;
  gap:clamp(14px,1.65vw,23px);margin-top:36px;
}
main[role="main"] #services.tyz21-services-light .feature-card{
  position:relative;isolation:isolate;min-width:0;min-height:0;
  display:flex;flex-direction:column;
  padding:18px 19px 27px;border-radius:21px;
  border:1px solid rgba(226,184,123,.38);
  background:linear-gradient(145deg,#1d3e5b,#122d49 82%)!important;
  box-shadow:0 17px 37px rgba(25,55,85,.13),inset 0 1px 0 rgba(255,236,208,.06);
  transition:transform .33s cubic-bezier(.2,.75,.25,1),box-shadow .33s,border-color .33s,background .33s;
}
main[role="main"] #services.tyz21-services-light .feature-card:hover{
  transform:translateY(-5px);
  border-color:rgba(249,210,151,.8);
  background:linear-gradient(145deg,#244967,#163651 82%)!important;
  box-shadow:0 25px 44px rgba(20,48,75,.22),0 0 0 1px rgba(239,200,145,.1);
}
main[role="main"] #services.tyz21-services-light .feature-card::after{
  content:"";position:absolute;inset:0 auto 0 0;z-index:2;
  width:30%;background:linear-gradient(97deg,transparent,rgba(255,246,225,.1),rgba(255,255,255,.07),transparent);
  transform:translateX(-350%) skewX(-17deg);transition:transform .85s ease;pointer-events:none;
}
main[role="main"] #services.tyz21-services-light .feature-card:hover::after{transform:translateX(980%) skewX(-17deg)}
main[role="main"] #services.tyz21-services-light .tyz21-service-art{
  position:relative;isolation:isolate;overflow:hidden;flex:none;
  width:100%;aspect-ratio:640/320;max-height:180px;
  padding:0;margin:0 0 21px;border-radius:15px;
  border:1px solid rgba(244,199,134,.27);background:#0e2d47;
}
main[role="main"] #services.tyz21-services-light .tyz21-service-art::after{
  content:"";position:absolute;inset:0 auto 0 0;width:25%;height:100%;pointer-events:none;z-index:2;
  background:linear-gradient(90deg,transparent,rgba(255,238,204,.18),transparent);
  transform:translateX(-400%) skewX(-15deg);transition:transform .85s ease;
}
main[role="main"] #services.tyz21-services-light .feature-card:hover .tyz21-service-art::after{transform:translateX(1200%) skewX(-15deg)}
main[role="main"] #services.tyz21-services-light .tyz21-service-art img{
  width:100%;height:100%;display:block;object-fit:cover;
  filter:saturate(.99);transform:scale(1);
  transition:transform .65s cubic-bezier(.2,.75,.3,1),filter .5s;
}
main[role="main"] #services.tyz21-services-light .feature-card:hover .tyz21-service-art img{
  transform:scale(1.045);filter:saturate(1.1);
}
main[role="main"] #services.tyz21-services-light .tyz21-service-art .feature-icon{
  position:absolute;z-index:3;top:12px;right:12px;
  width:43px;height:43px;margin:0;display:grid;place-items:center;
  border-radius:12px;background:rgba(7,26,44,.80);
  border:1px solid rgba(246,205,148,.44);box-shadow:0 6px 16px rgba(0,9,23,.18);
}
main[role="main"] #services.tyz21-services-light .tyz21-service-art .feature-icon i{
  color:#ffda9e;font-size:18px;
}
main[role="main"] #services.tyz21-services-light .feature-card h3{
  position:relative;display:block;max-width:100%;overflow-wrap:anywhere;
  margin:0 5px 14px;padding-bottom:15px;
  color:#f7d8aa!important;font-size:clamp(16px,1.48vw,19px)!important;
  font-weight:900!important;line-height:1.7!important;
}
main[role="main"] #services.tyz21-services-light .feature-card h3::after{
  content:"";position:absolute;bottom:0;right:0;width:50px;height:2px;border-radius:9px;
  background:linear-gradient(90deg,transparent,#f0c38a);
  transition:width .65s ease;
}
main[role="main"] #services.tyz21-services-light .feature-card:hover h3::after{width:92px}
main[role="main"] #services.tyz21-services-light .feature-card p{
  flex:1;margin:0 5px;color:#e0eaf4!important;
  font-size:clamp(12.5px,1.14vw,14px);font-weight:500;line-height:2.06!important;
}
main[role="main"] #services.tyz21-services-light .tyz21-title-text{display:inline;opacity:1}
/* Progressive enhancements activate only if IntersectionObserver has been attached. */
main[role="main"] #services.tyz21-services-light.tyz21-armed .feature-card:not(.tyz21-in){
  opacity:.88;transform:translateY(17px);
}
main[role="main"] #services.tyz21-services-light.tyz21-armed .feature-card.tyz21-in{
  animation:tyz21-card-enter .62s cubic-bezier(.2,.8,.25,1) both;
}
main[role="main"] #services.tyz21-services-light.tyz21-armed .feature-card.tyz21-in:nth-child(2){animation-delay:90ms}
main[role="main"] #services.tyz21-services-light.tyz21-armed .feature-card.tyz21-in:nth-child(3){animation-delay:180ms}
main[role="main"] #services.tyz21-services-light.tyz21-armed .feature-card.tyz21-in .tyz21-title-text{
  display:inline-block;animation:tyz21-write .9s cubic-bezier(.17,.73,.25,1) both .16s;
}
main[role="main"] #services.tyz21-services-light.tyz21-armed .feature-card.tyz21-in:nth-child(2) .tyz21-title-text{animation-delay:.25s}
main[role="main"] #services.tyz21-services-light.tyz21-armed .feature-card.tyz21-in:nth-child(3) .tyz21-title-text{animation-delay:.34s}
main[role="main"] #services.tyz21-services-light.tyz21-armed .feature-card.tyz21-in p{
  animation:tyz21-copy-enter .77s ease both .35s;
}
main[role="main"] #services.tyz21-services-light.tyz21-armed .section-header.tyz21-in h2{
  animation:tyz21-heading-enter .75s ease both;
}
@keyframes tyz21-card-enter{from{opacity:.55;transform:translateY(20px)}to{opacity:1;transform:none}}
@keyframes tyz21-write{from{clip-path:inset(0 0 0 100%);opacity:.7}to{clip-path:inset(0 0 0 0);opacity:1}}
@keyframes tyz21-copy-enter{from{opacity:.3;transform:translateY(9px)}to{opacity:1;transform:none}}
@keyframes tyz21-heading-enter{from{opacity:.45;transform:translateY(10px)}to{opacity:1;transform:none}}
@media(max-width:1024px){
 main[role="main"] #services.tyz21-services-light .features-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 main[role="main"] #services.tyz21-services-light .feature-card:last-child{grid-column:1/-1;max-width:550px;justify-self:center;width:100%}
}
@media(max-width:650px){
 main[role="main"] #services.tyz21-services-light{padding:61px 15px 75px}
 main[role="main"] #services.tyz21-services-light .section-header{margin-bottom:25px}
 main[role="main"] #services.tyz21-services-light .section-header h2{font-size:clamp(28px,7vw,36px)!important}
 main[role="main"] #services.tyz21-services-light .section-header p{font-size:13px;line-height:2}
 main[role="main"] #services.tyz21-services-light .features-grid{grid-template-columns:1fr;gap:15px;margin-top:25px}
 main[role="main"] #services.tyz21-services-light .feature-card,
 main[role="main"] #services.tyz21-services-light .feature-card:last-child{
   grid-column:auto;max-width:none;width:100%;padding:15px 16px 22px;border-radius:18px;
 }
 main[role="main"] #services.tyz21-services-light .tyz21-service-art{max-height:175px;margin-bottom:17px;border-radius:13px}
 main[role="main"] #services.tyz21-services-light .feature-card h3{font-size:17px!important;margin-bottom:11px;padding-bottom:11px}
 main[role="main"] #services.tyz21-services-light .feature-card p{font-size:13px}
}
@media(hover:none){
 main[role="main"] #services.tyz21-services-light .feature-card:hover{transform:none}
 main[role="main"] #services.tyz21-services-light .feature-card:hover .tyz21-service-art img{transform:none}
}
@media(prefers-reduced-motion:reduce){
 main[role="main"] #services.tyz21-services-light .feature-card,
 main[role="main"] #services.tyz21-services-light .feature-card::after,
 main[role="main"] #services.tyz21-services-light .feature-card h3::after,
 main[role="main"] #services.tyz21-services-light .tyz21-service-art img,
 main[role="main"] #services.tyz21-services-light .tyz21-title-text,
 main[role="main"] #services.tyz21-services-light .feature-card p{
  transition:none!important;animation:none!important;transform:none!important;opacity:1!important;clip-path:none!important
 }
 main[role="main"] #services.tyz21-services-light .tyz21-service-art::after{display:none}
}


/* ---- phase22-dark-section-light-cards.css ---- */
/* Tamiyouz Alrowad /web-design/ V22 — requested navy section + light cards + subtle 3D artwork. Page-scoped. */
main[role="main"] #services.tyz21-services-light {
  color:#f5f8fc;
  background:
    radial-gradient(ellipse 45% 47% at 9% 8%,rgba(216,166,100,.09),transparent 78%),
    radial-gradient(ellipse 44% 47% at 92% 83%,rgba(88,144,183,.11),transparent 78%),
    linear-gradient(155deg,#0c2741 0%,#081d34 62%,#071b31 100%)!important;
}
main[role="main"] #services.tyz21-services-light::before {
  background-image:radial-gradient(rgba(239,198,141,.19) .65px,transparent .65px);
  opacity:.15;
}
main[role="main"] #services.tyz21-services-light .section-header h2 {
  color:#f8fbff!important;
}
main[role="main"] #services.tyz21-services-light .section-header h2 span {
  color:#f4cd95!important;
}
main[role="main"] #services.tyz21-services-light .section-header p {
  color:#d9e6f2!important;
}
main[role="main"] #services.tyz21-services-light .feature-card {
  padding:19px 20px 28px;
  border:1px solid rgba(211,169,108,.48);
  background:linear-gradient(159deg,#fffefd 0%,#f6f9fc 55%,#edf3f8 100%)!important;
  box-shadow:0 19px 40px rgba(0,9,25,.25),inset 0 1px 0 rgba(255,255,255,.98);
  transition:transform .3s cubic-bezier(.18,.75,.28,1),box-shadow .3s,border-color .3s;
}
main[role="main"] #services.tyz21-services-light .feature-card:hover {
  background:linear-gradient(159deg,#ffffff 0%,#f9fbff 55%,#eef4f9 100%)!important;
  border-color:#d7ab71;
  transform:translateY(-6px);
  box-shadow:0 28px 50px rgba(1,12,31,.32),0 0 0 1px rgba(240,198,135,.14);
}
/* keep the decorative sheen away from title and description */
main[role="main"] #services.tyz21-services-light .feature-card::after {
  width:29%;z-index:1;
  background:linear-gradient(98deg,transparent,rgba(228,180,112,.07),rgba(255,255,255,.35),transparent);
}
/* imagery appears as a slightly tilted layered 3D display, while remaining tiny SVGs */
main[role="main"] #services.tyz21-services-light .tyz21-service-art {
  overflow:visible;
  isolation:isolate;
  margin:2px 0 25px;
  border:1px solid rgba(208,171,117,.36);
  background:linear-gradient(135deg,#102d46,#0b2238);
  border-radius:17px;
  box-shadow:0 12px 25px rgba(4,25,43,.13);
  perspective:1100px;
  transform-style:preserve-3d;
}
main[role="main"] #services.tyz21-services-light .tyz21-service-art::before {
  content:"";position:absolute;inset:auto 9% -17px;height:23px;
  background:radial-gradient(ellipse at center,rgba(10,25,44,.35) 0%,transparent 72%);
  filter:blur(6px);pointer-events:none;z-index:0;
}
main[role="main"] #services.tyz21-services-light .tyz21-service-art img {
  position:relative;z-index:1;
  border-radius:15px;
  transform:perspective(1000px) rotateY(-6deg) rotateX(5deg) translateZ(13px) scale(.975);
  transform-origin:center;
  filter:saturate(1.06);
  box-shadow:10px 17px 27px rgba(0,19,39,.28),-3px -3px 10px rgba(249,218,173,.08);
  transition:transform .5s cubic-bezier(.18,.75,.27,1),box-shadow .5s,filter .5s;
  backface-visibility:hidden;
}
main[role="main"] #services.tyz21-services-light .feature-card:hover .tyz21-service-art img {
  transform:perspective(1000px) rotateY(-1deg) rotateX(1deg) translateZ(20px) scale(1.012);
  box-shadow:7px 23px 34px rgba(0,19,39,.3),0 0 20px rgba(237,190,120,.10);
  filter:saturate(1.12);
}
main[role="main"] #services.tyz21-services-light .tyz21-service-art::after {
  z-index:2;
  background:linear-gradient(90deg,transparent,rgba(247,216,166,.26),transparent);
}
main[role="main"] #services.tyz21-services-light .tyz21-service-art .feature-icon {
  z-index:4;
  border:1px solid rgba(245,205,145,.65);
  box-shadow:0 9px 20px rgba(0,11,25,.2);
}
main[role="main"] #services.tyz21-services-light .feature-card h3 {
  color:#17334b!important;
  font-weight:900!important;
  text-shadow:none!important;
  margin-top:3px;
  line-height:1.8!important;
}
main[role="main"] #services.tyz21-services-light .feature-card h3::after {
  background:linear-gradient(90deg,transparent,#cf9a5b);
}
main[role="main"] #services.tyz21-services-light .feature-card p {
  color:#405970!important;
  font-weight:600;
  line-height:2.04!important;
  text-shadow:none!important;
}
main[role="main"] #services.tyz21-services-light .feature-card:focus-within {
  outline:2px solid #d7ac73;
  outline-offset:3px;
}
@media(max-width:650px) {
  main[role="main"] #services.tyz21-services-light .feature-card {
    padding:16px 17px 23px;
  }
  main[role="main"] #services.tyz21-services-light .tyz21-service-art {
    margin:1px 0 20px;
  }
  main[role="main"] #services.tyz21-services-light .tyz21-service-art img {
    transform:perspective(900px) rotateY(-3deg) rotateX(3deg) translateZ(8px) scale(.985);
    box-shadow:6px 12px 17px rgba(0,19,39,.22);
  }
  main[role="main"] #services.tyz21-services-light .feature-card:hover .tyz21-service-art img {
    transform:perspective(900px) rotateY(-3deg) rotateX(3deg) translateZ(8px) scale(.985);
  }
  main[role="main"] #services.tyz21-services-light .feature-card h3 {font-size:17px!important}
  main[role="main"] #services.tyz21-services-light .feature-card p {font-size:13px}
}
@media(hover:none) {
  main[role="main"] #services.tyz21-services-light .feature-card:hover {transform:none}
}
@media(prefers-reduced-motion:reduce) {
  main[role="main"] #services.tyz21-services-light .tyz21-service-art img,
  main[role="main"] #services.tyz21-services-light .feature-card:hover .tyz21-service-art img {
    transform:none!important;transition:none!important;
  }
  main[role="main"] #services.tyz21-services-light .feature-card,
  main[role="main"] #services.tyz21-services-light .feature-card:hover {
    transform:none!important;transition:none!important;
  }
}


/* ---- phase23-compact-section-spacing.css ---- */
/* V23 — compact vertical rhythm for /web-design/ only.
 * Removes accumulated blank space between adjacent sections while retaining
 * readable headings, interactive grids, artwork, SEO content and mobile layout.
 * No DOM changes, images, scripts, or layout-shifting transitions.
 */
main[role="main"] > section {
  margin-block:0!important;
}
main[role="main"] > section.section {
  padding-block:48px 55px;
}
main[role="main"] > section.tyz19-section {
  padding-block:49px 55px;
}
main[role="main"] > section .container {
  margin-block-start:0;
  margin-block-end:0;
}
/* Hero keeps enough top clearance for the fixed site navigation,
   but it no longer reserves empty screen height below the CTA. */
main[role="main"] > section.hero {
  min-height:0;
  padding-block:136px 67px;
}
/* Tighten the first section transitions and preserve the visual cards. */
main[role="main"] #intro { padding-block:49px 53px; }
main[role="main"] #services.tyz21-services-light {
  padding-block:47px 54px;
}
main[role="main"] #web-solutions { padding-block:50px 53px; }
main[role="main"] #design-experience { padding-block:51px 56px; }
main[role="main"] #stats-banner { padding-block:49px 54px; }
main[role="main"] #process { padding-block:49px 57px; }
main[role="main"] #web-design-guide { padding-block:50px 48px; }
/* This was the most obvious blank gap in the supplied screenshot. */
main[role="main"] #portfolio {
  padding-block:33px 54px;
  scroll-margin-top:85px;
}
main[role="main"] #what-you-get { padding-block:51px 55px; }
main[role="main"] #partners { padding-block:44px 47px; }
main[role="main"] #faq { padding-block:49px 58px; }
main[role="main"] #cta { padding-block:43px 57px; }
/* Section title spacing: remove padding-on-padding effect. */
main[role="main"] .section-header {
  margin-bottom:27px;
}
main[role="main"] .section-header h2 {
  margin-top:0;
  margin-bottom:7px;
}
main[role="main"] .section-header .section-divider {
  margin-block:9px 12px;
}
main[role="main"] .section-header p {
  margin-block:0;
}
main[role="main"] .tyz19-heading {
  margin-bottom:30px;
}
main[role="main"] .tyz19-heading .tyz19-eyebrow {
  margin-bottom:9px;
}
main[role="main"] .tyz19-heading p {
  margin-top:10px;
}
main[role="main"] #services.tyz21-services-light .section-header {
  margin-bottom:26px;
}
main[role="main"] #services.tyz21-services-light .section-divider {
  margin-block:9px 12px;
}
main[role="main"] #services.tyz21-services-light .features-grid {
  margin-top:22px;
}
/* Keep section-to-section visual continuity without extra dividers or whitespace. */
@media (max-width:900px) {
  main[role="main"] > section.section {
    padding-block:42px 46px;
  }
  main[role="main"] > section.tyz19-section {
    padding-block:43px 47px;
  }
  main[role="main"] > section.hero {
    min-height:0;
    padding-block:116px 52px;
  }
  main[role="main"] #portfolio { padding-block:33px 45px; }
  main[role="main"] #intro { padding-block:42px 48px; }
  main[role="main"] #services.tyz21-services-light { padding-block:41px 47px; }
  main[role="main"] #web-design-guide { padding-block:43px 43px; }
  main[role="main"] .section-header,
  main[role="main"] .tyz19-heading { margin-bottom:23px; }
}
@media (max-width:650px) {
  main[role="main"] > section.section,
  main[role="main"] > section.tyz19-section {
    padding:33px 15px 38px;
  }
  main[role="main"] > section.hero {
    min-height:0;
    padding:104px 15px 43px;
  }
  main[role="main"] #intro { padding-block:35px 38px; }
  main[role="main"] #services.tyz21-services-light { padding-block:35px 40px; }
  main[role="main"] #web-solutions { padding-block:35px 38px; }
  main[role="main"] #design-experience { padding-block:37px 40px; }
  main[role="main"] #stats-banner { padding-block:36px 41px; }
  main[role="main"] #process { padding-block:35px 43px; }
  main[role="main"] #web-design-guide { padding-block:36px 35px; }
  main[role="main"] #portfolio {
    padding:24px 15px 40px;
    scroll-margin-top:74px;
  }
  main[role="main"] #what-you-get { padding-block:38px 40px; }
  main[role="main"] #partners { padding-block:33px 36px; }
  main[role="main"] #faq { padding-block:35px 43px; }
  main[role="main"] #cta { padding-block:34px 43px; }
  main[role="main"] .section-header,
  main[role="main"] .tyz19-heading,
  main[role="main"] #services.tyz21-services-light .section-header {
    margin-bottom:19px;
  }
  main[role="main"] .section-header h2 { margin-bottom:4px; }
  main[role="main"] .section-header .section-divider {
    margin-block:7px 10px;
  }
  main[role="main"] .tyz19-heading .tyz19-eyebrow { margin-bottom:7px; }
  main[role="main"] .tyz19-heading p { margin-top:8px; }
  main[role="main"] #services.tyz21-services-light .features-grid { margin-top:19px; }
}


/* ---- phase24-portfolio-stack.css ---- */
/* V24 — Portfolio cards assemble one at a time, repeating every 30s while visible.
   Scoped to /web-design/#portfolio. Does not modify the grid, card content or SEO. */
main[role="main"] #portfolio .portfolio-grid{
  perspective:1400px;
}
main[role="main"] #portfolio .portfolio-card{
  position:relative;
  transform-origin:50% 84%;
  backface-visibility:hidden;
}
main[role="main"] #portfolio .portfolio-card.tyz24-placing{
  /* The element motion uses only transform + opacity on a compositor layer. */
  z-index:1;
}
main[role="main"] #portfolio .portfolio-card.tyz24-placing::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:3;
  border:1px solid rgba(250,218,167,.95);
  border-radius:inherit;
  pointer-events:none;
  opacity:0;
  box-shadow:inset 0 0 20px rgba(241,194,129,.14);
  animation:tyz24-card-edge 900ms ease var(--tyz24-delay,0ms) both;
}
@keyframes tyz24-card-edge{
  0%,100%{opacity:0}
  45%{opacity:.93}
  74%{opacity:.48}
}
@media (hover:none){
  main[role="main"] #portfolio .portfolio-card.tyz24-placing{
    /* On touch screens, the stagger works without hover-only effects. */
    cursor:inherit;
  }
}
@media (prefers-reduced-motion:reduce){
  main[role="main"] #portfolio .portfolio-card.tyz24-placing::before{
    animation:none!important;
    opacity:0!important;
  }
}


/* ---- phase25-partners-marquee.css ---- */
/* Tamiyouz Alrowad /web-design/ — V25 Partner Marquee.
   Reuses 5 original logos; one JS-generated hidden duplicate for a seamless loop.
   No external libraries or replacement imagery. */
main[role="main"] #partners .partners-grid.tyz25-marquee-viewport {
  display:block;
  position:relative;
  width:100%;
  overflow:hidden;
  padding:8px 0 14px;
  margin-inline:auto;
  direction:ltr;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 4.5%,#000 95.5%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0%,#000 4.5%,#000 95.5%,transparent 100%);
}
main[role="main"] #partners .tyz25-marquee-track {
  display:flex;
  flex-wrap:nowrap;
  align-items:stretch;
  width:max-content;
  direction:ltr;
  animation:tyz25-partners-slide 31s linear infinite;
  animation-play-state:running;
  will-change:transform;
}
main[role="main"] #partners .tyz25-marquee-group {
  display:flex;
  flex:0 0 auto;
  align-items:stretch;
  justify-content:space-evenly;
  gap:clamp(12px,1.3vw,18px);
  width:max-content;
  direction:rtl;
}
main[role="main"] #partners .tyz25-marquee-group .partner-item {
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 clamp(146px,12.7vw,177px);
  width:clamp(146px,12.7vw,177px);
  min-width:0;
  min-height:106px;
  max-width:none;
  margin:0;
  padding:15px 18px;
  border-radius:16px;
  overflow:hidden;
  isolation:isolate;
  background:linear-gradient(143deg,#224762 0%,#183854 68%,#122e49 100%);
  border:1px solid rgba(237,194,133,.32);
  box-shadow:inset 0 1px 0 rgba(255,233,193,.07),0 10px 22px rgba(0,11,28,.1);
  transition:background .32s ease,border-color .32s ease,box-shadow .32s ease,transform .32s ease;
}
main[role="main"] #partners .tyz25-marquee-group .partner-item::before {
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:radial-gradient(circle at 50% 50%,rgba(239,189,116,.18),transparent 68%);
  opacity:0;
  transition:opacity .35s ease;
}
main[role="main"] #partners .tyz25-marquee-group .partner-item::after {
  content:"";
  position:absolute;
  z-index:2;
  pointer-events:none;
  top:0;bottom:0;
  left:-44%;
  width:34%;
  transform:skewX(-19deg);
  background:linear-gradient(98deg,transparent,rgba(255,232,190,.11),rgba(255,241,221,.42),transparent);
  opacity:0;
}
main[role="main"] #partners .tyz25-marquee-group .partner-item img {
  position:relative;
  z-index:1;
  display:block;
  max-width:100%;
  max-height:72px;
  width:auto!important;
  height:60px!important;
  object-fit:contain;
  filter:drop-shadow(0 4px 10px rgba(2,17,33,.07));
  transition:transform .4s cubic-bezier(.2,.7,.3,1),filter .4s;
}
main[role="main"] #partners .partners-grid.tyz25-marquee-viewport:is(:hover,:focus-within) .tyz25-marquee-track,
main[role="main"] #partners .partners-grid.tyz25-marquee-viewport.tyz25-paused .tyz25-marquee-track {
  animation-play-state:paused;
  will-change:auto;
}
main[role="main"] #partners .tyz25-marquee-group .partner-item:hover {
  transform:translateY(-3px);
  border-color:rgba(248,213,163,.85);
  background:linear-gradient(145deg,#2a5270,#20425f 70%,#173b58);
  box-shadow:0 13px 26px rgba(1,12,31,.23),0 0 23px rgba(243,200,129,.1),inset 0 1px 0 rgba(255,237,196,.15);
}
main[role="main"] #partners .tyz25-marquee-group .partner-item:hover::before { opacity:1; }
main[role="main"] #partners .tyz25-marquee-group .partner-item:hover::after {
  opacity:1;
  animation:tyz25-logo-sweep .85s cubic-bezier(.16,.7,.26,1) forwards;
}
main[role="main"] #partners .tyz25-marquee-group .partner-item:hover img {
  transform:scale(1.075);
  filter:drop-shadow(0 0 10px rgba(246,206,149,.32)) brightness(1.09);
}
@keyframes tyz25-partners-slide {
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(-50%,0,0)}
}
@keyframes tyz25-logo-sweep {
  from{left:-44%;opacity:0}
  14%{opacity:1}
  88%{opacity:1}
  to{left:115%;opacity:0}
}
@media(max-width:650px){
  main[role="main"] #partners .partners-grid.tyz25-marquee-viewport {
    padding-block:8px 12px;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
    mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  }
  main[role="main"] #partners .tyz25-marquee-group {gap:12px}
  main[role="main"] #partners .tyz25-marquee-group .partner-item {
    flex-basis:145px;width:145px;min-height:96px;padding:13px 15px;
  }
  main[role="main"] #partners .tyz25-marquee-group .partner-item img {height:55px!important}
  main[role="main"] #partners .tyz25-marquee-track {animation-duration:28s}
}
@media(hover:none){
  main[role="main"] #partners .tyz25-marquee-group .partner-item:hover {transform:none}
  main[role="main"] #partners .tyz25-marquee-group .partner-item:hover img {transform:none}
}
@media(prefers-reduced-motion:reduce){
  main[role="main"] #partners .partners-grid.tyz25-marquee-viewport {
    overflow:visible;
    -webkit-mask-image:none;
    mask-image:none;
  }
  main[role="main"] #partners .tyz25-marquee-track {
    display:block;
    width:100%;
    animation:none!important;
    transform:none!important;
    will-change:auto;
  }
  main[role="main"] #partners .tyz25-marquee-group {
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    width:100%!important;
  }
  main[role="main"] #partners .tyz25-marquee-group[aria-hidden="true"] {display:none}
  main[role="main"] #partners .tyz25-marquee-group .partner-item,
  main[role="main"] #partners .tyz25-marquee-group .partner-item img {
    transition:none!important;
    transform:none!important;
  }
  main[role="main"] #partners .tyz25-marquee-group .partner-item::after {animation:none!important;display:none}
}


/* ---- phase26-faq-accordion.css ---- */
/* Tamiyouz Alrowad /web-design/ — V26 FAQ accordion UX.
   Native <details> stays functional without JavaScript; original answers / SEO unchanged. */
main[role="main"] #faq {
  background:radial-gradient(ellipse 52% 25% at 90% 10%,rgba(215,168,107,.045),transparent 78%),#0c233d;
}
main[role="main"] #faq .faq-list {
  display:grid;grid-template-columns:minmax(0,1fr);gap:13px;
  max-width:1160px;margin-inline:auto;
}
main[role="main"] #faq .tyz26-faq-hint {
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  margin:13px auto 0;padding:8px 18px;border-radius:99px;
  border:1px solid rgba(241,201,146,.27);
  background:rgba(234,187,122,.065);color:#e8d4b4;
  font-size:12px;font-weight:700;line-height:1.6;
}
main[role="main"] #faq .tyz26-hint-icon {
  display:grid;place-items:center;flex:none;width:23px;height:23px;border-radius:50%;
  font-size:16px;line-height:1;background:rgba(238,193,128,.17);color:#ffdfab;
}
main[role="main"] #faq details.faq-item {
  position:relative;isolation:isolate;
  margin:0!important;min-width:0;
  border:1px solid rgba(234,190,131,.35);
  border-radius:17px;
  overflow:hidden;
  background:linear-gradient(129deg,#1a3c59 0%,#13314e 78%,#102d48 100%);
  box-shadow:0 7px 20px rgba(0,12,30,.08),inset 0 1px 0 rgba(255,234,204,.035);
  transition:border-color .28s,box-shadow .28s,background .28s,transform .28s;
}
main[role="main"] #faq details.faq-item::before {
  content:"";position:absolute;right:0;top:14px;bottom:14px;width:3px;border-radius:3px 0 0 3px;
  background:linear-gradient(180deg,#ffe4b1,#d5a26a);opacity:0;transform:scaleY(.55);
  transform-origin:center;transition:opacity .3s,transform .3s;pointer-events:none;
}
main[role="main"] #faq details.faq-item:hover {
  border-color:rgba(244,207,151,.65);box-shadow:0 12px 29px rgba(0,11,29,.14);
}
main[role="main"] #faq details.faq-item[open] {
  border-color:rgba(246,207,148,.77);
  background:linear-gradient(138deg,#214762 0%,#193b57 70%,#143551 100%);
  box-shadow:0 19px 38px rgba(0,12,30,.18),0 0 0 1px rgba(246,205,151,.07);
}
main[role="main"] #faq details.faq-item[open]::before{opacity:1;transform:scaleY(1)}
main[role="main"] #faq details.faq-item summary {
  display:flex;align-items:center;justify-content:space-between;
  direction:rtl;gap:22px;min-height:72px;
  padding:17px 24px 17px 22px;margin:0;
  cursor:pointer;list-style:none;
  color:#f5d6a8!important;font-size:15px;font-weight:850!important;
  line-height:1.9!important;
  -webkit-tap-highlight-color:transparent;
  transition:background .25s,color .25s;
}
main[role="main"] #faq details.faq-item summary::-webkit-details-marker { display:none }
main[role="main"] #faq details.faq-item summary::marker { content:"" }
main[role="main"] #faq details.faq-item summary:hover {
  background:rgba(241,194,130,.055);
}
main[role="main"] #faq details.faq-item[open] summary {
  color:#fff1d7!important;
  background:linear-gradient(90deg,rgba(242,198,136,.035),rgba(240,194,132,.08));
}
main[role="main"] #faq details.faq-item summary:focus-visible {
  outline:3px solid #f8d4a0!important;outline-offset:-4px;border-radius:16px;
}
main[role="main"] #faq .tyz26-q-text {
  flex:1;min-width:0;overflow-wrap:anywhere;text-align:right;
}
main[role="main"] #faq .tyz26-action {
  display:inline-flex;align-items:center;gap:12px;
  flex:0 0 auto;
}
main[role="main"] #faq .tyz26-action-closed,
main[role="main"] #faq .tyz26-action-open {
  font-size:11px;line-height:1.5;font-weight:750;white-space:nowrap;
  color:#b9cfe0;transition:color .2s;
}
main[role="main"] #faq .tyz26-action-open{display:none;color:#ffe0af}
main[role="main"] #faq details.faq-item[open] .tyz26-action-closed{display:none}
main[role="main"] #faq details.faq-item[open] .tyz26-action-open{display:inline}
main[role="main"] #faq .tyz26-plus {
  position:relative;display:grid;place-items:center;
  width:39px;height:39px;flex:0 0 39px;
  border-radius:12px;border:1px solid rgba(244,206,151,.57);
  background:rgba(241,194,132,.12);
  color:#f9d49b;box-shadow:inset 0 1px 0 rgba(255,238,210,.1);
  transition:transform .28s,background .28s,border-color .28s,box-shadow .28s;
}
main[role="main"] #faq .tyz26-plus::before,
main[role="main"] #faq .tyz26-plus::after {
  content:"";position:absolute;top:50%;left:50%;
  border-radius:4px;background:currentColor;transform:translate(-50%,-50%);
  transition:opacity .25s,transform .28s;
}
main[role="main"] #faq .tyz26-plus::before{width:14px;height:2px}
main[role="main"] #faq .tyz26-plus::after{width:2px;height:14px}
main[role="main"] #faq details.faq-item:hover .tyz26-plus {
  background:rgba(242,196,134,.21);border-color:#f8d5a2;
  box-shadow:0 0 17px rgba(236,188,117,.09);
}
main[role="main"] #faq details.faq-item[open] .tyz26-plus {
  color:#16344e;
  border-color:#ffe3b3;
  background:linear-gradient(125deg,#ffe3b6,#ddab70);
  transform:rotate(180deg);
  box-shadow:0 7px 18px rgba(2,14,29,.15);
}
main[role="main"] #faq details.faq-item[open] .tyz26-plus::after {opacity:0}
main[role="main"] #faq .tyz26-answer {
  position:relative;display:block;
  margin:0 23px 21px;
  padding:20px 22px 4px;
  border-top:1px solid rgba(243,208,157,.26);
  border-radius:0;
}
main[role="main"] #faq .tyz26-answer-label {
  display:inline-flex;align-items:center;gap:7px;
  color:#f7d4a0;font-size:11px;font-weight:850;
  letter-spacing:.1px;margin-bottom:8px;
}
main[role="main"] #faq .tyz26-answer-label::before {
  content:"";width:7px;height:7px;border-radius:50%;
  background:#f0c58b;box-shadow:0 0 0 4px rgba(239,197,138,.1);
}
main[role="main"] #faq details.faq-item .tyz26-answer p {
  color:#e4eef7!important;
  font-size:14px!important;line-height:2.12!important;
  max-width:1000px;margin:0 0 15px!important;font-weight:500;
}
main[role="main"] #faq details.faq-item[open] .tyz26-answer {
  animation:tyz26-answer-reveal .34s cubic-bezier(.15,.68,.27,1) both;
}
@keyframes tyz26-answer-reveal {
  from{opacity:.25;transform:translateY(-7px)}
  to{opacity:1;transform:translateY(0)}
}
@media(max-width:650px) {
  main[role="main"] #faq .faq-list{gap:10px}
  main[role="main"] #faq .tyz26-faq-hint {
    font-size:11px;padding:7px 12px;max-width:100%;
  }
  main[role="main"] #faq details.faq-item{border-radius:14px}
  main[role="main"] #faq details.faq-item summary {
    min-height:61px;padding:12px 15px 12px 12px;gap:9px;
    font-size:13px;line-height:1.9!important;
  }
  main[role="main"] #faq .tyz26-action{gap:0}
  main[role="main"] #faq .tyz26-action-closed,
  main[role="main"] #faq .tyz26-action-open{display:none!important}
  main[role="main"] #faq .tyz26-plus {
    width:35px;height:35px;flex-basis:35px;border-radius:10px
  }
  main[role="main"] #faq .tyz26-answer {
    margin:0 14px 14px;
    padding:15px 9px 2px;
  }
  main[role="main"] #faq details.faq-item .tyz26-answer p {
    font-size:12.8px!important;line-height:2.08!important;
  }
}
@media(prefers-reduced-motion:reduce) {
  main[role="main"] #faq details.faq-item,
  main[role="main"] #faq details.faq-item *,
  main[role="main"] #faq details.faq-item::before {
    animation:none!important;transition:none!important;
  }
}


/* ---- phase27-solutions-interactive.css ---- */
/* Web Design V27 — service types: elegant mask reveal, 1-second card cascade,
   light 3D-style vector icons and category-specific WhatsApp CTAs.
   Override only #web-solutions; no external libraries / fonts / images. */
main[role="main"] #web-solutions.tyz27-solutions{
  position:relative;
  isolation:isolate;
  overflow:hidden;
}
main[role="main"] #web-solutions .tyz27-heading{
  max-width:1020px;
  margin-inline:auto;
}
main[role="main"] #web-solutions .tyz27-mask-heading{
  overflow:visible;
  text-wrap:balance;
  line-height:1.53;
}
main[role="main"] #web-solutions .tyz27-mask-line{
  display:block;
  overflow:hidden;
  position:relative;
  padding-inline:6px;
  margin-inline:-6px;
}
main[role="main"] #web-solutions .tyz27-mask-line > span{
  display:block;
  position:relative;
}
main[role="main"] #web-solutions.tyz27-play .tyz27-mask-line > span{
  animation:tyz27-reveal-mask 1.18s cubic-bezier(.18,.75,.24,1) backwards;
}
main[role="main"] #web-solutions.tyz27-play .tyz27-mask-line:nth-child(2) > span{
  animation-delay:320ms;
}
main[role="main"] #web-solutions.tyz27-play .tyz27-mask-line::after{
  content:"";
  position:absolute;
  z-index:2;
  inset-block:13% 13%;
  right:-42%;
  width:32%;
  border-radius:45%;
  pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(240,184,110,.08),rgba(255,224,172,.23),transparent);
  filter:blur(7px);
  animation:tyz27-filter-pass 1.4s ease-out backwards;
}
main[role="main"] #web-solutions.tyz27-play .tyz27-mask-line:nth-child(2)::after{
  animation-delay:320ms;
}
@keyframes tyz27-reveal-mask{
  0% {clip-path:inset(0 0 0 100%);opacity:.18;filter:blur(9px);transform:translateY(7px)}
  65%{filter:blur(.5px);opacity:.95}
  100%{clip-path:inset(0 0 0 0);opacity:1;filter:blur(0);transform:none}
}
@keyframes tyz27-filter-pass{
  from{right:-42%;opacity:0}
  16%{opacity:.75}
  to{right:112%;opacity:0}
}
main[role="main"] #web-solutions .tyz27-solutions-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:16px;
  align-items:stretch;
}
main[role="main"] #web-solutions .tyz27-card{
  display:flex;flex-direction:column;align-items:stretch;
  height:100%;min-height:420px;min-width:0;
  padding:24px 21px 21px;
  border-radius:20px;
  background:linear-gradient(143deg,#20445f,#12314d 75%,#0e2b46);
  border:1px solid rgba(244,204,146,.29);
  box-shadow:0 13px 32px rgba(0,14,32,.16),inset 0 1px 0 rgba(255,232,196,.05);
  transform-origin:center 85%;
  transition:transform .32s cubic-bezier(.2,.75,.26,1),border-color .32s,box-shadow .32s,background .32s;
}
main[role="main"] #web-solutions .tyz27-card:hover{
  transform:translateY(-6px);
  background:linear-gradient(143deg,#27506d,#173b56 75%,#113550);
  border-color:rgba(250,217,166,.76);
  box-shadow:0 24px 44px rgba(0,13,31,.25),0 0 24px rgba(240,186,116,.06);
}
main[role="main"] #web-solutions .tyz27-card::after{
  pointer-events:none;
}
main[role="main"] #web-solutions .tyz27-card-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  direction:ltr; /* index left, decorative icon right in RTL layout */
  margin-bottom:19px;
}
main[role="main"] #web-solutions .tyz27-card .tyz19-solution-num{
  min-width:0;
  color:#b5cce0;
  font-family:inherit;
  font-weight:800;
  font-size:11px;
  letter-spacing:.8px;
  white-space:nowrap;
  line-height:1.5;
  text-align:left;
  direction:ltr;
}
main[role="main"] #web-solutions .tyz27-icon-wrap{
  position:relative;
  display:grid;
  place-items:center;
  flex:0 0 70px;
  width:70px;height:70px;
  margin:0;
  border:1px solid rgba(247,211,159,.55);
  border-radius:20px;
  color:#ffdfa8;
  background:
    radial-gradient(ellipse at 25% 18%,rgba(255,246,222,.28),transparent 54%),
    linear-gradient(143deg,#35627e 0%,#234761 44%,#0e293f 100%);
  box-shadow:
    10px 12px 0 -6px rgba(5,23,40,.66),
    0 17px 21px rgba(0,12,30,.24),
    inset 0 2px 1px rgba(255,245,218,.14),
    inset 0 -9px 17px rgba(1,16,32,.25);
  transform:perspective(800px) rotateX(9deg) rotateY(-11deg);
  transition:transform .35s cubic-bezier(.2,.75,.25,1),box-shadow .35s,border-color .35s;
}
main[role="main"] #web-solutions .tyz27-icon-wrap::before{
  content:"";
  position:absolute;
  inset:-9px;
  border-radius:24px;
  pointer-events:none;
  z-index:-1;
  background:radial-gradient(ellipse at center,rgba(243,197,132,.27),transparent 66%);
  opacity:.55;
  transition:opacity .35s;
}
main[role="main"] #web-solutions .tyz27-icon-wrap svg{
  display:block;width:42px;height:42px;
  stroke:#fce0b2;
  filter:drop-shadow(1px 2px 1px rgba(1,9,21,.4)) drop-shadow(0 0 5px rgba(250,217,171,.09));
  transform:translateZ(8px);
}
main[role="main"] #web-solutions .tyz27-card:hover .tyz27-icon-wrap{
  transform:perspective(800px) rotateX(2deg) rotateY(-2deg) translateY(-3px);
  border-color:#ffe5b9;
  box-shadow:
    7px 10px 0 -6px rgba(5,23,40,.53),
    0 22px 30px rgba(0,12,31,.3),
    0 0 22px rgba(243,194,125,.17),
    inset 0 2px 1px rgba(255,245,218,.2);
}
main[role="main"] #web-solutions .tyz27-card:hover .tyz27-icon-wrap::before{opacity:1}
main[role="main"] #web-solutions .tyz27-card h3{
  margin:0 0 12px!important;
  min-height:3.3em;
  color:#ffdcaa!important;
  font-size:clamp(17px,1.35vw,19px)!important;
  font-weight:900!important;
  line-height:1.65!important;
  overflow-wrap:anywhere;
}
main[role="main"] #web-solutions .tyz27-card p{
  margin:0 0 15px!important;
  color:#dce8f3!important;
  font-size:13px!important;
  line-height:1.95!important;
  font-weight:500;
}
main[role="main"] #web-solutions .tyz27-points{
  padding:13px 0 15px;
  margin:0 0 20px;
  display:grid;
  gap:8px;
  list-style:none;
  border-top:1px solid rgba(244,204,148,.17);
}
main[role="main"] #web-solutions .tyz27-points li{
  position:relative;
  padding-inline-start:18px;
  color:#c8dbea;
  font-size:12px;
  line-height:1.75;
}
main[role="main"] #web-solutions .tyz27-points li::before{
  content:"";
  position:absolute;
  right:0;
  top:.62em;
  width:7px;height:7px;
  border-radius:50%;
  background:#edc68d;
  box-shadow:0 0 0 3px rgba(240,199,141,.1);
}
main[role="main"] #web-solutions .tyz27-card-footer{
  margin-top:auto;
  padding-top:3px;
}
main[role="main"] #web-solutions .tyz27-cta{
  position:relative;isolation:isolate;overflow:hidden;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  width:100%;min-height:48px;
  padding:11px 14px;
  border-radius:12px;
  color:#122d43!important;
  background:linear-gradient(111deg,#ffe4b8,#dfae75 60%,#f2cf98);
  border:1px solid rgba(255,234,194,.75);
  box-shadow:0 12px 22px rgba(0,11,29,.15),inset 0 1px 0 rgba(255,255,255,.32);
  text-decoration:none;
  font-weight:900;
  font-size:12.5px;
  line-height:1.5;
  transition:transform .22s,box-shadow .22s,filter .22s;
}
main[role="main"] #web-solutions .tyz27-cta::before{
  content:"";
  position:absolute;z-index:1;
  inset:0 auto 0 -50%;width:44%;
  background:linear-gradient(95deg,transparent,rgba(255,255,255,.64),transparent);
  transform:skewX(-22deg);
  transition:left .72s cubic-bezier(.2,.78,.3,1);
  pointer-events:none;
}
main[role="main"] #web-solutions .tyz27-cta:hover::before{left:123%}
main[role="main"] #web-solutions .tyz27-cta:hover{
  transform:translateY(-2px);
  filter:brightness(1.03);
  box-shadow:0 16px 29px rgba(0,11,29,.23);
}
main[role="main"] #web-solutions .tyz27-cta-arrow{
  display:grid;place-items:center;
  border-radius:50%;
  height:26px;width:26px;flex:0 0 26px;
  background:rgba(17,48,70,.12);
  transition:transform .2s;
  font-size:17px;
}
main[role="main"] #web-solutions .tyz27-cta:hover .tyz27-cta-arrow{
  transform:translate(-3px,-2px);
}
main[role="main"] #web-solutions .tyz27-cta:focus-visible{
  outline:3px solid #fff0cf;
  outline-offset:4px;
}
/* When JS is absent, all content stays visible. JS arms the hidden starting
   state only after DOM ready and triggers each card at exact 1000ms intervals. */
main[role="main"] #web-solutions.tyz27-armed .tyz27-card:not(.tyz27-in){
  opacity:0;
  transform:perspective(900px) translate3d(0,28px,0) rotateX(6deg) scale(.976);
  pointer-events:none;
}
main[role="main"] #web-solutions.tyz27-armed .tyz27-card.tyz27-in{
  opacity:1;
  animation:tyz27-card-arrive .8s cubic-bezier(.17,.79,.26,1) backwards;
}
@keyframes tyz27-card-arrive{
  from{opacity:.08;transform:perspective(900px) translate3d(0,32px,0) rotateX(7deg) scale(.967);filter:blur(4px)}
  70%{opacity:1;filter:blur(0)}
  to{opacity:1;transform:translateY(0);filter:none}
}
@media(max-width:1120px){
  main[role="main"] #web-solutions .tyz27-solutions-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  main[role="main"] #web-solutions .tyz27-card{min-height:405px}
  main[role="main"] #web-solutions .tyz27-card h3{min-height:0}
}
@media(max-width:650px){
  main[role="main"] #web-solutions .tyz27-solutions-grid{
    grid-template-columns:1fr;gap:13px;
  }
  main[role="main"] #web-solutions .tyz27-heading{margin-bottom:22px}
  main[role="main"] #web-solutions .tyz27-mask-heading{
    font-size:clamp(25px,7vw,32px)!important;line-height:1.62;
  }
  main[role="main"] #web-solutions .tyz27-card{
    min-height:0;padding:20px 20px 18px;
  }
  main[role="main"] #web-solutions .tyz27-card-top{margin-bottom:13px}
  main[role="main"] #web-solutions .tyz27-icon-wrap{
    width:59px;height:59px;flex-basis:59px;border-radius:17px;
  }
  main[role="main"] #web-solutions .tyz27-icon-wrap svg{width:35px;height:35px}
  main[role="main"] #web-solutions .tyz27-card h3{font-size:17px!important;min-height:0}
  main[role="main"] #web-solutions .tyz27-card p{font-size:12.5px!important}
  main[role="main"] #web-solutions .tyz27-points{margin-bottom:14px}
  main[role="main"] #web-solutions .tyz27-cta{min-height:48px}
}
@media(hover:none){
  main[role="main"] #web-solutions .tyz27-card:hover{transform:none}
  main[role="main"] #web-solutions .tyz27-card:hover .tyz27-icon-wrap{
    transform:perspective(800px) rotateX(9deg) rotateY(-11deg);
  }
}
@media(prefers-reduced-motion:reduce){
  main[role="main"] #web-solutions .tyz27-mask-line > span,
  main[role="main"] #web-solutions .tyz27-mask-line::after,
  main[role="main"] #web-solutions .tyz27-card,
  main[role="main"] #web-solutions .tyz27-icon-wrap,
  main[role="main"] #web-solutions .tyz27-cta,
  main[role="main"] #web-solutions .tyz27-cta::before{
    animation:none!important;transition:none!important;
    opacity:1!important;clip-path:none!important;filter:none!important;
  }
  main[role="main"] #web-solutions .tyz27-card{
    transform:none!important;pointer-events:auto!important;
  }
  main[role="main"] #web-solutions .tyz27-mask-line::after{display:none!important}
}


/* ---- phase28-hero-visibility-cta.css ---- */
/* V28 — web-design hero CTA and benefits visibility fix
 * Scope: /web-design/ only. No image downloads or animation JS. */
/* Never crop the last hero content row: intrinsic height instead of historical min-height.
   Feature band below is in normal flow, outside the hero overflow context. */
main[role="main"] > section#hero.hero{
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  overflow:visible!important;
  padding-block:128px 39px!important;
  box-sizing:border-box;
}
main[role="main"] #hero .hero-content{
  width:100%;
  max-width:950px;
  min-width:0;
  margin-inline:auto;
}
main[role="main"] #hero .hero-content h1{
  text-wrap:balance;
}
main[role="main"] #hero .hero-content>p{
  margin-inline:auto;
  max-width:810px;
  line-height:2.05;
}
main[role="main"] .tyz28-benefits-strip{
  position:relative;
  isolation:isolate;
  width:100%;
  padding:0 24px 43px;
  margin:0;
  background:linear-gradient(130deg,#0f2943,#091f37 60%,#091d34);
  border-bottom:1px solid rgba(236,190,126,.23);
}
main[role="main"] .tyz28-benefits-inner{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  align-items:stretch;
  max-width:1020px;
  margin:0 auto;
  gap:15px;
}
main[role="main"] .tyz28-benefit{
  display:flex;
  align-items:center;
  gap:16px;
  min-width:0;
  min-height:109px;
  padding:20px 19px;
  border:1px solid rgba(245,201,145,.33);
  border-radius:17px;
  background:linear-gradient(145deg,rgba(39,79,109,.85),rgba(20,54,81,.93) 80%);
  box-shadow:0 13px 28px rgba(0,10,26,.17),inset 0 1px 0 rgba(255,242,215,.055);
  color:#e9f3fc;
  transition:border-color .3s ease,transform .3s ease,box-shadow .3s ease;
}
main[role="main"] .tyz28-benefit:hover{
  transform:translateY(-3px);
  border-color:rgba(250,218,169,.75);
  box-shadow:0 17px 33px rgba(0,9,26,.24),0 0 18px rgba(234,186,117,.06);
}
main[role="main"] .tyz28-benefit-icon{
  position:relative;
  flex:0 0 52px;
  width:52px;height:56px;
  display:grid;
  place-items:center;
  border-radius:15px;
  color:#f9d6a2;
  background:linear-gradient(150deg,rgba(243,202,146,.18),rgba(234,170,105,.05));
  border:1px solid rgba(251,215,169,.32);
  box-shadow:inset 0 1px 0 rgba(255,232,194,.17),0 6px 12px rgba(0,11,29,.11);
}
main[role="main"] .tyz28-benefit-icon svg{
  display:block;
  width:35px;height:43px;
  stroke:#f8d7a4;
  filter:drop-shadow(0 2px 4px rgba(0,7,17,.15));
}
main[role="main"] .tyz28-benefit-text{
  display:flex;
  flex-direction:column;
  min-width:0;
  gap:6px;
  text-align:right;
}
main[role="main"] .tyz28-benefit-text strong{
  display:block;
  color:#ffe0b2;
  font-size:15px;
  line-height:1.75;
  font-weight:900;
}
main[role="main"] .tyz28-benefit-text span{
  display:block;
  color:#d8e6f2;
  font-size:12px;
  line-height:1.8;
  font-weight:550;
}
/* CTA design: visually clear primary/secondary and a deliberate gold sweep. */
main[role="main"] #hero .tyz19-hero-actions{
  display:flex;
  flex-wrap:wrap;
  align-items:stretch;
  justify-content:center;
  gap:12px;
  margin-top:25px;
}
main[role="main"] #hero .tyz19-hero-actions>a{
  position:relative;
  isolation:isolate;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:11px;
  min-height:54px;
  min-width:175px;
  padding:13px 24px;
  border-radius:13px;
  overflow:hidden;
  text-align:center;
  text-decoration:none;
  font-size:14px;
  font-weight:900;
  line-height:1.6;
  border:1px solid rgba(238,196,139,.58);
  transition:transform .23s ease,background .23s ease,border-color .23s ease,box-shadow .23s ease,color .23s ease;
}
main[role="main"] #hero .tyz19-hero-actions .hero-cta{
  color:#122b41!important;
  border-color:#ffe5b9;
  background:linear-gradient(121deg,#ffe7ba,#e7b77d 54%,#f4d39c);
  box-shadow:0 13px 28px rgba(0,11,28,.2),inset 0 1px 0 rgba(255,252,234,.55);
}
main[role="main"] #hero .tyz19-hero-actions .tyz19-hero-secondary{
  color:#f9dbaf!important;
  border:1px solid rgba(244,203,147,.59);
  background:linear-gradient(130deg,rgba(39,80,111,.75),rgba(18,53,82,.88));
  box-shadow:0 8px 20px rgba(0,10,25,.1),inset 0 1px 0 rgba(253,223,179,.07);
}
main[role="main"] #hero .tyz19-hero-actions>a::before{
  content:none!important;
  animation:none!important;
}
/* More visible swipe than the former hairline: enter on hover/focus and
   periodic on the primary button; only composited transforms are animated. */
main[role="main"] #hero .tyz19-hero-actions>a::after{
  content:"";
  position:absolute;
  z-index:1;
  pointer-events:none;
  inset-block:0;
  left:0;
  width:45%;
  opacity:0;
  transform:translate3d(-260%,0,0) skewX(-21deg);
  background:linear-gradient(96deg,transparent,rgba(255,255,255,.07) 18%,rgba(255,255,255,.69) 52%,rgba(255,245,225,.1) 85%,transparent);
  transition:transform .76s cubic-bezier(.2,.75,.28,1),opacity .19s;
}
main[role="main"] #hero .tyz19-hero-actions>a:hover,
main[role="main"] #hero .tyz19-hero-actions>a:focus-visible{
  transform:translateY(-3px);
  box-shadow:0 20px 33px rgba(0,10,25,.29),0 0 19px rgba(247,201,143,.13);
  border-color:#ffe4af;
}
main[role="main"] #hero .tyz19-hero-actions .tyz19-hero-secondary:hover,
main[role="main"] #hero .tyz19-hero-actions .tyz19-hero-secondary:focus-visible{
  background:linear-gradient(115deg,#2f5773,#204767);
  color:#fff1d9!important;
}
main[role="main"] #hero .tyz19-hero-actions>a:hover::after,
main[role="main"] #hero .tyz19-hero-actions>a:focus-visible::after{
  opacity:1;
  transform:translate3d(640%,0,0) skewX(-21deg);
  animation:none!important;
}
main[role="main"] #hero .tyz19-hero-actions .hero-cta::after{
  animation:tyz28-primary-sheen 7.5s ease-in-out 1.6s infinite;
}
@keyframes tyz28-primary-sheen{
  0%,42%,100% {opacity:0;transform:translate3d(-260%,0,0) skewX(-21deg)}
  46% {opacity:1}
  62% {opacity:1;transform:translate3d(640%,0,0) skewX(-21deg)}
  65% {opacity:0;transform:translate3d(640%,0,0) skewX(-21deg)}
}
main[role="main"] #hero .tyz19-hero-actions>a:focus-visible{
  outline:3px solid #fff0cf;
  outline-offset:4px;
}
@media(max-width:960px){
  main[role="main"] > section#hero.hero{
    padding-block:120px 34px!important;
  }
  main[role="main"] .tyz28-benefits-strip{
    padding:0 18px 35px;
  }
  main[role="main"] .tyz28-benefits-inner{
    gap:11px;
  }
  main[role="main"] .tyz28-benefit{
    align-items:flex-start;
    flex-direction:column;
    gap:9px;
    padding:17px 15px;
    min-height:145px;
  }
  main[role="main"] .tyz28-benefit-text strong{font-size:13.5px}
  main[role="main"] .tyz28-benefit-text span{font-size:11.5px}
}
@media(max-width:650px){
  main[role="main"] > section#hero.hero{
    padding:106px 15px 24px!important;
    height:auto!important;
    min-height:0!important;
  }
  main[role="main"] #hero .hero-content{
    width:100%;
  }
  main[role="main"] #hero .hero-content h1{
    font-size:clamp(29px,7.4vw,38px)!important;
    line-height:1.57!important;
    margin-block:15px 18px!important;
    overflow-wrap:break-word;
  }
  main[role="main"] #hero .hero-content>p{
    font-size:13px;
    line-height:2.02;
    margin-bottom:18px;
  }
  main[role="main"] #hero .tyz19-hero-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
    width:100%;
    max-width:100%;
    gap:9px;
    margin-top:19px;
  }
  main[role="main"] #hero .tyz19-hero-actions>a{
    width:100%;min-width:0;min-height:48px;
    padding:10px 8px;font-size:12px;
    gap:6px;line-height:1.5;
  }
  main[role="main"] #hero .tyz19-hero-actions>a.hero-cta{
    grid-column:1/-1;
  }
  main[role="main"] .tyz28-benefits-strip{
    padding:0 15px 30px;
  }
  main[role="main"] .tyz28-benefits-inner{
    grid-template-columns:1fr;
    gap:9px;
  }
  main[role="main"] .tyz28-benefit{
    flex-direction:row;
    min-height:0;
    align-items:center;
    padding:13px 15px;
    gap:13px;
    border-radius:13px;
  }
  main[role="main"] .tyz28-benefit-icon{
    flex:0 0 43px;
    width:43px;height:48px;
    border-radius:12px;
  }
  main[role="main"] .tyz28-benefit-icon svg{
    width:29px;height:35px;
  }
  main[role="main"] .tyz28-benefit-text strong{
    font-size:13px;line-height:1.65;
  }
  main[role="main"] .tyz28-benefit-text span{
    font-size:11px;line-height:1.8;
  }
}
@media(max-width:370px){
  main[role="main"] #hero .tyz19-hero-actions{
    grid-template-columns:1fr;
  }
  main[role="main"] #hero .tyz19-hero-actions>a.hero-cta{
    grid-column:auto;
  }
}
@media(hover:none){
  main[role="main"] .tyz28-benefit:hover{transform:none}
  main[role="main"] #hero .tyz19-hero-actions>a:hover{transform:none}
}
@media(prefers-reduced-motion:reduce){
  main[role="main"] #hero .tyz19-hero-actions>a,
  main[role="main"] #hero .tyz19-hero-actions>a::after,
  main[role="main"] .tyz28-benefit{
    transition:none!important;animation:none!important;
  }
  main[role="main"] #hero .tyz19-hero-actions>a::after{
    display:none!important;
  }
}