/* ======================================================
   IR TRANSCRIPTS
   PREMIUM ENTERPRISE STYLESHEET
   PART 1
   Reset • Variables • Layout • Navigation • Hero
====================================================== */

/* ===========================================
RESET
=========================================== */

*{
margin:0;
padding:0;
box-sizing:border-box;
}

html{
scroll-behavior:smooth;
}

body{

font-family:'Inter',sans-serif;
background:#f6f8fb;
color:#0f172a;
line-height:1.65;
overflow-x:hidden;
-webkit-font-smoothing:antialiased;

}

img{

max-width:100%;
display:block;

}

a{

text-decoration:none;

}

button{

font-family:inherit;

cursor:pointer;

border:none;

}

/* ===========================================
VARIABLES
=========================================== */

:root{

--primary:#0F4C81;
--primary-dark:#08355A;

--secondary:#2D8CFF;

--success:#00B67A;

--text:#0F172A;

--muted:#64748B;

--border:#E2E8F0;

--section:#F8FAFC;

--card:#FFFFFF;

--shadow:

0 20px 60px rgba(15,23,42,.08);

--shadow-lg:

0 35px 90px rgba(15,23,42,.12);

--radius:24px;

}

/* ===========================================
GLOBAL
=========================================== */

.container{

width:min(1320px,92%);

margin:auto;

}

section{

padding:120px 0;

position:relative;

}

.section-title{

text-align:center;

margin-bottom:70px;

}

.section-title h2{

font-size:50px;

font-weight:800;

letter-spacing:-1px;

margin-bottom:18px;

}

.section-title p{

max-width:760px;

margin:auto;

font-size:20px;

color:var(--muted);

}

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

header{

position:fixed;

top:0;

left:0;

width:100%;

z-index:999;

background:rgba(255,255,255,.82);

backdrop-filter:blur(18px);

border-bottom:1px solid rgba(226,232,240,.85);

transition:.35s;

}

nav{

height:90px;

display:flex;

align-items:center;

justify-content:space-between;

}

/* ===========================================
LOGO
=========================================== */

.logo{

display:flex;

align-items:center;

gap:16px;

color:var(--text);

}

.logo span{

width:54px;

height:54px;

display:flex;

align-items:center;

justify-content:center;

background:linear-gradient(135deg,var(--primary),var(--secondary));

border-radius:16px;

font-size:20px;

font-weight:800;

color:white;

box-shadow:0 12px 25px rgba(15,76,129,.35);

}

.logo h2{

font-size:22px;

font-weight:800;

}

.logo p{

font-size:13px;

color:var(--muted);

margin-top:2px;

}

/* ===========================================
NAV LINKS
=========================================== */

.nav-links{

display:flex;

align-items:center;

gap:40px;

list-style:none;

}

.nav-links a{

color:#475569;

font-weight:600;

font-size:15px;

transition:.3s;

position:relative;

}

.nav-links a::after{

content:"";

position:absolute;

left:0;

bottom:-8px;

width:0;

height:2px;

background:var(--secondary);

transition:.35s;

}

.nav-links a:hover{

color:var(--primary);

}

.nav-links a:hover::after{

width:100%;

}

/* ===========================================
NAV BUTTONS
=========================================== */

.nav-buttons{

display:flex;

gap:16px;

}

.btn-primary{

display:inline-flex;

align-items:center;

justify-content:center;

padding:15px 28px;

border-radius:18px;

background:linear-gradient(135deg,var(--primary),var(--secondary));

color:white;

font-weight:700;

transition:.35s;

box-shadow:

0 15px 40px rgba(45,140,255,.30);

}

.btn-primary:hover{

transform:translateY(-4px);

box-shadow:

0 20px 50px rgba(45,140,255,.45);

}

.btn-outline{

display:inline-flex;

align-items:center;

justify-content:center;

padding:15px 26px;

border-radius:18px;

border:1px solid var(--border);

color:var(--text);

font-weight:700;

transition:.35s;

background:white;

}

.btn-outline:hover{

transform:translateY(-4px);

box-shadow:var(--shadow);

}

.btn-secondary{

display:inline-flex;

align-items:center;

justify-content:center;

padding:15px 28px;

border-radius:18px;

background:white;

color:var(--primary);

font-weight:700;

transition:.35s;

}

.btn-secondary:hover{

transform:translateY(-4px);

}

/* ===========================================
HERO
=========================================== */

.hero{

padding-top:180px;

padding-bottom:140px;

background:

radial-gradient(circle at top right,#dbeafe 0%,transparent 35%),

linear-gradient(180deg,#ffffff,#f8fafc);

overflow:hidden;

}

.hero-overlay{

position:absolute;

inset:0;

background-image:

linear-gradient(rgba(15,76,129,.04) 1px,transparent 1px),

linear-gradient(90deg,rgba(15,76,129,.04) 1px,transparent 1px);

background-size:65px 65px;

pointer-events:none;

}

.hero-grid{

display:grid;

grid-template-columns:1.1fr .9fr;

gap:90px;

align-items:center;

position:relative;

z-index:2;

}

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

.hero-badge{

display:inline-flex;

align-items:center;

padding:10px 20px;

border-radius:999px;

background:#dbeafe;

color:var(--primary);

font-size:14px;

font-weight:700;

margin-bottom:32px;

}

.hero h1{

font-size:68px;

line-height:1.05;

font-weight:900;

letter-spacing:-2px;

margin-bottom:28px;

max-width:820px;

}

.hero p{

font-size:21px;

max-width:700px;

color:var(--muted);

}

.hero-buttons{

display:flex;

gap:18px;

margin-top:42px;

}

.hero-stats{

display:grid;

grid-template-columns:repeat(4,1fr);

gap:30px;

margin-top:70px;

}

.hero-stats h2{

font-size:42px;

font-weight:800;

color:var(--primary);

}

.hero-stats p{

font-size:14px;

margin-top:6px;

color:var(--muted);

}

/* ===========================================
DASHBOARD CARD
=========================================== */

.dashboard-card{

background:white;

border-radius:32px;

padding:36px;

border:1px solid var(--border);

box-shadow:var(--shadow-lg);

position:relative;

overflow:hidden;

}

.dashboard-card::before{

content:"";

position:absolute;

right:-120px;

top:-120px;

width:260px;

height:260px;

background:radial-gradient(circle,#dbeafe,transparent);

}

.dashboard-header{

display:flex;

gap:10px;

margin-bottom:30px;

}

.dashboard-header div{

width:13px;

height:13px;

border-radius:50%;

background:#CBD5E1;

}

.dashboard-header div:nth-child(1){

background:#22C55E;

}

.dashboard-header div:nth-child(2){

background:#FACC15;

}

.dashboard-header div:nth-child(3){

background:#EF4444;

}

.dashboard-card h3{

font-size:28px;

font-weight:800;

margin-bottom:28px;

}

.transcript{

display:flex;

flex-direction:column;

gap:18px;

}

.transcript div{

padding:20px;

background:#F8FAFC;

border-radius:18px;

border-left:5px solid var(--secondary);

transition:.35s;

}

.transcript div:hover{

transform:translateX(6px);

background:white;

box-shadow:var(--shadow);

}

.transcript strong{

display:block;

color:var(--primary);

margin-bottom:10px;

font-size:14px;

}

/* ===========================================
END OF PART 1
CONTINUE WITH PART 2
=========================================== */
/* ======================================================
   PART 2
   Industries • Services • AI • Localization
======================================================*/

/* ===========================================
SECTION BACKGROUNDS
=========================================== */

#industries{
background:#ffffff;
}

#services{
background:#f8fafc;
}

#ai{
background:#ffffff;
}

#localization{
background:#f8fafc;
}

/* ===========================================
INDUSTRY GRID
=========================================== */

.industry-grid{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:32px;

margin-top:60px;

}

.industry-card{

background:#fff;

padding:42px;

border-radius:28px;

border:1px solid var(--border);

transition:.35s;

position:relative;

overflow:hidden;

box-shadow:0 12px 35px rgba(15,23,42,.04);

}

.industry-card::before{

content:"";

position:absolute;

left:0;

top:0;

width:100%;

height:5px;

background:linear-gradient(90deg,var(--primary),var(--secondary));

transform:scaleX(0);

transform-origin:left;

transition:.4s;

}

.industry-card:hover{

transform:translateY(-10px);

box-shadow:var(--shadow-lg);

}

.industry-card:hover::before{

transform:scaleX(1);

}

.industry-card h3{

font-size:26px;

margin-bottom:18px;

font-weight:800;

color:var(--text);

}

.industry-card p{

font-size:16px;

color:var(--muted);

line-height:1.8;

}

/* ===========================================
SERVICES
=========================================== */

.services-grid{

display:grid;

grid-template-columns:repeat(4,1fr);

gap:28px;

margin-top:60px;

}

.service-card{

background:white;

border:1px solid var(--border);

border-radius:24px;

padding:34px;

display:flex;

flex-direction:column;

justify-content:center;

align-items:flex-start;

min-height:180px;

transition:.35s;

position:relative;

overflow:hidden;

}

.service-card::after{

content:"→";

position:absolute;

right:30px;

bottom:22px;

font-size:30px;

font-weight:700;

color:#dbeafe;

transition:.35s;

}

.service-card:hover{

transform:translateY(-10px);

box-shadow:var(--shadow);

border-color:#cbd5e1;

}

.service-card:hover::after{

transform:translateX(8px);

color:var(--secondary);

}

.service-card h3{

font-size:23px;

font-weight:800;

margin-bottom:14px;

}

.service-card p{

color:var(--muted);

line-height:1.7;

}

/* ===========================================
AI SECTION
=========================================== */

.split-grid{

display:grid;

grid-template-columns:1fr 420px;

gap:90px;

align-items:center;

}

.split-grid h2{

font-size:50px;

font-weight:800;

margin-bottom:28px;

line-height:1.15;

}

.split-grid p{

font-size:19px;

color:var(--muted);

margin-bottom:40px;

}

.split-grid ul{

display:grid;

grid-template-columns:repeat(2,1fr);

gap:18px;

list-style:none;

}

.split-grid li{

background:#f8fafc;

padding:18px 22px;

border-radius:18px;

border:1px solid var(--border);

font-weight:600;

transition:.3s;

}

.split-grid li:hover{

background:white;

box-shadow:var(--shadow);

transform:translateX(6px);

}

/* ===========================================
FEATURE PANEL
=========================================== */

.feature-panel{

background:linear-gradient(180deg,var(--primary),#0b355b);

padding:45px;

border-radius:30px;

display:flex;

flex-direction:column;

gap:22px;

color:white;

font-size:22px;

font-weight:700;

box-shadow:

0 30px 70px rgba(15,76,129,.35);

}

.feature-panel div{

padding:18px;

border-radius:18px;

background:rgba(255,255,255,.08);

backdrop-filter:blur(8px);

}

/* ===========================================
LOCALIZATION
=========================================== */

#localization .services-grid{

margin-top:50px;

}

#localization .service-card{

min-height:160px;

justify-content:center;

align-items:center;

text-align:center;

font-size:22px;

font-weight:700;

}

#localization .service-card:hover{

background:linear-gradient(180deg,#ffffff,#f7fbff);

}

/* ===========================================
PROCESS TIMELINE
=========================================== */

.timeline{

background:white;

padding:45px;

border-radius:30px;

border:1px solid var(--border);

display:flex;

justify-content:space-between;

align-items:center;

font-size:20px;

font-weight:700;

box-shadow:var(--shadow);

position:relative;

overflow:auto;

white-space:nowrap;

}

.timeline::before{

content:"";

position:absolute;

left:6%;

right:6%;

height:2px;

background:#dbeafe;

top:50%;

z-index:0;

}

.timeline{

z-index:1;

}

.timeline>*{

position:relative;

z-index:2;

background:white;

padding:0 14px;

}

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

.industry-card,
.service-card,
.feature-panel,
.timeline{

transition:

transform .35s ease,

box-shadow .35s ease,

background .35s ease;

}

/* ===========================================
END OF PART 2
PART 3:
Contact • Partnerships • Careers • Footer • FAQ • Responsive
=========================================== */
/* ======================================================
   PART 3
   Contact • Partnerships • Careers • Footer • Responsive
======================================================*/

/* ===========================================
CONTACT
=========================================== */

#contact{

background:#ffffff;

}

.contact-form{

max-width:900px;

margin:60px auto 0;

display:grid;

grid-template-columns:repeat(2,1fr);

gap:24px;

}

.contact-form input,
.contact-form select,
.contact-form textarea{

width:100%;

padding:18px 20px;

font-size:16px;

font-family:inherit;

background:#fff;

border:1px solid var(--border);

border-radius:18px;

outline:none;

transition:.3s;

}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus{

border-color:var(--secondary);

box-shadow:0 0 0 5px rgba(45,140,255,.10);

}

.contact-form textarea{

grid-column:1/-1;

min-height:180px;

resize:vertical;

}

.contact-form button{

grid-column:1/-1;

justify-self:start;

margin-top:12px;

}

.upload-box{

grid-column:1/-1;

border:2px dashed #cbd5e1;

border-radius:24px;

padding:55px;

background:#f8fafc;

text-align:center;

font-weight:700;

color:var(--muted);

transition:.35s;

cursor:pointer;

}

.upload-box:hover{

background:#eff6ff;

border-color:var(--secondary);

}

/* ===========================================
PARTNERSHIPS
=========================================== */

section:nth-last-of-type(3){

background:#0F4C81;

color:white;

text-align:center;

}

section:nth-last-of-type(3) h2{

font-size:48px;

margin-bottom:24px;

}

section:nth-last-of-type(3) p{

max-width:900px;

margin:auto;

font-size:20px;

opacity:.95;

line-height:1.8;

}

section:nth-last-of-type(3) a{

display:inline-block;

margin-top:35px;

padding:18px 34px;

background:white;

color:var(--primary);

font-weight:800;

border-radius:18px;

transition:.3s;

}

section:nth-last-of-type(3) a:hover{

transform:translateY(-4px);

}

/* ===========================================
CAREERS
=========================================== */

#careers{

background:#f8fafc;

}

#careers h2{

font-size:48px;

margin-bottom:24px;

}

#careers p{

max-width:820px;

color:var(--muted);

margin-bottom:26px;

font-size:18px;

}

#careers ul{

display:grid;

grid-template-columns:repeat(2,1fr);

gap:18px;

list-style:none;

margin:40px 0;

}

#careers li{

padding:18px 22px;

background:white;

border:1px solid var(--border);

border-radius:18px;

font-weight:600;

transition:.35s;

}

#careers li:hover{

transform:translateX(8px);

box-shadow:var(--shadow);

}

#careers a{

display:inline-flex;

margin-top:30px;

padding:16px 28px;

background:var(--primary);

color:white;

border-radius:18px;

font-weight:700;

transition:.3s;

}

#careers a:hover{

background:var(--primary-dark);

}

/* ===========================================
FOOTER
=========================================== */

footer{

background:#071827;

padding:90px 0;

color:white;

}

.footer-grid{

display:grid;

grid-template-columns:2fr 1fr 1fr 1fr;

gap:60px;

}

.footer-grid h3{

font-size:30px;

margin-bottom:18px;

}

.footer-grid h4{

margin-bottom:18px;

font-size:20px;

}

.footer-grid p{

line-height:1.8;

color:#cbd5e1;

}

.footer-grid a{

display:block;

margin-bottom:12px;

color:#cbd5e1;

transition:.3s;

}

.footer-grid a:hover{

color:white;

}

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

.btn-primary,
.btn-outline,
.btn-secondary,
.service-card,
.industry-card,
.upload-box,
.footer-grid a{

transition:all .35s ease;

}

@keyframes float{

0%{

transform:translateY(0px);

}

50%{

transform:translateY(-10px);

}

100%{

transform:translateY(0px);

}

}

.dashboard-card{

animation:float 6s ease-in-out infinite;

}

/* ===========================================
SCROLLBAR
=========================================== */

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-track{

background:#f1f5f9;

}

::-webkit-scrollbar-thumb{

background:#94a3b8;

border-radius:999px;

}

::-webkit-scrollbar-thumb:hover{

background:#64748b;

}

/* ===========================================
RESPONSIVE
=========================================== */

@media (max-width:1200px){

.hero-grid,
.split-grid{

grid-template-columns:1fr;

gap:60px;

}

.services-grid{

grid-template-columns:repeat(2,1fr);

}

.industry-grid{

grid-template-columns:repeat(2,1fr);

}

.hero h1{

font-size:56px;

}

}

@media (max-width:900px){

.nav-links{

display:none;

}

.nav-buttons{

display:none;

}

.hero-stats{

grid-template-columns:repeat(2,1fr);

}

.contact-form{

grid-template-columns:1fr;

}

.footer-grid{

grid-template-columns:1fr;

gap:40px;

}

#careers ul{

grid-template-columns:1fr;

}

.timeline{

flex-direction:column;

gap:30px;

white-space:normal;

}

.timeline::before{

display:none;

}

}

@media (max-width:640px){

section{

padding:80px 0;

}

.hero{

padding-top:150px;

}

.hero h1{

font-size:42px;

}

.hero p{

font-size:18px;

}

.hero-buttons{

flex-direction:column;

}

.hero-stats{

grid-template-columns:1fr;

gap:24px;

}

.services-grid{

grid-template-columns:1fr;

}

.industry-grid{

grid-template-columns:1fr;

}

.section-title h2{

font-size:36px;

}

.split-grid h2{

font-size:36px;

}

.footer-grid{

text-align:center;

}

.logo p{

display:none;

}

}

/* ===========================================
END
=========================================== */